/*
 * Helium™ UI v1.8.9 — Spacing Architecture
 * Four-pixel foundation / two- and six-pixel optical correction.
 * Loaded AFTER typography.css on first-party app pages.
 * Existing squircle masks, palettes, shaders and motion are unchanged.
 */
:root {
  --he-space-0:0px;
  --he-space-0-5:2px;
  --he-space-1:4px;
  --he-space-1-5:6px;
  --he-space-2:8px;
  --he-space-3:12px;
  --he-space-4:16px;
  --he-space-5:20px;
  --he-space-6:24px;
  --he-space-7:28px;
  --he-space-8:32px;
  --he-space-10:40px;
  --he-space-12:48px;
  --he-space-14:56px;
  --he-space-16:64px;
  --he-space-20:80px;
  --he-space-24:96px;
  --he-space-30:120px;
  --he-space-40:160px;
  --he-space-50:200px;
  --he-space-60:240px;

  --he-gutter-app:clamp(36px,3.1vw,64px);
  --he-gutter-editorial:clamp(20px,3.4vw,88px);
  --he-gap-grid:var(--he-space-6);
  --he-gap-grid-tight:var(--he-space-4);
  --he-gap-section:var(--he-space-12);
  --he-gap-section-minor:var(--he-space-8);
  --he-gap-section-major:var(--he-space-16);
  --he-pad-card-compact:var(--he-space-4);
  --he-pad-card-standard:var(--he-space-6);
  --he-pad-card-feature:clamp(28px,2.8vw,56px);
  --he-gap-field:var(--he-space-6);
  --he-gap-field-grid:var(--he-space-8);
  --he-control-height:48px;
  --he-control-pad-inline:var(--he-space-4);
  --he-max-reading:70ch;
  --he-max-form:760px;
  /* Backward compatibility with older Aurora spacing tokens */
  --sa-space-1:var(--he-space-1);
  --sa-space-2:var(--he-space-2);
  --sa-space-3:var(--he-space-3);
  --sa-space-4:var(--he-space-4);
  --sa-space-6:var(--he-space-6);
  --sa-space-8:var(--he-space-8);
  --sa-space-12:var(--he-space-12);
  --sa-grid-gap:var(--he-gap-grid);
  --sa-page-gutter:var(--he-gutter-app);
}

/* Layout resilience: spacing may change, shapes and card materials must not. */
:is(.content,.finance-main,.health-main,.he-main,.hm-main,.screen,.desktop-page,
    .hm-pattern,.he-card,.stat-card,.lower-card,.screen-tile,.play-card,.hero,
    .feature-grid>*,.health-action-card,.product-card,.small-biomarker){min-width:0}
:is(.section-head,.hero-row,.lower-heading,.he-gallery-header,.health-header-row,
    .play-head,.panel-head,.page-heading){column-gap:var(--he-space-6)}
:is(.section-head,.hero-row,.he-gallery-header,.health-header-row){row-gap:var(--he-space-4)}

/* Persistent navigation should scroll internally, never with the document. */
:is(.portal .rail,.he-rail,.hm-sidebar,.finance-sidebar,.health-aside,.health-sidebar){
  scrollbar-width:none;
  -ms-overflow-style:none;
}
:is(.portal .rail,.he-rail,.hm-sidebar,.finance-sidebar,.health-aside,.health-sidebar)::-webkit-scrollbar,
:is(.rail-scroll,.hm-sidebar-patterns,.side-content,.he-category-nav)::-webkit-scrollbar{display:none!important;width:0;height:0}
:is(.rail-scroll,.hm-sidebar-patterns,.side-content,.he-category-nav){scrollbar-width:none;-ms-overflow-style:none}

/* Main design-system portal: editorial margins, but application previews stay compact. */
.portal .content>main{padding-inline:var(--he-gutter-editorial)!important;padding-block-end:var(--he-space-12)!important;}
.portal .hero{column-gap:var(--he-space-12)!important;row-gap:var(--he-space-6)!important;
  padding-block:clamp(48px,5vw,96px) var(--he-space-10)!important;}
.portal .hero-buttons{gap:var(--he-space-3)!important;margin-block-start:var(--he-space-6)!important}
.portal .section{margin-block-end:clamp(48px,7vw,160px)!important}
.portal .section-head{gap:var(--he-space-6)!important;margin-block-end:var(--he-space-8)!important}
.portal .screen-tiles{gap:var(--he-space-5)!important}
.portal .screen-tile{padding:var(--he-space-2)!important}
.portal .screen-tile>div:last-child{padding:var(--he-space-4) var(--he-space-3)!important}
.portal .material-row{gap:var(--he-space-4)!important}
.portal .lab-toolbar{gap:var(--he-space-5)!important;padding:var(--he-space-4) var(--he-space-6)!important}
.portal .lab-footer{gap:var(--he-space-4)!important;padding:var(--he-space-4) var(--he-space-6)!important}
.portal .rail{padding:var(--he-space-6) var(--he-space-3) var(--he-space-4)!important}
.portal .rail-scroll{padding-inline-end:var(--he-space-1)}
.portal .rail-link{column-gap:var(--he-space-3)!important;min-height:44px;padding:var(--he-space-3)!important}
.portal .rail-heading{padding-inline:var(--he-space-3)!important}
.portal .rail-box{padding:var(--he-space-5)!important}

