/**
 * EKM OS Home — production luxury layout (employee.ekmpsychiatry.com).
 * Scoped: html body.hp-active — sandbox unaffected.
 * Contained dashboard body (2026-07-20); hero band is full-bleed in the main column
 * (charcoal / --hp-charcoal) — not a nested transparent card.
 */
html body.hp-active {
  --lux-void: var(--surface-app, #0B0C0F);
  --lux-deep: var(--surface-panel, #111318);
  --lux-surface: var(--surface-card, #171A20);
  --lux-cream: var(--text-primary, #f5f3ee);
  --lux-cream-soft: color-mix(in srgb, var(--text-primary, #f5f3ee) 72%, transparent);
  /* --c-accent must come FIRST here — it's kept in sync per-theme by applyTheme();
     --accent-gold is a static :root constant (#D6B06B) never reassigned by any theme
     code, so if it's checked first it always wins and every theme's hero accents
     (icon strokes, hover states, borders, name glow) render gold regardless of the
     active theme. --accent-gold only exists as a last-resort fallback now. */
  --lux-gold: var(--c-accent, var(--accent-gold, #d6b06b));
  --lux-gold-dim: color-mix(in srgb, var(--c-accent, var(--accent-gold, #d6b06b)) 28%, transparent);
  --lux-gold-line: color-mix(in srgb, var(--c-accent, var(--accent-gold, #d6b06b)) 16%, transparent);
  --lux-muted: var(--text-secondary, rgba(184, 189, 199, 0.72));
  --lux-muted2: var(--text-muted, rgba(133, 139, 150, 0.72));
  --lux-ink: var(--text-primary, #f5f3ee);
  --lux-ink2: var(--text-secondary, #b8bdc7);
  --lux-gap-section: var(--space-8, clamp(2rem, 4.5vw, 3.25rem));
  --lux-gap-card: var(--space-6, clamp(1.35rem, 3vw, 2.25rem));
  background: var(--lux-void) !important;
  color: var(--lux-ink);
  overflow-x: clip;
  max-width: 100%;
}

/* ── Full-width shell: top nav + hero banner edge-to-edge ── */
html body.hp-active main#main-content.nav-model-b-layout {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

html body.hp-active #home-content,
html body.hp-active #role-home-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

html body.hp-active #main-content.nav-model-b-layout {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body.hp-active #main-content.nav-model-b-layout > .hp-topnav {
  max-width: none !important;
  width: 100% !important;
  padding-left: var(--hp-gutter) !important;
  padding-right: var(--hp-gutter) !important;
}

html body.hp-active #main-content.nav-model-b-layout > .hp-topnav {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

html body.hp-active #main-content.nav-model-b-layout > #ekm-active-alerts {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.hp-active #main-content.nav-model-b-layout:has(.hp-nav-rail) > .hp-nav-rail {
  grid-column: 1 !important;
  grid-row: 3 / -1 !important;
}

html body.hp-active #main-content.nav-model-b-layout:has(.hp-nav-rail) > .nav-model-b-main,
html body.hp-active #main-content.nav-model-b-layout:has(.hp-nav-rail):not(:has(> .nav-model-b-main)) > :not(.hp-topnav):not(.hp-nav-rail):not(#ekm-active-alerts) {
  grid-column: 2 !important;
  grid-row: 3 !important;
  min-width: 0 !important;
}

/*
  Mobile ≤640 — CRITICAL (.1533): desktop grid-column:2 above creates an IMPLICIT
  second track when the template collapses to one explicit column. Topnav uses
  grid-column:1/-1 which only spans EXPLICIT tracks → first track shrinks to 0px
  → topnav paints ~32px wide → center-tab icons overflow ON TOP of the EKM lockup.
  Force one explicit column and place main/topnav in that same track.
*/
@media (max-width: 640px) {
  html body.hp-active #main-content.nav-model-b-layout:has(.hp-nav-rail) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.hp-active #main-content.nav-model-b-layout:has(.hp-nav-rail) > .hp-nav-rail {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    grid-column: 1 !important;
  }
  html body.hp-active #main-content.nav-model-b-layout:has(.hp-nav-rail) > .nav-model-b-main,
  html body.hp-active #main-content.nav-model-b-layout:has(.hp-nav-rail):not(:has(> .nav-model-b-main)) > :not(.hp-topnav):not(.hp-nav-rail):not(#ekm-active-alerts) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body.hp-active #main-content.nav-model-b-layout > .hp-topnav {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

html body.hp-active #ekm-active-alerts .ekm-active-alert {
  width: 100% !important;
  border-bottom: 0.5px solid var(--lux-gold-line) !important;
}

html body.hp-active #ekm-active-alerts .ekm-active-alert-inner {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.65rem var(--hp-gutter) !important;
}

/* ── Page shell: breathing room, no container boxes ── */
html body.hp-active .hp-wrap {
  background: transparent !important;
  padding: 0 0 clamp(2.5rem, 5vw, 4rem) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
  min-width: 0 !important;
}

html body.hp-active .hp-inner {
  padding: var(--lux-gap-section) var(--hp-gutter) clamp(1.5rem, 3vw, 2.5rem) !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow-x: clip !important;
}

/* Model B: outer horizontal gutter lives on .nav-model-b-main only — do not
   re-apply --hp-gutter on .hp-inner (duplicate inset / floating-card look). */
html body.hp-active #main-content.nav-model-b-layout .nav-model-b-main .hp-inner,
html body.hp-active #main-content.nav-model-b-layout #role-home-content .hp-inner,
html body.hp-active #main-content.nav-model-b-layout #home-content .hp-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

html body.hp-active .hp-row2,
html body.hp-active .hp-row3,
html body.hp-active .hp-row3b {
  gap: var(--lux-gap-card) !important;
  align-items: start;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.hp-active .home-dash-modules.os-section {
  margin-bottom: var(--lux-gap-section) !important;
}

html body.hp-active .hp-action-zone {
  margin-top: 0;
  margin-bottom: var(--lux-gap-section);
}

/* ── Hero panel: luxury gradient/decoration; hero-only is full-bleed (see polish block) ── */
html body.hp-active .hp-awareness-row:not(.hp-awareness-row--hero-only),
html[data-theme="knicks"] body.hp-active .hp-awareness-row:not(.hp-awareness-row--hero-only),
html[data-theme="knicks_linen"] body.hp-active .hp-awareness-row:not(.hp-awareness-row--hero-only),
html:is([data-theme="modern_ekm"],[data-theme="graphite_champagne"],[data-theme="dark_glow"]) body.hp-active .hp-awareness-row:not(.hp-awareness-row--hero-only),
html[data-theme="nyc_premium"] body.hp-active .hp-awareness-row:not(.hp-awareness-row--hero-only),
html[data-portal-banner-preset="custom"] body.hp-active .hp-awareness-row:not(.hp-awareness-row--hero-only),
html[data-portal-banner-preset="skyline"] body.hp-active .hp-awareness-row:not(.hp-awareness-row--hero-only) {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.2fr) minmax(0, 0.9fr) !important;
  align-items: start !important;
  gap: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(1.15rem, 2.6vw, 2rem) clamp(1.25rem, 2.8vw, 2.25rem) clamp(1rem, 2vw, 1.6rem) !important;
  overflow: hidden !important;
  background:
    var(
      --theme-ambient-gradient,
      linear-gradient(
        168deg,
        var(--surface-app, #0B0C0F) 0%,
        var(--surface-panel, #111318) 28%,
        var(--surface-card, #171A20) 52%,
        var(--surface-panel, #111318) 78%,
        var(--surface-app, #0B0C0F) 100%
      )
    ) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  position: relative !important;
}

html body.hp-active .hp-awareness-row > .hp-inbox-summary,
html body.hp-active .hp-awareness-row > .hp-hero-zone,
html body.hp-active .hp-awareness-row > .hp-updates-summary {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  align-self: start !important;
}

html body.hp-active .hp-inbox-summary,
html body.hp-active .hp-updates-summary {
  display: flex !important;
  flex-direction: column !important;
}

html body.hp-active .hp-awareness-row .hp-flank-head,
html body.hp-active .hp-awareness-row #home-inbox-list,
html body.hp-active .hp-awareness-row #home-updates-list {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.hp-active .hp-awareness-row::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  /* Soft radial from theme surface tokens (synced in applyTheme) — not accent-gold wash */
  background:
    var(--theme-ambient-overlay, transparent),
    radial-gradient(ellipse 72% 58% at 50% 42%, var(--hp-hero-center, color-mix(in srgb, var(--surface-app, var(--c-bg)) 86%, #FFFFFF)), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 55%, transparent 40%, var(--hp-hero-edge, color-mix(in srgb, var(--surface-app, var(--c-bg)) 80%, #000000)) 100%) !important;
}

html body.hp-active .hp-awareness-row::after,
html[data-portal-banner-preset="custom"] body.hp-active .hp-awareness-row::after,
html[data-portal-banner-preset="skyline"] body.hp-active .hp-awareness-row::after,
html[data-theme="knicks"] body.hp-active .hp-awareness-row::after,
html[data-theme="nyc_premium"] body.hp-active .hp-awareness-row::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  background: var(
    --c-banner-vignette,
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 42%, var(--hp-hero-edge, color-mix(in srgb, var(--surface-app, var(--c-bg)) 70%, #000000)) 100%)
  ) !important;
}

/* Contained hero: no page-edge hairline divider */
html body.hp-active .hp-awareness-row {
  border-bottom: none !important;
}

/* Hero center — compact vertical footprint */
html body.hp-active .hp-awareness-row .hp-hero-zone {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
}

html body.hp-active .hp-awareness-row .hp-hero {
  min-height: 0 !important;
  padding: clamp(0.35rem, 1vw, 0.65rem) clamp(1rem, 2.5vw, 2rem) clamp(0.5rem, 1.2vw, 0.85rem) !important;
  background: transparent !important;
}

html body.hp-active .hp-awareness-row .hp-hero::before,
html body.hp-active .hp-awareness-row .hp-hero::after {
  display: none !important;
}

html body.hp-active .hp-awareness-row .hp-hero-greeting {
  font-family: "Italiana", Georgia, serif !important;
  font-size: clamp(14px, 1.7vw, 17px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.42em !important;
  text-transform: uppercase !important;
  /* Good morning/evening — theme accent tokens only (no hardcoded gold) */
  color: var(--home-accent, var(--c-hero-accent, var(--c-banner-accent, var(--c-accent, var(--lux-gold))))) !important;
  opacity: 1 !important;
  margin: 0 0 clamp(8px, 1.3vw, 12px) !important;
  text-shadow: var(--c-banner-greeting-shadow, 0 1px 10px rgba(0, 0, 0, 0.28)) !important;
  line-height: 1.2 !important;
}

/* Name size SSOT — HOME-REDESIGN-V2: desktop minimum 110px (Erin acceptance) */
html body.hp-active .hp-awareness-row .hp-hero-name,
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-name {
  font-family: "Italiana", Georgia, serif !important;
  font-size: clamp(2.5rem, min(16cqi, 8.5vw), 168px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  line-height: 0.92 !important;
  text-transform: uppercase !important;
  color: var(--c-hero-name, var(--lux-cream)) !important;
  text-shadow:
    0 0 32px color-mix(in srgb, var(--c-accent, var(--accent-gold, #d6b06b)) 16%, transparent),
    0 2px 28px rgba(0, 0, 0, 0.2) !important;
  margin: 0 0 clamp(0.45rem, 1vw, 0.75rem) !important;
  overflow: visible !important;
  max-width: 100% !important;
}

html body.hp-active .hp-awareness-row .hp-hero-name--long {
  font-size: clamp(2.25rem, min(14cqi, 7.4vw), 150px) !important;
}

html body.hp-active .hp-awareness-row .hp-hero-name--xlong {
  font-size: clamp(2rem, min(11.5cqi, 6.3vw), 132px) !important;
}

html body.hp-active .hp-awareness-row .hp-hero-name--xxlong {
  font-size: clamp(1.75rem, min(9.8cqi, 5.5vw), 128px) !important;
}

html body.hp-active .hp-awareness-row .hp-hero-name .hp-hero-first {
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 100% !important;
}

html body.hp-active .hp-awareness-row .hp-hero-name--xxlong .hp-hero-first {
  white-space: normal !important;
}

html body.hp-active .hp-awareness-row .hp-hero-date {
  font-family: "Italiana", Georgia, serif !important;
  font-size: clamp(19px, 2.2vw, 26px) !important;
  color: var(--c-hero-date-fg, var(--lux-cream)) !important;
  letter-spacing: 0.05em !important;
  text-shadow: var(--c-banner-greeting-shadow, none) !important;
}

/* Clear separation: name → date → clock (arc frames name only) */
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-date-row {
  margin-top: clamp(6px, 1vw, 10px) !important;
  padding-top: clamp(4px, 0.8vw, 8px) !important;
}

html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-clock {
  margin-top: clamp(10px, 1.4vw, 14px) !important;
}

html body.hp-active .hp-awareness-row .hp-hero-date-line {
  background: linear-gradient(90deg, transparent, var(--lux-gold-dim)) !important;
}

html body.hp-active .hp-awareness-row .hp-hero-date-line.r {
  background: linear-gradient(90deg, var(--lux-gold-dim), transparent) !important;
}

/* Plain floating text — no box/border/fill, matching hp-hero-date treatment (build 2026-07-12.1514) */
html body.hp-active .hp-awareness-row .hp-hero-clock {
  margin-top: clamp(7px, 1.1vw, 10px) !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--c-banner-clock-fg, var(--c-hero-date-fg, var(--lux-cream))) !important;
  font-size: clamp(10.5px, 1.2vw, 12px) !important;
  letter-spacing: 0.1em !important;
  font-family: Inter, -apple-system, sans-serif !important;
  box-shadow: none !important;
}

/* Inbox + Updates — borderless flanks, flow with hero */
html body.hp-active .hp-awareness-row .hp-flank-panel,
html[data-theme="knicks"] body.hp-active .hp-awareness-row .hp-flank-panel,
html[data-theme="knicks_linen"] body.hp-active .hp-awareness-row .hp-flank-panel,
html[data-portal-hero-contrast="1"] body.hp-active .hp-awareness-row .hp-flank-panel {
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: 0 !important;
  padding: clamp(0.35rem, 0.9vw, 0.65rem) clamp(1.25rem, 2.8vw, 2.25rem) clamp(0.5rem, 1.2vw, 0.85rem) !important;
  position: relative !important;
  z-index: 1 !important;
}

html body.hp-active .hp-inbox-summary {
  border-right: 0.5px solid var(--lux-gold-line) !important;
  padding-left: clamp(0.85rem, 2vw, 1.35rem) !important;
  padding-right: clamp(0.75rem, 1.8vw, 1.15rem) !important;
}

html body.hp-active .hp-updates-summary {
  border-left: 0.5px solid var(--lux-gold-line) !important;
  padding-right: clamp(0.85rem, 2vw, 1.35rem) !important;
  padding-left: clamp(0.75rem, 1.8vw, 1.15rem) !important;
}

html[data-theme="knicks"] body.hp-active .hp-inbox-summary,
html[data-theme="knicks"] body.hp-active .hp-updates-summary,
html[data-theme="knicks_linen"] body.hp-active .hp-inbox-summary,
html[data-theme="knicks_linen"] body.hp-active .hp-updates-summary {
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
}

html body.hp-active .hp-awareness-row .hp-flank-label {
  color: var(--c-banner-accent, var(--c-hero-accent, var(--lux-gold))) !important;
  letter-spacing: 0.3em !important;
  font-size: 9px !important;
}

html body.hp-active .hp-awareness-row .hp-flank-label svg {
  stroke: var(--lux-gold) !important;
  opacity: 0.9 !important;
}

html body.hp-active .hp-awareness-row .hp-flank-link {
  color: var(--c-banner-ink2, var(--c-hero-date-fg, var(--lux-cream-soft))) !important;
  opacity: 0.92 !important;
}

html body.hp-active .hp-awareness-row .hp-flank-link:hover {
  opacity: 1 !important;
  color: var(--lux-gold) !important;
}

html body.hp-active .hp-awareness-row .hp-flank-title,
html body.hp-active .hp-awareness-row .hp-inbox-summary .hp-flank-title {
  color: var(--c-banner-ink, var(--c-hero-name, var(--lux-cream))) !important;
  font-family: Inter, -apple-system, sans-serif !important;
  text-transform: none !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
}

/* UPDATES flank — body ink on dark hero; banner/hero tokens are for greeting/name only (build .1430) */
html body.hp-active .hp-awareness-row .hp-updates-summary .hp-flank-title,
html body.hp-active .hp-awareness-row #home-updates-list .hp-flank-title {
  color: var(--c-ink2, var(--text-primary, var(--lux-cream))) !important;
  font-family: Inter, -apple-system, sans-serif !important;
  text-transform: none !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
}

html body.hp-active .hp-awareness-row .hp-flank-meta,
html body.hp-active .hp-awareness-row .hp-flank-empty,
html body.hp-active .hp-awareness-row .hp-inbox-summary .hp-flank-meta {
  color: var(--c-banner-muted, var(--lux-muted)) !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
}

html body.hp-active .hp-awareness-row .hp-updates-summary .hp-flank-meta,
html body.hp-active .hp-awareness-row #home-updates-list .hp-flank-meta {
  color: var(--c-muted2, var(--text-secondary, var(--lux-muted2))) !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
}

html body.hp-active .hp-awareness-row .hp-updates-summary .hp-flank-item,
html body.hp-active .hp-awareness-row .hp-inbox-summary .hp-flank-item {
  gap: 3px !important;
  padding: 0.1rem 0 !important;
}

html body.hp-active .hp-awareness-row .hp-updates-summary .hp-flank-head,
html body.hp-active .hp-awareness-row .hp-inbox-summary .hp-flank-head {
  margin-bottom: 0.25rem !important;
}

html body.hp-active .hp-awareness-row .hp-flank-empty {
  font-size: 8px !important;
  line-height: 1.35 !important;
  padding: 0.15rem 0 !important;
}

html body.hp-active .hp-awareness-row .hp-flank-dot {
  background: var(--lux-gold) !important;
  opacity: 0.85 !important;
}

html body.hp-active .hp-awareness-row .hp-flank-avatar {
  color: var(--lux-cream) !important;
  background: rgba(201, 169, 98, 0.12) !important;
  border-color: var(--lux-gold-dim) !important;
}

/* ── Dashboard cards: open surfaces below the shell; contained cards inside .hp-dash-surface ── */
html body.hp-active .hp-wrap .hp-softbox,
html body.hp-active .hp-wrap .hp-card,
html body.hp-active .hp-wrap .hp-attention,
html body.hp-active .hp-wrap .hp-wf-preview-card,
html body.hp-active .hp-wrap .home-dash-modules .os-kpi,
html body.hp-active .hp-wrap #home-announcements-zone .hp-softbox,
html body.hp-active .hp-wrap #home-announcements-zone .hp-card,
html body.hp-active .hp-wrap #home-action-box,
html body.hp-active .hp-wrap .hp-compact-billing,
html[data-dark] body.hp-active .hp-wrap .hp-softbox,
html[data-dark] body.hp-active .hp-wrap .hp-card,
html[data-dark] body.hp-active .hp-wrap .home-dash-modules .os-kpi,
html[data-dark] body.hp-active .hp-wrap .hp-attention,
html[data-dark] body.hp-active .hp-wrap .hp-wf-preview-card,
html[data-theme="knicks"] body.hp-active .hp-wrap .hp-softbox,
html[data-theme="knicks"] body.hp-active .hp-wrap .hp-card,
html[data-theme="knicks"] body.hp-active .hp-wrap .home-dash-modules .os-kpi,
html[data-theme="knicks"] body.hp-active .hp-wrap .hp-attention,
html:is([data-theme="modern_ekm"],[data-theme="graphite_champagne"],[data-theme="dark_glow"]) body.hp-active .hp-wrap .hp-softbox,
html:is([data-theme="modern_ekm"],[data-theme="graphite_champagne"],[data-theme="dark_glow"]) body.hp-active .hp-wrap .hp-card,
html[data-theme="nyc_premium"] body.hp-active .hp-wrap .hp-softbox,
html[data-theme="nyc_premium"] body.hp-active .hp-wrap .hp-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--lux-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* KPI + triad cards keep radius/padding inside the contained surface */
html body.hp-active .hp-dash-surface .hp-softbox,
html body.hp-active .hp-dash-surface .hp-summary-card,
html body.hp-active .hp-dash-surface .hp-dash-card,
html body.hp-active .hp-dash-surface #home-announcements-zone .hp-softbox,
html body.hp-active .hp-dash-surface #home-announcements-zone .hp-card,
html[data-dark] body.hp-active .hp-dash-surface .hp-softbox,
html[data-dark] body.hp-active .hp-dash-surface .hp-summary-card,
html[data-dark] body.hp-active .hp-dash-surface .hp-dash-card {
  background: var(--lux-surface) !important;
  border: 0.5px solid var(--lux-gold-line) !important;
  border-radius: var(--radius-card, 12px) !important;
  box-shadow: none !important;
  padding-left: clamp(0.85rem, 1.8vw, 1.15rem) !important;
  padding-right: clamp(0.85rem, 1.8vw, 1.15rem) !important;
  padding-top: clamp(0.85rem, 1.6vw, 1.1rem) !important;
  padding-bottom: clamp(0.85rem, 1.6vw, 1.1rem) !important;
  border-bottom: 0.5px solid var(--lux-gold-line) !important;
}

html body.hp-active .hp-wrap .hp-softbox:hover {
  box-shadow: none !important;
}

/* Soft section dividers instead of card borders (secondary content) */
html body.hp-active .hp-wrap .hp-softbox,
html body.hp-active .hp-wrap .hp-attention,
html body.hp-active .hp-wrap .hp-wf-preview-card {
  border-bottom: 0.5px solid var(--lux-gold-line) !important;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem) !important;
  margin-bottom: 0 !important;
}

/* Contained surface cards keep compact padding (wins over divider rule above) */
html body.hp-active .hp-dash-surface .hp-softbox,
html body.hp-active .hp-dash-surface .hp-summary-card,
html body.hp-active .hp-dash-surface .hp-dash-card,
html body.hp-active .hp-dash-surface #home-announcements-zone .hp-softbox,
html body.hp-active .hp-dash-surface #home-announcements-zone .hp-card {
  border-bottom: 0.5px solid var(--lux-gold-line) !important;
  padding-bottom: clamp(0.85rem, 1.6vw, 1.1rem) !important;
}

html body.hp-active .hp-wrap .hp-row2 > .hp-softbox:last-child,
html body.hp-active .hp-wrap .hp-row3 > .hp-softbox:last-child,
html body.hp-active .hp-wrap .hp-row3b > .hp-softbox:last-child {
  border-bottom: none !important;
}

html body.hp-active .hp-wrap .home-dash-modules .os-kpi,
html[data-dark] body.hp-active .hp-wrap .home-dash-modules .os-kpi {
  background: var(--lux-surface) !important;
  border: 0.5px solid var(--lux-gold-line) !important;
  border-radius: var(--radius-card, 12px) !important;
  box-shadow: var(--elevation-1, 0 2px 8px rgba(0, 0, 0, 0.06)) !important;
  padding: var(--space-5, clamp(1rem, 2vw, 1.35rem)) !important;
}

html body.hp-active .hp-wrap .home-dash-modules .os-kpi-strip {
  background: transparent !important;
  border: none !important;
  gap: clamp(0.75rem, 1.8vw, 1.15rem) !important;
}

html body.hp-active .hp-wrap .hp-seclabel,
html body.hp-active .hp-wrap .os-section-head {
  color: var(--c-banner-accent, var(--c-hero-accent, var(--lux-gold))) !important;
  letter-spacing: 0.28em !important;
  font-size: calc(var(--type-eyebrow, 0.6875rem) * 1.04) !important;
  margin-bottom: clamp(0.85rem, 1.8vw, 1.25rem) !important;
  text-shadow: var(--c-banner-greeting-shadow, none) !important;
}

html body.hp-active .hp-wrap .hp-secline {
  background: var(--lux-gold-dim) !important;
}

html body.hp-active .hp-wrap .hp-att-row-label,
html body.hp-active .hp-wrap .hp-att-row-sub,
html body.hp-active .hp-wrap .hp-wf-preview-row-title,
html body.hp-active .hp-wrap .hp-announce-title {
  color: var(--lux-cream) !important;
}

html body.hp-active .hp-wrap .hp-att-row-sub,
html body.hp-active .hp-wrap .hp-wf-preview-empty,
html body.hp-active .hp-wrap .hp-wf-preview-meta,
html body.hp-active .hp-wrap .hp-announce-body,
html body.hp-active .hp-wrap .hp-announce-date {
  color: var(--lux-muted) !important;
}

/* HOME-01: tighter attention metrics strip */
html body.hp-active .hp-wrap .hp-attention .hp-wf-pills {
  gap: 6px !important;
  margin: 0.4rem 0 0.35rem !important;
}
html body.hp-active .hp-wrap .hp-attention .hp-wf-pill {
  background: rgba(201, 169, 98, 0.08) !important;
  border-color: var(--lux-gold-line) !important;
  color: var(--lux-cream-soft) !important;
  font-size: 10.5px !important;
  padding: 4px 10px !important;
}

html body.hp-active .hp-wrap .hp-attention .hp-wf-pill strong {
  color: var(--lux-cream) !important;
  font-size: 16px !important;
}

html body.hp-active .hp-wrap .hp-attention .hp-wf-pill.urgent {
  border-color: color-mix(in srgb, var(--c-danger, #C0492F) 45%, transparent) !important;
  background: color-mix(in srgb, var(--c-danger, #C0492F) 10%, transparent) !important;
  color: var(--c-danger, #e8917f) !important;
}

html body.hp-active .hp-wrap .hp-att-ack {
  color: var(--lux-muted) !important;
  border-color: var(--lux-gold-line) !important;
  background: transparent !important;
}

html body.hp-active .hp-wrap .hp-att-ack:hover {
  color: var(--lux-gold) !important;
  border-color: var(--lux-gold-dim) !important;
}

html body.hp-active .hp-wrap a[style*="color:var(--c-accent)"],
html body.hp-active .hp-wrap button[style*="color:var(--c-accent)"],
html body.hp-active .hp-wrap .hp-att-footer button,
html body.hp-active .hp-wrap #home-wf-preview-zone button {
  color: var(--lux-gold) !important;
}

html body.hp-active .hp-wrap .home-dash-modules .os-kpi-val {
  color: var(--lux-cream) !important;
}

html body.hp-active .hp-wrap .home-dash-modules .os-kpi-lbl {
  color: var(--c-banner-accent, var(--c-hero-accent, var(--lux-gold))) !important;
  font-size: calc(var(--type-eyebrow, 0.6875rem) * 1.04) !important;
  letter-spacing: var(--type-eyebrow-tracking, 0.12em) !important;
}

html body.hp-active .hp-wrap .home-dash-modules .os-kpi-sub {
  color: var(--lux-muted) !important;
  font-size: calc(var(--type-caption, 0.75rem) * 1.06) !important;
}

html body.hp-active .hp-wrap .hp-att-row {
  border-bottom-color: var(--lux-gold-line) !important;
}

html body.hp-active .hp-wrap .hp-empty-state-body,
html body.hp-active .hp-wrap .hp-empty-state-body a {
  color: var(--lux-muted) !important;
}

html body.hp-active .hp-wrap .hp-empty-state-body a {
  color: var(--lux-gold) !important;
}

html body.hp-active .hp-wrap .hp-chead {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.1rem) !important;
}

html body.hp-active .hp-attention {
  padding: 0 0 clamp(1.25rem, 2.5vw, 1.75rem) !important;
  margin-bottom: 0 !important;
}

/* Contained dashboard shell — one surface: hero → KPIs → WYWA/QA/Announcements
   Width: fill Model B main (BUG-HOME-03). No 1120 / 1680 centered caps.
   Outer gutters: .nav-model-b-main only. */
html body.hp-active .hp-dash-surface {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html body.hp-active .hp-dash-surface .hp-awareness-row {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 12px !important;
  border-bottom: none !important;
}
html body.hp-active .hp-dash-surface .hp-awareness-row.hp-awareness-row--hero-only {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-bottom: none !important;
}

html body.hp-active .hp-dash-surface .hp-primary-triad {
  align-items: start !important;
}

/* Hero-only — compact executive height (~220–300px desktop); never fill Model B 1fr row */
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only {
  display: flex !important;
  grid-template-columns: none !important;
  min-height: 0 !important;
  height: auto !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 0 !important;
}

html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only > .hp-hero-zone,
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* HOME-01: arc visibility owned by polish block below — do not hide here */

/* Mobile: stack hero, keep flow */
@media (max-width: 768px) {
  /*
   CRITICAL (.1533): Desktop luxury rules place .nav-model-b-main at grid-column:2.
   On a 1-column mobile template that creates an IMPLICIT column 2; topnav's
   grid-column:1/-1 only spans EXPLICIT tracks → first track collapses to 0px and
   the topnav becomes ~32px wide (padding only). Icons then overflow onto the EKM
   lockup. Force a true single-column Model B shell on mobile (Safari + PWA).
  */
  html body.hp-active #main-content.nav-model-b-layout:has(.hp-nav-rail) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.hp-active #main-content.nav-model-b-layout:has(.hp-nav-rail) > .hp-nav-rail {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body.hp-active #main-content.nav-model-b-layout:has(.hp-nav-rail) > .nav-model-b-main,
  html body.hp-active #main-content.nav-model-b-layout:has(.hp-nav-rail):not(:has(> .nav-model-b-main)) > :not(.hp-topnav):not(.hp-nav-rail):not(#ekm-active-alerts) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body.hp-active #main-content.nav-model-b-layout > .hp-topnav {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  html body.hp-active .hp-awareness-row {
    grid-template-columns: 1fr !important;
    grid-template-areas: "hero" "inbox" "updates" !important;
    min-height: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(1rem, 2.8vw, 1.5rem) clamp(1rem, 3vw, 1.5rem) clamp(0.9rem, 2.2vw, 1.25rem) !important;
  }

  html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  html body.hp-active .hp-inner {
    padding-top: clamp(0.65rem, 2.5vw, 1rem) !important;
  }

  html body.hp-active .hp-hero-zone {
    grid-area: hero !important;
    order: 1 !important;
    border-bottom: 0.5px solid var(--lux-gold-line) !important;
  }

  html body.hp-active .hp-inbox-summary {
    grid-area: inbox !important;
    order: 2 !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 0.5px solid var(--lux-gold-line) !important;
  }

  html body.hp-active .hp-updates-summary {
    grid-area: updates !important;
    order: 3 !important;
    border-left: none !important;
    border-top: none !important;
  }

  html body.hp-active .hp-awareness-row .hp-hero-name {
    font-size: clamp(36px, min(14cqi, 9vw), 64px) !important;
    overflow: visible !important;
  }

  html body.hp-active .hp-awareness-row .hp-hero-name--long {
    font-size: clamp(32px, min(12cqi, 8vw), 56px) !important;
  }

  html body.hp-active .hp-awareness-row .hp-hero-name--xlong {
    font-size: clamp(28px, min(10cqi, 7vw), 48px) !important;
  }

  html body.hp-active .hp-awareness-row .hp-hero-name--xxlong {
    font-size: clamp(24px, min(9cqi, 6vw), 42px) !important;
  }

  html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero,
  html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only > .hp-hero-zone {
    min-height: clamp(11.5rem, 38vw, 15rem) !important;
    max-height: 16.5rem !important;
  }

  html body.hp-active .hp-awareness-row .hp-flank-panel {
    padding: clamp(0.65rem, 1.8vw, 1rem) clamp(1.25rem, 4vw, 1.75rem) clamp(0.75rem, 2vw, 1.1rem) !important;
  }

  html body.hp-active .hp-awareness-row .hp-hero {
    padding: clamp(0.5rem, 1.5vw, 0.85rem) clamp(1rem, 3vw, 1.5rem) !important;
  }

  html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero {
    padding: clamp(0.9rem, 3.5vw, 1.25rem) clamp(0.85rem, 3vw, 1.25rem) clamp(0.75rem, 2.5vw, 1rem) !important;
    height: auto !important;
  }
}

/* =============================================================================
   HOME-01 polish (2026-07-20) — spacing/typography only; layout direction preserved.
   Hierarchy weight: Name → Clock → Date → Greeting. Quiet atmospheric curve.
   ============================================================================= */

html body.hp-active {
  --lux-gap-section: clamp(1.05rem, 2vw, 1.55rem);
  --lux-gap-card: clamp(0.7rem, 1.35vw, 1.05rem);
  --lux-divider: color-mix(in srgb, var(--c-accent, var(--accent-gold, #d6b06b)) 14%, transparent);
  --lux-emerald-hairline: color-mix(in srgb, #3d9b7a 8%, transparent);
  --lux-home-gap-after-rail: clamp(0.65rem, 1.2vw, 1rem);
}

html body.hp-active #main-content.nav-model-b-layout:has(.hp-nav-rail) > .nav-model-b-main {
  padding-top: 0.28rem !important;
}
html body.hp-active .hp-inner,
html body.hp-active #main-content.nav-model-b-layout .nav-model-b-main .hp-inner,
html body.hp-active #main-content.nav-model-b-layout #role-home-content .hp-inner,
html body.hp-active #main-content.nav-model-b-layout #home-content .hp-inner {
  padding-top: var(--lux-home-gap-after-rail) !important;
  padding-bottom: clamp(1.05rem, 2.1vw, 1.65rem) !important;
}
html body.hp-active .hp-wrap {
  padding-top: 0 !important;
  padding-bottom: clamp(1.45rem, 2.9vw, 2.25rem) !important;
}

html body.hp-active .hp-dash-surface,
html[data-dark] body.hp-active .hp-dash-surface {
  /* Transparent so body --c-bg / --surface-app shows through — same surface as hero */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: clamp(0.55rem, 1.1vw, 0.9rem) !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}
html body.hp-active .hp-wrap,
html body.hp-active .hp-inner,
html body.hp-active #role-home-content,
html body.hp-active #home-content {
  background: transparent !important;
}

/* Quiet atmospheric curve — behind name, never competing */
html body.hp-active .hp-hero--mock-arc,
html body.hp-active .hp-awareness-row .hp-hero.hp-hero--mock-arc {
  position: relative !important;
}
html body.hp-active .hp-hero-arc,
html body.hp-active .hp-awareness-row .hp-hero-arc,
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-arc {
  /* 2026-07-21: removed per Erin's feedback — at the larger hero name size this
     decorative curve visibly crossed through the name text instead of sitting
     quietly beneath it. The approved bigger-hero design has no arc/line. */
  display: none !important;
  position: absolute !important;
  left: 6% !important;
  right: 6% !important;
  top: 38% !important;
  bottom: auto !important;
  width: auto !important;
  height: clamp(52px, 7vw, 78px) !important;
  margin: 0 !important;
  opacity: 0.32 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: visible !important;
  inset: unset !important;
}
html body.hp-active .hp-hero-arc-path,
html body.hp-active .hp-awareness-row .hp-hero-arc-path {
  display: block !important;
  fill: none !important;
  stroke: url(#hpHeroArcGrad) !important;
  stroke-width: 0.85 !important;
  vector-effect: non-scaling-stroke !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html body.hp-active .hp-hero-arc-dot,
html body.hp-active .hp-awareness-row .hp-hero-arc-dot {
  display: none !important;
}
html body.hp-active .hp-hero-content {
  position: relative !important;
  z-index: 1 !important;
}

/* Full-bleed hero band — TRANSPARENT by design (build 2026-07-30).
   Theme-agnostic: no --hp-charcoal solid fill, no per-theme hex, no banner-preset
   reset required. body.hp-active paints --c-bg once; this row lets it show through
   continuously for every Color Theme, forever — eliminates the separate hero plane
   instead of chasing a color match. This selector's specificity (3 classes) beats
   every per-theme [data-theme="…"] .hp-awareness-row rule AND the
   [data-portal-banner-preset="custom"/"skyline"] .hp-awareness-row rules (2 classes
   or attr+class) below — so Home banner presets can no longer repaint the hero
   band either; transparent always wins, on purpose. */
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only,
html body.hp-active .hp-dash-surface .hp-awareness-row.hp-awareness-row--hero-only {
  border-radius: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  overflow: hidden !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/*
  Full-bleed: Model B main gutters + overflow-x:clip on .hp-wrap/.hp-inner clip negative
  margins, so gutters are removed on Home and re-applied only below the hero band.
*/
html body.hp-active #main-content.nav-model-b-layout:has(#role-home-content) > .nav-model-b-main,
html body.hp-active #main-content.nav-model-b-layout:has(#home-content) > .nav-model-b-main {
  --hp-hero-bleed: clamp(0.75rem, 3vw, 1rem);
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body.hp-active #role-home-content,
html body.hp-active #home-content,
html body.hp-active .hp-wrap,
html body.hp-active .hp-inner,
html body.hp-active .hp-dash-surface {
  overflow-x: visible !important;
}
html body.hp-active .hp-hero-updates-band {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
html body.hp-active .hp-dash-surface > :not(.hp-hero-updates-band):not(.hp-inbox-demoted),
html body.hp-active .hp-home-secondary,
html body.hp-active .hp-home-body,
html body.hp-active .hp-inner > #personal-msg-banner:not(:empty) {
  padding-left: var(--hp-hero-bleed, clamp(0.75rem, 3vw, 1rem)) !important;
  padding-right: var(--hp-hero-bleed, clamp(0.75rem, 3vw, 1rem)) !important;
  box-sizing: border-box !important;
}
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only > .hp-hero-zone,
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero,
html body.hp-active .hp-dash-surface .hp-awareness-row.hp-awareness-row--hero-only .hp-hero {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  padding: clamp(1.35rem, 2.55vw, 2.15rem) clamp(1rem, 2.5vw, 1.75rem) clamp(0.85rem, 1.7vw, 1.25rem) !important;
  border-radius: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  text-align: center !important;
}
/* No radial overlays on the default hero — a lighter/darker mix still invents a
   visible disc distinct from flat --c-bg. Transparent stays transparent (build 2026-07-30). */
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only::before,
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only::after {
  opacity: 0 !important;
  background: none !important;
}

/* Greeting — least weight (eyebrow above name) */
html body.hp-active .hp-awareness-row .hp-hero-greeting,
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-greeting {
  font-size: clamp(14px, 1.7vw, 17px) !important;
  letter-spacing: 0.36em !important;
  margin: 0 0 clamp(0.5rem, 1vw, 0.7rem) !important;
  font-weight: 500 !important;
  opacity: 0.78 !important;
  line-height: 1.15 !important;
  text-shadow: none !important;
}

/* Name — primary; do not reduce size; slight emphasis */
html body.hp-active .hp-awareness-row .hp-hero-name,
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-name {
  font-family: "Italiana", "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(2.5rem, min(16cqi, 8.5vw), 168px) !important;
  letter-spacing: 0.13em !important;
  line-height: 0.9 !important;
  margin: 0 0 clamp(0.28rem, 0.7vw, 0.5rem) !important;
  text-shadow:
    0 0 36px color-mix(in srgb, var(--c-accent, var(--accent-gold, #d6b06b)) 18%, transparent),
    0 2px 28px rgba(0, 0, 0, 0.2) !important;
}
html body.hp-active .hp-awareness-row .hp-hero-name--long,
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-name--long {
  font-size: clamp(2.25rem, min(14cqi, 7.4vw), 150px) !important;
}
html body.hp-active .hp-awareness-row .hp-hero-name--xlong,
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-name--xlong {
  font-size: clamp(2rem, min(11.5cqi, 6.3vw), 132px) !important;
}
html body.hp-active .hp-awareness-row .hp-hero-name--xxlong,
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-name--xxlong {
  font-size: clamp(1.75rem, min(9.8cqi, 5.5vw), 128px) !important;
}

/* Clock > Date */
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-clock,
html body.hp-active .hp-awareness-row .hp-hero-clock {
  margin: clamp(0.2rem, 0.55vw, 0.4rem) 0 0.08rem !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  letter-spacing: 0.07em !important;
  line-height: 1.15 !important;
  color: var(--c-hero-name, var(--lux-cream)) !important;
}
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-clock-time {
  font-size: inherit !important;
  font-weight: 400 !important;
}
html body.hp-active .hp-awareness-row .hp-hero-date,
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-date {
  font-size: clamp(19px, 2.2vw, 26px) !important;
  letter-spacing: 0.09em !important;
  opacity: 0.64 !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
}
html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-date-row {
  margin-top: 0.12rem !important;
  padding-top: 0 !important;
}

html body.hp-active .hp-hero-rule {
  display: none !important;
}

/* Full main-column width — no 1680 / 1120 content cap on Home */
html body.hp-active #main-content.nav-model-b-layout .nav-model-b-main :is(#role-home-content, #home-content) .hp-inner,
html body.hp-active #main-content.nav-model-b-layout :is(#role-home-content, #home-content) .hp-inner {
  max-width: none !important;
  width: 100% !important;
}

/* Softer residual chrome — reduce heavy outlines / nested fills */
html body.hp-active .hp-wrap .hp-softbox,
html body.hp-active .hp-wrap .hp-card,
html body.hp-active .hp-wrap .hp-dash-card {
  box-shadow: none !important;
  border-color: color-mix(in srgb, var(--lux-divider) 70%, transparent) !important;
}
html body.hp-active .hp-ops-support-action {
  border-color: color-mix(in srgb, var(--c-box-border, rgba(255,255,255,.1)) 55%, transparent) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body.hp-active .hp-v2-attention,
html body.hp-active .hp-v2-today,
html body.hp-active .hp-v2-ops {
  margin: 0 !important;
  padding: clamp(0.28rem, 0.85vw, 0.55rem) 0 !important;
}
html body.hp-active .hp-v2-today {
  padding-top: clamp(0.45rem, 1vw, 0.75rem) !important;
}
html body.hp-active .hp-v2-ops {
  padding-top: clamp(0.55rem, 1.2vw, 0.95rem) !important;
}
html body.hp-active .hp-v2-ops-grid,
html body.hp-active .hp-primary-triad.hp-v2-ops-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
  gap: clamp(0.85rem, 1.7vw, 1.25rem) !important;
  align-items: start !important;
}
html body.hp-active .hp-v2-ops-grid > .hp-v2-announce-slot,
html body.hp-active .hp-v2-ops-grid > #home-announcements-zone {
  grid-column: 1 / -1 !important;
}
html body.hp-active .hp-v2-ops-grid.hp-sec-panels-collapse {
  display: grid !important;
  flex-direction: unset !important;
}

/* Metrics strip — one unified editorial band */
html body.hp-active .hp-summary-row,
html body.hp-active .hp-dash-surface .hp-summary-row {
  gap: 0 !important;
  margin: 0 !important;
  padding: clamp(0.45rem, 1vw, 0.7rem) 0 !important;
  border-top: 0.5px solid var(--lux-divider) !important;
  border-bottom: 0.5px solid var(--lux-divider) !important;
  background: transparent !important;
}
html body.hp-active .hp-summary-card,
html body.hp-active .hp-dash-surface .hp-summary-card,
html body.hp-active .hp-dash-surface .hp-softbox.hp-summary-card,
html[data-dark] body.hp-active .hp-dash-surface .hp-summary-card,
html[data-dark] body.hp-active .hp-wrap .hp-summary-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: clamp(0.22rem, 0.55vw, 0.4rem) clamp(0.55rem, 1.15vw, 0.9rem) !important;
  border-right: 0.5px solid var(--lux-divider) !important;
  border-bottom: none !important;
  gap: 0.5rem !important;
  min-height: 0 !important;
  height: auto !important;
}
html body.hp-active .hp-summary-card:last-child {
  border-right: none !important;
}
html body.hp-active .hp-summary-card--approvals {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--c-warn, #c47a3a) 70%, transparent) !important;
}
html body.hp-active .hp-summary-card-value,
html body.hp-active .hp-dash-surface .hp-summary-card-value {
  font-size: clamp(1.52rem, 2.45vw, 1.98rem) !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
html body.hp-active .hp-summary-card-label,
html body.hp-active .hp-dash-surface .hp-summary-card-label {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  font-weight: 500 !important;
  opacity: 0.78 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  hyphens: manual !important;
}
html body.hp-active .hp-wrap .home-dash-modules .os-kpi-val {
  font-size: clamp(1.52rem, 2.45vw, 1.98rem) !important;
  letter-spacing: -0.01em !important;
}
html body.hp-active .hp-wrap .home-dash-modules .os-kpi-lbl {
  opacity: 0.78 !important;
  font-weight: 500 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  hyphens: manual !important;
}

/* Attention elevated only when it has rows; otherwise flat */
html body.hp-active .hp-v2-attention .hp-attention,
html body.hp-active .hp-wrap .hp-attention {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 0.5px solid var(--lux-divider) !important;
  padding: 0.45rem 0 0.75rem !important;
}
html body.hp-active .hp-attention .hp-wf-pill.urgent {
  background: color-mix(in srgb, rgba(192, 73, 47, 0.12) 100%, transparent) !important;
  border-left: 2px solid rgba(192, 73, 47, 0.55) !important;
  padding-left: 0.65rem !important;
  border-radius: 0 !important;
}

/* Secondary flat disclosures */
html body.hp-active .hp-dash-surface .hp-softbox,
html body.hp-active .hp-dash-surface .hp-dash-card,
html body.hp-active .hp-dash-surface .hp-sec-panel,
html[data-dark] body.hp-active .hp-dash-surface .hp-softbox,
html[data-dark] body.hp-active .hp-dash-surface .hp-sec-panel {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 0.5px solid var(--lux-divider) !important;
  padding: clamp(0.4rem, 0.9vw, 0.55rem) 0 !important;
  height: auto !important;
}
html body.hp-active .hp-home-secondary {
  margin-top: clamp(0.95rem, 1.8vw, 1.45rem) !important;
  border-top: 0.5px solid var(--lux-divider) !important;
  padding-top: clamp(0.7rem, 1.35vw, 1.05rem) !important;
}

html body.hp-active #ekm-active-alerts .ekm-active-alert-inner {
  padding: 0.32rem var(--hp-gutter, clamp(0.85rem, 3.5vw, 1.5rem)) !important;
  gap: 8px !important;
}
html body.hp-active #ekm-active-alerts .ekm-active-alert-btn {
  padding: 3px 10px !important;
  font-size: 10px !important;
  border-radius: 5px !important;
}
html body.hp-active #ekm-active-alerts .ekm-active-alert--urgent,
html body.hp-active #ekm-active-alerts .ekm-active-alert--dm {
  box-shadow: inset 3px 0 0 var(--lux-gold) !important;
}

@media (min-width: 1280px) and (max-width: 2560px) {
  html body.hp-active .hp-wrap,
  html body.hp-active .hp-dash-surface,
  html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only,
  html body.hp-active .hp-summary-row {
    overflow-x: visible !important;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  html body.hp-active .hp-v2-ops-grid,
  html body.hp-active .hp-primary-triad.hp-v2-ops-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 1100px) {
  html body.hp-active .hp-summary-card {
    border-right: none !important;
    border-bottom: 0.5px solid var(--lux-divider) !important;
  }
}
@media (max-width: 768px) {
  html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero,
  html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only > .hp-hero-zone {
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(0.85rem, 3vw, 1.25rem) clamp(0.75rem, 3vw, 1.15rem) !important;
  }
  html body.hp-active .hp-awareness-row .hp-hero-name,
  html body.hp-active .hp-awareness-row.hp-awareness-row--hero-only .hp-hero-name {
    font-size: clamp(64px, min(16cqi, 12vw), 96px) !important;
  }
  html body.hp-active .hp-hero-arc,
  html body.hp-active .hp-awareness-row .hp-hero-arc {
    opacity: 0.24 !important;
    height: clamp(40px, 10vw, 56px) !important;
  }
}