/*
 * Electric Precision customer experience.
 *
 * Shared customer-route bundle, scoped to the customer shell so admin,
 * partner and installer applications retain their existing visual system.
 */

#electric-customer {
  --electric-accent: 75 100% 62%;
  --electric-accent-strong: 76 90% 23%;
  --electric-graphite: 225 22% 6%;
  --electric-panel: 225 18% 10%;
  --electric-panel-raised: 224 16% 14%;
  --electric-line: 220 10% 28%;

  --brand-primary: var(--electric-accent-strong);
  --brand-accent: 76 82% 22%;
  --brand-secondary: var(--electric-graphite);
  --bg-app: 216 22% 97%;
  --bg-surface: 0 0% 100%;
  --bg-muted: 216 18% 93%;
  --fg-default: 225 18% 8%;
  --fg-muted: 220 8% 38%;
  --border: 220 13% 82%;
  --radius: 10px;
  --font-display: var(--font-sans);

  /* Older components use the --color-* aliases from tokens.css. Those resolve
     on :root with the original gold palette, so restate them here to pick up
     this shell's colours (light and dark). */
  --color-primary: hsl(var(--brand-primary));
  --color-ink: hsl(var(--fg-default));
  --color-muted: hsl(var(--fg-muted));
  --color-line: hsl(var(--border));
  --color-soft: hsl(var(--bg-muted));
  --color-surface: hsl(var(--bg-surface));
  --color-dark: hsl(var(--brand-secondary));
  --color-teal: hsl(var(--brand-accent));
  --color-teal-text: hsl(var(--brand-accent));
  --color-gold: hsl(var(--brand-primary));
  --color-gold-text: hsl(var(--brand-accent));
  /* Names some pages use that tokens.css never defined; without them the
     browser fell back to blue links and black text. */
  --color-accent: hsl(var(--brand-primary));
  --color-accent-soft: hsl(var(--brand-primary) / 0.12);
  --color-text: hsl(var(--fg-default));
  --color-text-muted: hsl(var(--fg-muted));
  --color-border: hsl(var(--border));
  --color-border-soft: hsl(var(--border) / 0.6);
  --color-border-muted: hsl(var(--border) / 0.6);
  --color-surface-muted: hsl(var(--bg-muted));
  --color-surface-hover: hsl(var(--bg-muted));

  min-width: 0;
  overflow-x: clip;
  background: hsl(var(--bg-app));
  color: hsl(var(--fg-default));
}

[data-theme="dark"] #electric-customer {
  --brand-primary: var(--electric-accent);
  --brand-accent: 75 100% 67%;
  --bg-app: var(--electric-graphite);
  --bg-surface: var(--electric-panel);
  --bg-muted: var(--electric-panel-raised);
  --fg-default: 0 0% 97%;
  --fg-muted: 220 8% 69%;
  --border: var(--electric-line);
  --accent-success: 145 67% 64%;
  --accent-info: 196 82% 68%;
}

#electric-customer main {
  background: hsl(var(--bg-app));
}

#electric-customer :where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid hsl(var(--electric-accent));
  outline-offset: 3px;
}

#electric-customer :where(.lux-display, h1, h2, h3) {
  font-family: var(--font-sans);
  font-style: normal;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

#electric-customer :where(p, li, dd) {
  text-wrap: pretty;
}

#electric-customer .primary-button,
#electric-customer .primary-link,
#electric-customer .upload-button,
#electric-customer .header-action:not(.header-action--ghost) {
  border: 1px solid hsl(var(--electric-accent));
  border-radius: 7px;
  background: hsl(var(--electric-accent));
  color: hsl(var(--electric-graphite));
  font-weight: 800;
  box-shadow: none;
}

#electric-customer .primary-button:hover,
#electric-customer .primary-link:hover,
#electric-customer .upload-button:hover,
#electric-customer .header-action:not(.header-action--ghost):hover {
  background: hsl(var(--electric-accent) / 0.86);
  border-color: hsl(var(--electric-accent));
  color: hsl(var(--electric-graphite));
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px hsl(var(--electric-accent) / 0.14);
}

#electric-customer .secondary-button,
#electric-customer .secondary-link,
#electric-customer .ghost-button {
  border-radius: 7px;
  border-color: hsl(var(--border));
  background: transparent;
  color: hsl(var(--fg-default));
}