/* Operational finance: generous, efficient gutters without a max-width cap. */
.finance-main>.topbar,.finance-page .topbar{padding-inline:var(--he-gutter-app)!important;
  padding-block:var(--he-space-5) var(--he-space-3)!important;}
.finance-page .finance-content{padding-inline:var(--he-gutter-app)!important;
  padding-block:var(--he-space-6) var(--he-space-20)!important;
  max-width:none!important;}
.finance-page .stats-grid{gap:var(--he-gap-grid-tight)!important;}
.finance-page .stat-card{padding:var(--he-pad-card-standard)!important;}
.finance-page .feature-grid{gap:var(--he-gap-grid)!important;margin-block-start:var(--he-space-6)!important;}
.finance-page :is(.challenge-card,.forecast-card){padding:var(--he-pad-card-feature)!important;}
.finance-page .lower-grid{gap:var(--he-gap-grid)!important;margin-block-start:var(--he-space-6)!important;}
.finance-page .lower-card{padding:var(--he-pad-card-standard)!important;}
.finance-page .page-heading{margin-block-end:var(--he-space-6)!important;}
.finance-page .topbar-right,.finance-page .topbar-left{gap:var(--he-space-3)!important;}
.finance-page .main-nav{gap:var(--he-space-2)!important;}

/* Health dashboard: sidebar and action cards retain their dedicated layout rows. */
.health-page .health-shell{max-width:none!important;padding-inline:var(--he-gutter-app)!important;
  padding-block:var(--he-space-5) var(--he-space-12)!important;}
.health-page .health-dashboard{gap:var(--he-space-8)!important;}
.health-page .health-aside{padding-block-start:var(--he-space-3)!important;}
.health-page .health-aside-tabs{gap:var(--he-space-4)!important;margin-block-end:var(--he-space-6)!important;}
.health-page .health-header-row{gap:var(--he-space-6)!important;}
.health-page .health-summary-metrics{gap:var(--he-space-4)!important;}
.health-page .health-small-cards{gap:var(--he-space-3)!important;}
.health-page .health-action-card{padding:var(--he-pad-card-compact)!important;}
.health-page .health-timeline{padding-inline:var(--he-space-5)!important;gap:var(--he-space-4)!important;
  margin-block:var(--he-space-4) var(--he-space-6)!important;}
.health-page .biomarker-feature-grid{gap:var(--he-space-4)!important;}
.health-page .health-lower-grid{gap:var(--he-space-6)!important;margin-block-start:var(--he-space-8)!important;}
.health-page .section-head{margin-block-end:var(--he-space-5)!important;}
.health-page .mini-biomarker-grid,.health-page .product-grid{gap:var(--he-space-4)!important;}
.health-page .small-biomarker,.health-page .product-card{padding:var(--he-space-4)!important;}

/* Responsive app screens and their components. */
.screen.desktop-page{padding-inline:var(--he-gutter-app)!important;
  padding-block:var(--he-space-8) var(--he-space-20)!important;}
.screen .hero-row{margin-block:var(--he-space-4) var(--he-space-8)!important;}
.screen .job-grid,.screen .mat-grid{gap:var(--he-gap-grid)!important;}
.screen :is(.demo-panel,.mat-box){padding:var(--he-pad-card-standard)!important;}
.screen :is(.crypto-hero,.jobs-feature,.featured-card){padding:var(--he-pad-card-feature)!important;}
.screen .topline{padding-inline:var(--he-gutter-app)!important;padding-block:var(--he-space-3)!important;}
.screen .phone-inner{padding-inline:var(--he-space-5)!important;padding-block-start:var(--he-space-8)!important;
  padding-block-end:max(var(--he-space-30),calc(90px + env(safe-area-inset-bottom)))!important;}
.screen .phone-nav{inset-inline:var(--he-space-4)!important;
  bottom:max(var(--he-space-4),env(safe-area-inset-bottom))!important;}
.screen .phone-hero{padding:var(--he-space-7)!important;}
.screen .wallet-actions{gap:var(--he-space-2)!important;margin-block-start:var(--he-space-4)!important;}

/* HeroUI / components laboratory: professional operational spacing. */
.he-bar{padding-inline:var(--he-gutter-app)!important;padding-block:var(--he-space-4)!important;}
.he-stage{padding-inline:var(--he-gutter-app)!important;
  padding-block:var(--he-space-12) var(--he-space-20)!important;}
