/* Helium Blue V2.3.1: the single production motion behavior contract.
   Source: theme/tokens.json. This file does not repaint visual components.
   Motion is semantic, never a second component theme. */
:root {
  --helium-ease:cubic-bezier(.22,.86,.24,1);
  --he-motion-press:var(--helium-fast,120ms);
  --he-motion-select:var(--helium-base,180ms);
  --he-motion-content:var(--helium-content,220ms);
  --he-motion-overlay:var(--helium-overlay,260ms);
  
  --he-motion-offset:var(--helium-distance,8px);
}
/* Core #01 accordion: animate disclosure only while expanded; use native buttons. */
:where(.he-accordion,.he-acc,.hm-fold,.he-disclosure,.he-accordion-item,.he-accordion-body){
  --he-disclosure-speed:var(--he-motion-content);
}
:where(.he-acc-body,.hm-fold-panel,[data-he-accordion-panel]){
  transition-duration:var(--he-motion-content);transition-timing-function:var(--helium-ease);
}
/* Core #03 drawer, #17 modal: consistent z-axis entrance. */
:where(.he-drawer,.hm-drawer,.he-dialog,.h2-dialog,.sa-dialog,.hm-modal,[data-he-drawer]){
  --he-overlay-speed:var(--he-motion-overlay);
  transition-duration:var(--he-motion-overlay);transition-timing-function:var(--helium-ease);
}
/* Core #08 checkbox, #36 toggle, #22 tabs, #40 calendar, #41 contents. */
:where(input[type="checkbox"],input[type="radio"],.he-switch-ui,.he-switch-ui::after,.he-toggle,.he-tgl .sw,.he-tgl .sw::after,
  .he-tabs button,.hm-tabs button,[role="tab"],.he-calendar button,.he-cal button,.he-toc button,.he-tb2 button){
  transition-duration:var(--he-motion-select);transition-timing-function:var(--helium-ease);
}
/* Core #07 carousel: one governed track behavior; swipe/keyboard still owned by component. */
:where(.he-carousel-track,.hm-carousel-track,.he-tt,.he-gt,[data-he-carousel-track]){
  transition-duration:var(--he-motion-content);transition-timing-function:var(--helium-ease);
}
/* Core #10 loader, #11 graph, #28 progress/timeline, #30 bottom nav, #45 comparison. */
:where(.he-loader,.he-spinner,.he-progress-bar,.he-gline,.he-garea,.he-gpt,.he-tlf,.he-tld,
  .he-bnv button,.he-bnv .lb,.hm-garland-row,.he-cc,.he-table tbody tr){
  transition-duration:var(--he-motion-select);transition-timing-function:var(--helium-ease);
}
/* Standard controls respond immediately and do not lift from their resting position. */
:where(.h2-button,.he-btn,.hm-btn,.sa-btn,.he-button,.he-control,.he-icon-btn){
  --he-button-speed:var(--he-motion-select);
  transition-duration:var(--he-motion-select);transition-timing-function:var(--helium-ease);
}
:where(.h2-panel,.he-card,.sa-card,.he-component-card):hover {translate:none;}
:where(.h2-panel,.he-card,.sa-card,.he-component-card){
  transition-property:background-color,border-color,box-shadow,color;
  transition-duration:var(--he-motion-select);transition-timing-function:var(--helium-ease);
}
/* Core #04: deliberate one-time entrance, never global stagger on unrelated cards. */
[data-he-reveal]{opacity:1;transform:none;}
[data-he-reveal].he-before-reveal{opacity:0;transform:translateY(var(--he-motion-offset));}
[data-he-reveal].he-reveal-done{opacity:1;transform:none;transition:opacity var(--he-motion-content) var(--helium-ease),transform var(--he-motion-content) var(--helium-ease);}
/* Core #34: responsive text sizing only when explicitly opted in. */
[data-he-fit]{white-space:nowrap;max-width:100%;font-family:var(--helium-type-display);}
/* Conditional #18/#20/#32/#37/#47/#49: no automatic application; opt-in data attribute required. */
[data-he-optional-motion]:not([data-he-motion-enabled="true"]) {animation:none!important;}
@media(prefers-reduced-motion:reduce){
  :root{--he-motion-press:0ms;--he-motion-select:0ms;--he-motion-content:0ms;--he-motion-overlay:0ms;}
  [data-he-reveal].he-before-reveal{opacity:1;transform:none;}
  :where(.he-drawer,.he-dialog,.h2-dialog,[data-he-carousel-track],.he-bnv button,.he-switch-ui,.he-switch-ui::after){transition-duration:0ms!important;animation-duration:0ms!important;}
}