/* Shared customer navigation */
#electric-customer .site-header {
  position: sticky;
  inset-block-start: 0;
  display: block;
  padding: 0;
  background: hsl(var(--electric-graphite) / 0.96);
  border-bottom: 1px solid hsl(var(--electric-line));
  color: hsl(0 0% 100%);
  backdrop-filter: blur(18px);
}

#electric-customer .site-header__bar {
  width: min(100%, 1440px);
  min-height: 74px;
  margin-inline: auto;
  padding: 12px clamp(20px, 4vw, 64px);
}

#electric-customer .site-header .brand img {
  display: block;
}

#electric-customer .site-header .brand-logo {
  width: clamp(138px, 13vw, 184px);
}

#electric-customer .site-header .locale-option--single,
#electric-customer .site-header .theme-toggle,
#electric-customer .site-header .header-menu__trigger {
  border-color: hsl(0 0% 100% / 0.34);
  background: hsl(0 0% 100% / 0.04);
  color: hsl(0 0% 100%);
  box-shadow: none;
}

#electric-customer .site-header .locale-option--single {
  background: hsl(0 0% 100%);
  color: hsl(var(--electric-graphite));
}

#electric-customer .site-header .header-action--ghost {
  border-color: hsl(0 0% 100% / 0.2);
  color: hsl(0 0% 100% / 0.84);
}

#electric-customer .site-header .header-action--ghost:hover {
  border-color: hsl(var(--electric-accent));
  background: hsl(var(--electric-accent) / 0.1);
  color: hsl(var(--electric-accent));
}

#electric-customer .breadcrumb-band {
  background: hsl(var(--electric-panel));
  border-top-color: hsl(var(--electric-line));
  color: hsl(0 0% 100% / 0.7);
}

#electric-customer .breadcrumb-current {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  color: hsl(var(--electric-accent));
}

#electric-customer .site-footer {
  background: hsl(var(--electric-graphite));
  border-top: 1px solid hsl(var(--electric-line));
  color: hsl(0 0% 100% / 0.7);
}

#electric-customer .footer-content {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 64px);
}

#electric-customer .footer-links h2 {
  color: hsl(var(--electric-accent));
}

#electric-customer .footer-links a {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 15px;
  color: hsl(0 0% 100% / 0.82);
}

#electric-customer .footer-links a:hover {
  color: hsl(var(--electric-accent));
}

/* Wizard and review states */
#electric-customer .request-page,
#electric-customer .review-page,
#electric-customer .sent-page {
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: clamp(28px, 5vw, 72px) clamp(18px, 4vw, 48px);
  background: transparent;
}

#electric-customer .step-progress-reserve {
  margin-bottom: clamp(26px, 4vw, 48px);
}

#electric-customer .step-progress {
  border-top-color: hsl(var(--border));
}

#electric-customer .step-progress-item:not(:last-child)::after,
#electric-customer .step-marker::before,
#electric-customer .step-marker::after {
  background: hsl(var(--border));
}

#electric-customer .step-progress-item.complete:not(:last-child)::after,
#electric-customer .step-progress-item.complete .step-marker::before,
#electric-customer .step-progress-item.complete .step-marker::after,
#electric-customer .step-progress-item.active .step-marker::before {
  background: hsl(var(--brand-primary));
}

#electric-customer .step-progress li.step-progress-item .step-dot {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--bg-surface));
  color: hsl(var(--fg-muted));
}

#electric-customer .step-progress li.step-progress-item.complete .step-dot,
#electric-customer .step-progress li.step-progress-item.active .step-dot {
  border-color: hsl(var(--electric-accent));
  background: hsl(var(--electric-accent));
  color: hsl(var(--electric-graphite));
  box-shadow: 0 0 0 5px hsl(var(--electric-accent) / 0.12);
}

#electric-customer .step-progress li.step-progress-item small {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

#electric-customer .step-progress li.step-progress-item strong {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 720;
}

#electric-customer .step-progress-summary {
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--bg-surface));
}

#electric-customer .step-progress-bar > span {
  background: hsl(var(--electric-accent));
}

#electric-customer .step-layout {
  max-width: 1120px;
  margin-inline: auto;
}

#electric-customer .step-panel,
#electric-customer .review-page .content-section,
#electric-customer .success-section {
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--bg-surface));
  box-shadow: 0 24px 70px hsl(var(--electric-graphite) / 0.08);
}

#electric-customer .step-panel {
  display: grid;
  grid-template-columns: minmax(230px, 0.42fr) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(30px, 5vw, 72px);
}

#electric-customer .step-panel-header {
  grid-column: 1;
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

#electric-customer .step-panel > hr {
  display: none;
}