.he-rail{padding:var(--he-space-8) var(--he-space-4) var(--he-space-6)!important;}
.he-gallery-header{gap:var(--he-space-6)!important;margin-block-end:var(--he-space-8)!important;}
.he-grid{gap:var(--he-gap-grid)!important;}
.he-card{padding:var(--he-pad-card-standard)!important;}
.he-card-header{gap:var(--he-space-3)!important;}
.he-card-desc{margin-block:var(--he-space-2) var(--he-space-5)!important;}
.he-category-nav{gap:var(--he-space-1)!important;}
.he-category-nav button{padding:var(--he-space-3) var(--he-space-4)!important;min-height:44px;}
.he-rail-label{padding:var(--he-space-7) var(--he-space-3) var(--he-space-3)!important;}

/* Motion library: two-column presentation, but no jumbo operational spacing. */
.hm-main>main{padding-inline:var(--he-gutter-app)!important;}
.hm-sidebar{padding:var(--he-space-7) var(--he-space-4) var(--he-space-5)!important;}
.hm-topbar{padding-inline:var(--he-gutter-app)!important;}
.hm-intro{gap:var(--he-space-10)!important;padding-block:var(--he-space-12) var(--he-space-14)!important;}
.hm-catalog{gap:var(--he-gap-grid)!important;padding-block:var(--he-space-10) var(--he-space-20)!important;}
.hm-pattern{padding:var(--he-pad-card-standard)!important;}
.hm-pattern h2{margin-block:var(--he-space-5) var(--he-space-2)!important;}
.hm-pattern-footer{padding-block-start:var(--he-space-5)!important;margin-block-start:var(--he-space-6)!important;}
.hm-guide{padding:var(--he-pad-card-feature)!important;}
.play-topbar{padding-inline:var(--he-gutter-editorial)!important;padding-block:var(--he-space-4)!important;}
.play-grid{gap:var(--he-gap-grid)!important;}
.play-card{padding:var(--he-pad-card-feature)!important;gap:var(--he-space-4)!important;}
.play-hero{padding:clamp(40px,4.4vw,80px)!important;}
.play-hero-actions{gap:var(--he-space-4)!important;margin-block-start:var(--he-space-6)!important;}

/* Form spacing: preserve native semantics and the existing selected/hover treatments. */
:is(.he-main,.hm-main,.portal,.finance-page,.health-page,.screen,.play-card) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select){
  min-height:var(--he-control-height);
  padding-inline:var(--he-control-pad-inline);
}
:is(.he-main,.hm-main,.portal,.finance-page,.health-page,.screen,.play-card) :is(label,.form-label,.field-label) {row-gap:var(--he-space-2)}
:is(.he-main,.hm-main,.portal,.finance-page,.health-page,.screen,.play-card) :is(.form-row,.field-row,.form-grid,.fields-grid){gap:var(--he-gap-field-grid)}
:is(.he-main,.hm-main,.portal,.finance-page,.health-page,.screen,.play-card) :is(.form-group,.field-group,.form-field){margin-block-end:var(--he-gap-field)}
:is(.he-main,.hm-main,.portal,.finance-page,.health-page,.screen,.play-card) :is(.input-group,.form-control,.select-wrapper){min-width:0}
:is(.he-main,.hm-main,.portal,.finance-page,.health-page,.screen,.play-card) :is(.dialog,.modal-inner,.he-dialog,.he-drawer,.he-menu){
  padding:var(--he-pad-card-standard);
}

/* Layout intent utilities for future work */
.he-density-compact{--he-card-pad:var(--he-pad-card-compact);--he-local-gap:var(--he-space-3)}
.he-density-standard{--he-card-pad:var(--he-pad-card-standard);--he-local-gap:var(--he-space-6)}
.he-density-feature{--he-card-pad:var(--he-pad-card-feature);--he-local-gap:var(--he-space-8)}
.he-readable{max-inline-size:var(--he-max-reading)}
.he-form-column{max-inline-size:var(--he-max-form)}
.he-grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--he-gap-grid)}

/* Tablet density: 8-column system, with readable single column forms. */
@media (max-width:1199px){
  :root{--he-gutter-app:32px;--he-gap-grid:20px;--he-gap-section:40px;--he-gap-section-major:56px;
    --he-pad-card-feature:32px;--he-gap-field-grid:24px;}
  .he-grid-12{grid-template-columns:repeat(8,minmax(0,1fr));}
  .portal .screen-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .health-page .health-dashboard{gap:var(--he-space-6)!important;}
  .he-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:850px){
  :root{--he-gutter-app:28px;--he-gap-grid:16px;--he-pad-card-feature:28px;--he-gap-field-grid:20px;}
  .finance-page .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .finance-page .feature-grid,.finance-page .lower-grid{grid-template-columns:1fr!important;}
  .health-page .health-dashboard{grid-template-columns:1fr!important;}
  .health-page .health-header-row{flex-wrap:wrap;}
  .health-page .health-lower-grid{grid-template-columns:1fr!important;}
  .screen .job-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .screen .mat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .hm-catalog,.play-grid{grid-template-columns:1fr!important;}
}