/* Integrated behavior contract panel inside the EXISTING motion/index.html, not another gallery. */
.he-motion-contract{margin:18px 0 25px;padding:28px;display:grid;gap:22px;border:1px solid var(--helium-color-border);border-radius:var(--helium-radius-xl);corner-shape:squircle;background:var(--helium-color-card);color:var(--helium-color-text);}
.he-contract-header{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;flex-wrap:wrap;}
.he-contract-header h2{font:680 clamp(25px,3vw,34px)/1.14 var(--helium-type-display);letter-spacing:-.045em;color:var(--helium-color-brand-dark);margin:9px 0;}
.he-contract-header p{font:400 14px/1.55 var(--helium-type-body);color:var(--helium-color-muted);max-width:65ch;margin:0;}
.he-contract-header a,.he-motion-contract-spec a{font:650 13px var(--helium-type-body);color:var(--helium-color-brand);text-decoration:underline;text-underline-offset:3px;}
.he-motion-contract-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;}
.he-motion-contract-grid>div{padding:20px;border-radius:var(--helium-radius-lg);corner-shape:squircle;border:1px solid var(--helium-color-border);background:var(--helium-color-field);}
.he-motion-contract-grid strong{display:block;font:650 15px/1.35 var(--helium-type-body);margin-bottom:15px;color:var(--helium-color-brand-dark);}
.he-contract-times{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:15px;}
.he-contract-times span{background:var(--helium-color-card);border-radius:var(--helium-radius-sm);corner-shape:squircle;display:grid;gap:4px;padding:12px 6px;text-align:center;font:550 11px var(--helium-type-body);color:var(--helium-color-muted);}
.he-contract-times b{font:650 24px var(--helium-type-metric);color:var(--helium-color-brand-dark);}
.he-motion-contract-spec p,.he-contract-try small{font:400 12px/1.5 var(--helium-type-body);color:var(--helium-color-muted);}
.he-motion-contract-spec p+p{margin-top:12px;}
.he-standard-ids{display:flex;gap:7px;flex-wrap:wrap;align-items:center;font:600 11px/1.2 var(--helium-type-body);}
.he-standard-ids>b{color:var(--helium-color-brand-dark);margin-right:7px;}
.he-standard-ids span{padding:8px 11px;border:1px solid var(--helium-color-border);border-radius:var(--helium-radius-sm);corner-shape:squircle;background:var(--helium-color-field);white-space:nowrap;}
@media(max-width:900px){.he-motion-contract-grid{grid-template-columns:1fr}.he-contract-times{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media(max-width:500px){.he-motion-contract{padding:16px}.he-motion-contract-grid>div{padding:14px}.he-contract-times{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* Responsive acceptance: utility links scroll within the header instead of widening the viewport. */
@media(max-width:600px){
 .he-bar{min-width:0;max-width:100vw;}
 .he-bar-right{min-width:0;max-width:calc(100vw - 105px);overflow-x:auto;overflow-y:hidden;white-space:nowrap;flex-wrap:nowrap;scrollbar-width:none;overscroll-behavior-x:contain;}
 .he-bar-right::-webkit-scrollbar{display:none;}
 .he-intro-stat{overflow:hidden;}
}

/* Helium Blue V2.5 — behavior adoption from the CORRECT 50 demos (no page transition).
   Every selector targets an existing real Helium component, never a new full-page showcase. */
:root{--he-motion-press:120ms;--he-motion-select:180ms;--he-motion-content:220ms;--he-motion-overlay:260ms;--he-motion-stagger:var(--helium-stagger,30ms);}
/* #01 Disclosure — grid-height trick avoids fixed max-height clipping; accessible button state. */
.he-disclosure-panel {display:grid!important;grid-template-rows:0fr;opacity:0;padding:0 12px!important;min-height:0;overflow:hidden;transition:grid-template-rows var(--he-motion-content) var(--helium-ease),opacity var(--he-motion-content) var(--helium-ease),padding var(--he-motion-content) var(--helium-ease);}
.he-disclosure-panel .he-disclosure-inner{min-height:0;overflow:hidden;}
.he-disclosure-panel.is-open{grid-template-rows:1fr;opacity:1;padding:13px!important;}
[data-disclosure] svg{transition:transform var(--he-motion-content) var(--helium-ease)}
[data-disclosure][aria-expanded="true"] svg{transform:rotate(180deg)}
/* #08: path-drawn SVG checkmark on actual native checkboxes (no fake click handler). */
/* #08: one native checkbox + one visual, so the stroke is never clipped or doubled. */
.he-draw-check{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:28px;user-select:none}
.he-draw-check input[type="checkbox"]{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;width:24px;height:24px;margin:0;z-index:1;cursor:pointer}
.he-draw-check .he-check-box{width:24px;height:24px;flex:none;display:grid;place-items:center;border:1.5px solid var(--helium-color-border);border-radius:7px;corner-shape:squircle;background:var(--helium-color-card);transition:background-color var(--helium-fast) var(--helium-ease),border-color var(--helium-fast) var(--helium-ease)}
.he-draw-check input:checked+.he-check-box{background:var(--helium-color-brand);border-color:var(--helium-color-brand)}
.he-draw-check input:focus-visible+.he-check-box{outline:2px solid var(--helium-color-focus);outline-offset:3px}
.he-draw-check .he-check-draw{display:block;width:17px;height:17px;overflow:visible;pointer-events:none;position:static}
.he-draw-check .he-check-draw path{fill:none;stroke:var(--helium-color-card);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset var(--he-motion-content) var(--helium-ease)}
.he-draw-check input:checked+.he-check-box .he-check-draw path{stroke-dashoffset:0}
.he-draw-check input:disabled+.he-check-box{opacity:.5}
/* #10: shared stack loader, only shown in loading states. */
.he-logo-stack-loader{display:inline-flex;gap:4px;align-items:flex-end;justify-content:center;height:28px;min-width:57px}
.he-logo-stack-loader i{width:10px;height:10px;border-radius:4px;corner-shape:squircle;background:var(--helium-color-brand);animation:he-stack-hop 900ms var(--helium-ease) infinite}
.he-logo-stack-loader i:nth-child(2){animation-delay:90ms}.he-logo-stack-loader i:nth-child(3){animation-delay:180ms}.he-logo-stack-loader i:nth-child(4){animation-delay:270ms}
@keyframes he-stack-hop{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-9px);opacity:1}}
/* #03/#17 standard overlay entrance. Native keyboard and focus behavior remain with component owner. */
.he-drawer{animation:he-drawer-in var(--he-motion-overlay) var(--helium-ease) both}
.he-drawer>*{animation:he-item-in var(--he-motion-content) var(--helium-ease) both;animation-delay:calc(var(--he-index,0)*var(--he-motion-stagger))}
.he-dialog,.h2-dialog[open]{animation:he-modal-in var(--he-motion-overlay) var(--helium-ease) both}
@keyframes he-item-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
/* #04 one-shot reveal: product hero/feature content only, not all dashboard cards. */
[data-he-reveal].he-before-reveal{opacity:0;transform:translateY(8px)}
/* #11 graph line drawing (on viewport entry) and #28 progress fill. */
svg [data-he-chart-path]{transition:stroke-dashoffset var(--he-motion-content) var(--helium-ease);}
.he-motion-progress{transform-origin:left;transition:transform var(--he-motion-content) var(--helium-ease)}
.he-motion-progress.he-before-progress{transform:scaleX(.01)}
.timeline-track span{transition:background-color var(--he-motion-select) var(--helium-ease),transform var(--he-motion-select) var(--helium-ease)}
.timeline-track span.active{transform:scale(1.3)}
/* #22 / #36 / #40: one fast, consistent selection response. */
:where(.he-tabs button,.he-toolbar button,.he-switch-ui,.he-switch-ui::after,.he-dategrid button,.nav-link){transition-duration:var(--he-motion-select);transition-timing-function:var(--helium-ease)}
:where(.nav-link:hover,.he-card:hover,.stat-card:hover,.small-biomarker:hover){transform:none!important;translate:none!important}
/* #43 sticky header: a quiet solid elevation when scrolling. No backdrop blur. */
.he-sticky-header{background:var(--helium-color-header);transition:background-color var(--he-motion-select) var(--helium-ease),box-shadow var(--he-motion-select) var(--helium-ease)}
.he-sticky-header.he-scrolled{background:var(--helium-color-header);box-shadow:0 3px 12px -8px rgba(18,58,92,.24)}
/* Preserve Porcelain: actual metric cards and data containers must stay solid. Aurora omitted on purpose. */
html body :is(.stat-card,.small-biomarker,.he-card,.he-floating,.he-dialog,.he-drawer){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
html body :is(.he-floating,.he-dialog,.he-drawer){background:var(--helium-color-card)!important;color:var(--helium-color-text)!important}
html body .he-floating{position:fixed!important;border:1px solid var(--helium-color-border);box-shadow:0 18px 50px rgba(18,58,92,.13)}
/* #45 compare rows respond with soft border and background, no lift. */
.he-table tbody tr{transition:background-color var(--he-motion-select) var(--helium-ease)}
.he-table tbody tr:hover{background:var(--helium-color-field)}
/* Visual proof in the existing component catalogue. */
.he-applied-reference{padding:30px 0 45px;display:grid;gap:15px;border-top:1px solid var(--helium-color-border)}
.he-applied-reference h2{font:650 clamp(26px,3.2vw,40px)/1.15 var(--helium-type-display);letter-spacing:-.04em;color:var(--helium-color-brand-dark);margin:0}
.he-applied-reference p{font:400 14px/1.55 var(--helium-type-body);color:var(--helium-color-muted);margin:0}
.he-applied-reference a{color:var(--helium-color-brand-dark)}
.he-applied-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.he-applied-cases a{display:flex;align-items:center;gap:10px;min-height:64px;padding:14px;background:var(--helium-color-card);border:1px solid var(--helium-color-border);border-radius:var(--helium-radius-md);corner-shape:squircle;text-decoration:none;font:600 13px/1.25 var(--helium-type-body);transition:border-color var(--he-motion-select) var(--helium-ease),background var(--he-motion-select) var(--helium-ease)}
.he-applied-cases a:hover,.he-applied-cases a:focus-visible{border-color:var(--helium-color-brand);background:var(--helium-color-field)}
.he-applied-cases b{color:var(--helium-color-brand)}
@media(max-width:800px){.he-applied-cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.he-applied-cases{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.he-logo-stack-loader i,.he-drawer>*,.he-dialog{animation:none!important}.he-disclosure-panel,.he-check-draw path,svg [data-he-chart-path],.he-motion-progress,.he-sticky-header{transition:none!important}[data-he-reveal].he-before-reveal{opacity:1;transform:none}}

/* V2.5 Porcelain restoration: legacy 1.8 glass specimens no longer govern everyday data cards. */
html body :is(.stat-card,.small-biomarker,.stat.quiet,.he-card):not(.biomarker-gradient):not(.challenge-card):not(.h2-light){background:var(--helium-color-card)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
/* Correct-source #01 and #30 applied to the real mobile screen UI. */
html body .accordion .accordion-content{display:block;max-height:0;opacity:0;overflow:hidden;padding-block:0;transition:max-height var(--he-motion-content) var(--helium-ease),opacity var(--he-motion-content) var(--helium-ease),padding var(--he-motion-content) var(--helium-ease)}
html body .accordion.open .accordion-content{max-height:220px;opacity:1;padding-bottom:15px}
html body .accordion button svg{transition:transform var(--he-motion-select) var(--helium-ease)}
html body .accordion.open button svg{transform:rotate(180deg)}
/* Bottom navigation uses one fast active treatment. No glass. */
html body .phone-nav{background:var(--helium-color-card)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid var(--helium-color-border)!important}
html body .phone-nav button{transition:background-color var(--he-motion-select) var(--helium-ease),color var(--he-motion-select) var(--helium-ease);border-radius:var(--helium-radius-sm);corner-shape:squircle}
html body .phone-nav button.active{background:var(--helium-color-control)}
/* Smallest supported viewport: prevent action tools pushing wellness header past the edge. */
@media(max-width:360px){html body .health-shell{padding-inline:12px!important}html body .health-topbar{gap:7px;min-width:0}html body .health-top-actions{gap:3px;flex:0 1 auto}html body .health-mini-button{width:30px!important;min-width:30px!important}}
@media(prefers-reduced-motion:reduce){html body .accordion .accordion-content,html body .accordion button svg,html body .phone-nav button{transition:none!important}}
@media(max-width:360px){html body .health-logo>span{display:none}}
@media(max-width:360px){html body .health-topbar .he-lab-inline{font-size:10px!important;padding:6px!important;gap:3px!important;min-width:0!important}}

.he-card.he-demonstrated{outline:2px solid var(--helium-color-brand);outline-offset:4px;transition:outline-color var(--he-motion-select) var(--helium-ease)}

/* #41 Table of contents current-section affordance, shared 180ms selection timing. */
.hm-sidebar-patterns a{transition:color var(--he-motion-select) var(--helium-ease),background-color var(--he-motion-select) var(--helium-ease)}
.hm-sidebar-patterns a.he-toc-active{color:var(--helium-color-brand-dark);background:var(--helium-color-control)}