#electric-customer .step-panel > :where(.step-content, .step-loading, [role="alert"]) {
  grid-column: 2;
}

[data-theme="dark"] #electric-customer .step-panel,
[data-theme="dark"] #electric-customer .review-page .content-section,
[data-theme="dark"] #electric-customer .success-section {
  box-shadow: 0 28px 90px hsl(0 0% 0% / 0.34);
}

#electric-customer .step-panel-header h1,
#electric-customer .review-page h1,
#electric-customer .success-section h1 {
  font-family: var(--font-sans);
  font-size: clamp(34px, 5vw, 56px);
  font-style: normal;
  font-weight: 820;
  line-height: 1.02;
  letter-spacing: -0.05em;
}

#electric-customer .step-panel-header > div:first-child > p,
#electric-customer .review-page .section-heading-row p {
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.7;
}

#electric-customer .draft-save-pill {
  border-color: hsl(var(--electric-accent) / 0.45);
  background: hsl(var(--electric-accent) / 0.08);
  color: hsl(var(--brand-accent));
}

[data-theme="dark"] #electric-customer .draft-save-pill {
  color: hsl(var(--electric-accent));
}

#electric-customer :where(.field input, .field textarea, .field select, .auth-form input, .auth-form textarea, .auth-form select) {
  min-height: 52px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--bg-app));
  color: hsl(var(--fg-default));
}

#electric-customer :where(.field input, .field textarea, .field select, .auth-form input, .auth-form textarea, .auth-form select):focus {
  border-color: hsl(var(--electric-accent));
  box-shadow: 0 0 0 4px hsl(var(--electric-accent) / 0.12);
}

#electric-customer .radio-option,
#electric-customer .choice-card {
  border-radius: 10px;
  border-color: hsl(var(--border));
  background: hsl(var(--bg-app));
}

#electric-customer .radio-option:has(input:checked),
#electric-customer .choice-card:has(input:checked) {
  border-color: hsl(var(--electric-accent));
  background: hsl(var(--electric-accent) / 0.08);
  box-shadow: 0 0 0 3px hsl(var(--electric-accent) / 0.1);
}

#electric-customer .request-guidance,
#electric-customer .payment-notice,
#electric-customer .next-steps-box,
#electric-customer .success-reference {
  border-color: hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--bg-muted));
}

#electric-customer .success-mark {
  border-radius: 999px;
  background: hsl(var(--electric-accent));
  color: hsl(var(--electric-graphite));
}

/* Tracking, help, guide, legal, account and auth surfaces */
#electric-customer .track-page {
  width: min(100%, 1120px);
  max-width: none;
  padding: clamp(48px, 8vw, 112px) clamp(20px, 5vw, 64px);
  gap: clamp(32px, 5vw, 56px);
}

#electric-customer .track-page__lookup-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 0.72fr);
  gap: clamp(42px, 8vw, 104px);
  align-items: center;
}

#electric-customer .track-page__intro {
  max-width: 620px;
}

#electric-customer .track-page__intro h1 {
  font-size: clamp(48px, 7vw, 84px);
  font-weight: 820;
  line-height: 0.98;
}

#electric-customer .track-card,
#electric-customer .track-result {
  padding: clamp(24px, 4vw, 44px);
  border-radius: 14px;
  border-color: hsl(var(--border));
  background: hsl(var(--bg-surface));
  box-shadow: none;
}

#electric-customer .track-result {
  border-top: 3px solid hsl(var(--electric-accent));
}

#electric-customer .track-status-pill {
  border-radius: 6px;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.08em;
}

#electric-customer .home-charger-guide,
#electric-customer .legal-page,
#electric-customer .help-page,
#electric-customer .help-article-page,
#electric-customer .status-page,
#electric-customer .profile-hub,
#electric-customer .notifications-page .content-section,
#electric-customer .requests-page .content-section,
#electric-customer .workflow-page {
  width: min(100%, 1160px);
  max-width: none;
  margin-inline: auto;
  padding: clamp(36px, 6vw, 88px) clamp(20px, 5vw, 64px);
}

#electric-customer .home-charger-guide__header,
#electric-customer .help-hero,
#electric-customer .legal-page > header,
#electric-customer .status-page > header {
  padding-bottom: clamp(28px, 5vw, 52px);
  border-bottom: 2px solid hsl(var(--electric-accent));
}