/* Mobile / 200%-zoomed laptop: a four-column canvas, not four cramped tasks. */
@media(max-width:600px){
  :root{--he-gutter-app:16px;--he-gutter-editorial:20px;--he-gap-grid:16px;
    --he-gap-field-grid:16px;--he-gap-field:16px;--he-gap-section:32px;
    --he-gap-section-major:48px;--he-pad-card-standard:20px;--he-pad-card-feature:28px;}
  .he-grid-12{grid-template-columns:repeat(4,minmax(0,1fr));}
  .portal .hero{grid-template-columns:1fr!important;min-height:auto!important;
    padding-block:var(--he-space-12) var(--he-space-8)!important;gap:var(--he-space-6)!important;}
  .portal .section{margin-block-end:var(--he-space-12)!important;}
  .portal .screen-tiles{grid-template-columns:1fr!important;}
  .portal .section-head,.he-gallery-header{align-items:flex-start!important;flex-direction:column!important;}
  .portal .lab-toolbar{gap:var(--he-space-3)!important;padding:var(--he-space-4)!important;}
  .portal .lab-footer{padding:var(--he-space-4)!important;}
  .finance-page .finance-content{padding-block-start:var(--he-space-4)!important;}
  .finance-page .topbar{flex-wrap:wrap;min-height:auto!important;gap:var(--he-space-3)!important;}
  .finance-page .stats-grid{gap:var(--he-space-3)!important;}
  .finance-page .stat-card{padding:var(--he-space-4)!important;min-height:152px;}
  .finance-page :is(.challenge-card,.forecast-card){padding:var(--he-space-7)!important;}
  .finance-page .lower-card{padding:var(--he-space-5)!important;}
  .health-page .health-header-row{flex-direction:column!important;align-items:stretch!important;}
  .health-page .health-summary-metrics{gap:var(--he-space-3)!important;}
  .health-page .health-small-cards{gap:var(--he-space-3)!important;}
  .health-page .biomarker-feature-grid{grid-template-columns:1fr!important;}
  .health-page .mini-biomarker-grid,.health-page .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .health-page .health-shell{padding-block-start:var(--he-space-4)!important;}
  .screen .job-grid,.screen .mat-grid{grid-template-columns:1fr!important;}
  .screen .hero-row{align-items:flex-start;flex-wrap:wrap;}
  .he-grid{grid-template-columns:1fr!important;}
  .he-stage{padding-block:var(--he-space-8) var(--he-space-12)!important;}
  .he-card{padding:var(--he-space-5)!important;}
  .hm-main>main{padding-inline:var(--he-gutter-app)!important;}
  .hm-intro{gap:var(--he-space-5)!important;padding-block:var(--he-space-10)!important;}
  .hm-pattern{padding:var(--he-space-5)!important;}
  .play-card{padding:var(--he-space-7)!important;min-height:0;}
  .play-hero{padding:var(--he-space-8)!important;}
  :is(.he-main,.hm-main,.portal,.finance-page,.health-page,.screen,.play-card) :is(.form-row,.field-row,.form-grid,.fields-grid){grid-template-columns:1fr!important;gap:var(--he-gap-field-grid)!important}
}

/* Reduced motion is owned by component motion layers, not spacing. */

/* Navigation height/scroll ownership corrections. */
@media(min-width:851px){
  .finance-page .finance-sidebar{
    position:sticky!important;top:0!important;height:100dvh!important;max-height:100dvh!important;
    min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain;
  }
  .health-page .health-aside{
    position:sticky!important;top:var(--he-space-4);align-self:start;
    max-height:calc(100dvh - var(--he-space-8));overflow-y:auto;overscroll-behavior:contain;
  }
  .he-rail{overflow-y:auto;overscroll-behavior:contain;}
}
@media(max-width:850px){
  .health-page .health-aside{position:static!important;max-height:none!important;overflow:visible!important;}
  .finance-page .finance-sidebar{max-height:none;}
}
@media(max-width:600px){
  .health-page .health-topbar{height:auto!important;min-height:48px;gap:var(--he-space-3);align-items:center;}
  .health-page .health-top-actions{min-width:0!important;gap:var(--he-space-2)!important;flex:0 1 auto!important;}
  .health-page .health-top-actions .he-lab-inline{padding-inline:var(--he-space-2)!important;}
  .health-page .health-logo{flex:1 1 135px;min-width:0;}
  .health-page .health-logo>span{display:none;}
}