#electric-customer .home-charger-guide h1,
#electric-customer .help-hero h1,
#electric-customer .help-article-page h1,
#electric-customer .legal-page h1,
#electric-customer .status-page h1,
#electric-customer .profile-hub h1,
#electric-customer .notifications-page h1,
#electric-customer .requests-page h1 {
  font-family: var(--font-sans);
  font-size: clamp(42px, 6vw, 72px);
  font-style: normal;
  font-weight: 820;
  line-height: 1;
  letter-spacing: -0.055em;
}

#electric-customer .home-charger-guide h2,
#electric-customer .help-article-page h2,
#electric-customer .legal-page h2 {
  font-family: var(--font-sans);
  font-weight: 760;
  letter-spacing: -0.03em;
}

#electric-customer .home-charger-guide__contents,
#electric-customer .help-categories > *,
#electric-customer .help-results > *,
#electric-customer .help-related > *,
#electric-customer .status-overview,
#electric-customer .summary-section,
#electric-customer .profile-hub__stat,
#electric-customer .profile-hub__cards > *,
#electric-customer .request-record,
#electric-customer .notif-row {
  border-color: hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--bg-surface));
  box-shadow: none;
}

#electric-customer .home-charger-guide__contents {
  position: sticky;
  top: 94px;
  z-index: 3;
  margin: 0;
  padding: 18px 22px;
  align-self: start;
}

#electric-customer .home-charger-guide__contents ul {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

#electric-customer .home-charger-guide__layout {
  display: grid;
  grid-template-columns: minmax(200px, 0.3fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 86px);
  margin-top: clamp(32px, 5vw, 64px);
  align-items: start;
}

#electric-customer .home-charger-guide__flow {
  min-width: 0;
  border-top: 2px solid hsl(var(--brand-primary));
}

#electric-customer .home-charger-guide__page {
  display: block;
  padding-block: clamp(34px, 5vw, 64px);
}

#electric-customer .home-charger-guide__page > :not(.home-charger-guide__page-meta) {
  max-width: 72ch;
}

#electric-customer .home-charger-guide__page-meta {
  flex-direction: row;
  margin-bottom: 12px;
  color: hsl(var(--brand-primary));
}

#electric-customer .auth-page {
  min-height: calc(100dvh - 74px);
  padding: clamp(36px, 8vw, 96px) 20px;
  background: hsl(var(--bg-app));
}

#electric-customer .auth-card {
  width: min(100%, 620px);
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid hsl(var(--border));
  border-top: 3px solid hsl(var(--electric-accent));
  border-radius: 14px;
  background: hsl(var(--bg-surface));
  box-shadow: none;
}

#electric-customer .auth-card h1 {
  font-family: var(--font-sans);
  font-size: clamp(36px, 6vw, 54px);
  font-style: normal;
  font-weight: 820;
  line-height: 1;
  letter-spacing: -0.05em;
}

#electric-customer .section-kicker,
#electric-customer .hf-eyebrow,
#electric-customer .home-charger-guide__page-meta,
#electric-customer .track-result__list dt {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: hsl(var(--brand-primary));
}

@media (max-width: 1050px) {
  #electric-customer .track-page__lookup-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #electric-customer .home-charger-guide__contents {
    position: static;
  }

  #electric-customer .home-charger-guide__layout {
    grid-template-columns: 1fr;
  }

  #electric-customer .home-charger-guide__page {
    display: block;
  }

  #electric-customer .home-charger-guide__page-meta {
    flex-direction: row;
    margin-bottom: 10px;
  }

  #electric-customer .step-panel {
    display: block;
  }

  #electric-customer .step-panel-header {
    position: static;
    margin-bottom: 24px;
  }

  #electric-customer .site-header__bar {
    min-height: 64px;
    padding: 10px 12px;
  }

  #electric-customer .site-header .brand-logo {
    width: 132px;
  }
}

[dir="rtl"] #electric-customer :where(.lux-eyebrow, .section-kicker, .hf-eyebrow, .step-progress-item small, .track-result__list dt) {
  letter-spacing: 0;
}

[dir="rtl"] #electric-customer :where(.lux-display, h1, h2, h3) {
  letter-spacing: 0;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  #electric-customer *,
  #electric-customer *::before,
  #electric-customer *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  #electric-customer .site-header,
  #electric-customer .site-footer {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Header controls, one system (2026-10-08). Utilities (language, theme,
 * notifications) are matching 40px square icon buttons; navigation is plain
 * sentence-case text; "Start request" is the single lime action.
 * ------------------------------------------------------------------------- */
#electric-customer .site-header .site-header__controls,
#electric-customer .site-header .site-header__actions {
  gap: 6px;
}

#electric-customer .site-header .locale-toggle--single {
  padding: 0;
  border: 0;
  background: none;
}

#electric-customer .site-header .locale-option--single,
#electric-customer .site-header .theme-toggle,
#electric-customer .site-header .header-menu__trigger {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid hsl(0 0% 100% / 0.22);
  border-radius: 8px;
  background: transparent;
  color: hsl(0 0% 100%);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#electric-customer .site-header .locale-option--single:hover,
#electric-customer .site-header .theme-toggle:hover,
#electric-customer .site-header .header-menu__trigger:hover {
  background: hsl(0 0% 100% / 0.08);
  border-color: hsl(0 0% 100% / 0.45);
}

#electric-customer .site-header .header-action,
#electric-customer .site-header .header-action--ghost {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

#electric-customer .site-header .header-action--ghost {
  border: 1px solid transparent;
  background: transparent;
  color: hsl(0 0% 100% / 0.8);
  font-weight: 500;
}

#electric-customer .site-header .header-action--ghost:hover,
#electric-customer .site-header .header-action--ghost.router-link-active {
  border-color: transparent;
  background: hsl(0 0% 100% / 0.08);
  color: hsl(0 0% 100%);
}

#electric-customer .site-header .header-action:not(.header-action--ghost) {
  margin-inline-start: 6px;
  font-weight: 700;
}

#electric-customer .site-header .header-action:not(.header-action--ghost):hover {
  transform: none;
}

/* Primary buttons in the page body: the lime action in both themes, so
   they never read as disabled (light mode used a dark olive). */
#electric-customer .ui-button--primary,
#electric-customer .hf-cta--primary {
  border: 1px solid hsl(76 90% 23% / 0.35);
  background: hsl(var(--electric-accent));
  color: hsl(var(--electric-graphite));
}

#electric-customer .ui-button--primary:hover:not(.ui-button--disabled),
#electric-customer .hf-cta--primary:hover {
  background: hsl(75 100% 56%);
  color: hsl(var(--electric-graphite));
  box-shadow: 0 0 0 4px hsl(var(--electric-accent) / 0.22);
}

/* "Send a new verification link" on sign-in: a text link, not a grey box. */
#electric-customer .auth-resend button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: hsl(var(--fg-default));
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#electric-customer .auth-resend button:hover {
  color: hsl(var(--brand-primary));
}

/* Collapsed header menu (phones and tablets): the panel is a light surface
 * in light mode, so its links take the menu's own text
 * colour instead of the header's white. */
@media (max-width: 720px) {
  #electric-customer .site-header .header-menu__content .header-action--ghost {
    color: hsl(var(--header-menu-foreground));
  }

  #electric-customer .site-header .header-menu__content .header-action--ghost:hover,
  #electric-customer .site-header .header-menu__content .header-action--ghost.router-link-active {
    background: hsl(var(--header-menu-foreground) / 0.07);
    color: hsl(var(--header-menu-foreground));
  }

  #electric-customer .site-header .header-menu__content .header-action:not(.header-action--ghost) {
    margin-inline-start: 0;
  }
}

/* ---------------------------------------------------------------------------
 * Customer type and button pass (2026-10-08). Small labels were 10px
 * tracked monospace capitals that read as debug output; buttons mixed
 * spaced capitals ("N E X T") with sentence case. One rule set:
 * labels are sentence-case sans, buttons are 15px/700 sentence case.
 * ------------------------------------------------------------------------- */

/* Labels and eyebrows */
#electric-customer .hf-eyebrow,
#electric-customer .lux-eyebrow,
#electric-customer .error-page__eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#electric-customer .request-meta dt,
#electric-customer .step-progress-copy small,
#electric-customer .error-page__status-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: hsl(var(--fg-muted));
}

#electric-customer .step-dot,
#electric-customer .error-page__status-code {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

#electric-customer .breadcrumb-link,
#electric-customer .site-header .router-link-active:not(.header-action),
#electric-customer .help-category-card__more {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#electric-customer footer h2 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Buttons: one voice */
#electric-customer .primary-button,
#electric-customer .ui-button,
#electric-customer .ui-button__label,
#electric-customer .upload-button,
#electric-customer .secondary-link,
#electric-customer .hf-cta {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

#electric-customer .ui-button .ui-button__label {
  font-size: inherit;
}

/* Request cards: the whole card is the link, so its text is not underlined;
 * the reference underlines on hover to show where it goes. */
#electric-customer .request-record,
#electric-customer .request-record * {
  text-decoration: none;
}

#electric-customer .request-record:hover .request-record-header h2,
#electric-customer .request-record:focus-visible .request-record-header h2 {
  text-decoration: underline;
  text-underline-offset: 4px;
}

#electric-customer .request-record-header p {
  color: hsl(var(--fg-muted));
}

#electric-customer .request-meta dd {
  margin-top: 2px;
}

/* Sign-in: room between the intro and the guest note, which is guidance,
 * not a warning, so it is regular weight. */
#electric-customer .auth-hint {
  margin-top: 20px;
  font-weight: 400;
  line-height: 1.55;
}

#electric-customer .step-progress-summary > div:first-child span,
#electric-customer .legal-page__eyebrow,
#electric-customer .status-overview__badge,
#electric-customer .status-incidents__pill,
#electric-customer .status-overview__deploy-label {
  font-family: var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}

#electric-customer .step-progress-summary > div:first-child span {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--fg-default));
}

#electric-customer .legal-page__eyebrow {
  font-size: 13px;
  font-weight: 600;
}

/* Arabic glyphs read smaller than Latin at the same size; lift the small
 * labels so they stay legible. */
#electric-customer.is-rtl .request-meta dt,
#electric-customer.is-rtl .step-progress-copy small,
#electric-customer.is-rtl .hf-eyebrow,
#electric-customer.is-rtl .breadcrumb-link,
#electric-customer.is-rtl footer h2 {
  font-size: 14px;
}

#electric-customer.is-rtl .estimate-pill,
#electric-customer.is-rtl .status-pill,
#electric-customer.is-rtl .error-page__support {
  font-size: 14px;
}

/* Smallest phones (320px): four header buttons plus the logo need room. */
@media (max-width: 360px) {
  #electric-customer .site-header .locale-option--single,
  #electric-customer .site-header .theme-toggle,
  #electric-customer .site-header .header-menu__trigger,
  #electric-customer .site-header .notif-bell__trigger {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }
}

/* Staff search shortcut: a utility beside notifications and the account
 * menu. Icon only on phones. */
#electric-customer .site-header .header-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid hsl(0 0% 100% / 0.22);
  border-radius: 8px;
  background: transparent;
  color: hsl(0 0% 100% / 0.8);
  font: 500 14px/1 var(--font-sans);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#electric-customer .site-header .header-search:hover {
  background: hsl(0 0% 100% / 0.08);
  border-color: hsl(0 0% 100% / 0.45);
  color: hsl(0 0% 100%);
}

#electric-customer .site-header .header-search:focus-visible {
  outline: 3px solid hsl(var(--electric-accent));
  outline-offset: 2px;
}

#electric-customer .site-header .header-search__label {
  min-width: 9ch;
  text-align: start;
}

#electric-customer .site-header .header-search__kbd {
  padding: 3px 6px;
  border: 1px solid hsl(0 0% 100% / 0.2);
  border-radius: 5px;
  color: hsl(0 0% 100% / 0.65);
  font: 600 11px/1 var(--font-sans);
}

@media (max-width: 720px) {
  #electric-customer .site-header .header-search {
    width: 40px;
    justify-content: center;
    padding: 0;
  }
  #electric-customer .site-header .header-search__label,
  #electric-customer .site-header .header-search__kbd {
    display: none;
  }
}

/* The account menu trigger sits on the dark header. */
#electric-customer .site-header .account-menu__trigger {
  color: hsl(0 0% 100%);
}

/* ---------------------------------------------------------------------------
 * App page type scale and rhythm (customer and staff), 2026-10-08.
 * One page title per page, then compact section titles; the 58-72px sizes
 * were marketing-hero scale and turned every section into a poster.
 * ------------------------------------------------------------------------- */
#electric-customer main .content-section h1,
#electric-customer main .section-heading-row h1,
#electric-customer .legal-page h1,
#electric-customer .status-page h1,
#electric-customer .profile-hub h1,
#electric-customer .notifications-page h1,
#electric-customer .requests-page h1 {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

#electric-customer main .content-section > h2,
#electric-customer main .section-heading-row h2,
#electric-customer main .lifecycle > h2,
#electric-customer main .content-section > header h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

#electric-customer main .content-section {
  padding-block: clamp(20px, 3vw, 32px);
}

#electric-customer main .content-section + .content-section {
  padding-top: 8px;
}

#electric-customer main .section-heading-row {
  margin-bottom: 16px;
}