/*
 * Load after ALL native stylesheets and biot-future.css.
 * Source audit: biot.css, navigation, refinement, effects, ui-refresh and
 * desktop styles (supplied October 2026 snapshots). Keep these overrides
 * separate from the portable renderer stylesheet.
 */

/* Native year2027Panel moves itself before the first future panel in the DOM.
 * Its visual order is 0. Native refinement gives ordinary panels order >= 1.
 * The existing intro/summary have no assigned order in the audited CSS/JS.
 * Only while this component exists, keep that navigation chrome ahead of it.
 * No original content panel is moved, hidden or assigned a different order.
 */
#dash .dash-grid:has(> #biotFutureExperiencePanel) > #dashViewIntro {
  order: -30;
}

#dash .dash-grid:has(> #biotFutureExperiencePanel) > #biotProfileSummary {
  order: -20;
}

#dash #biotFutureExperiencePanel.bf-integration-panel {
  order: -1;
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0 0 12px;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none;
  content-visibility: visible;
  contain-intrinsic-size: none;
}

#biotFutureExperiencePanel.bf-integration-panel::before,
#biotFutureExperiencePanel.bf-integration-panel::after {
  content: none !important;
  display: none !important;
}

#biotFutureExperiencePanel > .bio-future {
  max-width: none;
}

#dash #biotFutureExperiencePanel[hidden] {
  display: none !important;
}

/* The native header selector is global and sticky. These are section headings,
 * so clear only the inherited page-header properties under the new panel. */
#biotFutureExperiencePanel .bf-section-head {
  position: static;
  top: auto;
  z-index: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Native .panel button rules carry !important and high selector specificity.
 * Match only actual renderer controls; retain the component's responsive sizes. */
#biotFutureExperiencePanel :is(.bf-tab, .bf-button) {
  font-size: 13px !important;
}

#biotFutureExperiencePanel :is(.bf-motion-toggle, .bf-day, .bf-year, .bf-play) {
  font-size: 12px !important;
}

#biotFutureExperiencePanel :is(.bf-tab, .bf-motion-toggle) {
  min-height: 44px;
  border-radius: 9px !important;
}

#biotFutureExperiencePanel .bf-button {
  min-height: 46px;
  border-radius: 10px !important;
}

#biotFutureExperiencePanel .bf-play {
  min-height: 44px;
  border-radius: 10px !important;
}

#biotFutureExperiencePanel .bf-day {
  min-height: 181px;
  border-radius: 13px !important;
}

#biotFutureExperiencePanel .bf-year {
  min-height: 70px;
  border-radius: 10px !important;
}

#biotFutureExperiencePanel .bf-progress {
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px !important;
  background: transparent;
  box-shadow: none;
  font-size: inherit !important;
}

#biotFutureExperiencePanel :is(button, a, input, summary):focus-visible,
#biotFutureExperiencePanel [tabindex]:focus-visible {
  outline: 2px solid var(--bf-gold) !important;
  outline-offset: 4px;
}

@media (max-width: 640px) {
  #biotFutureExperiencePanel .bf-tab { font-size: 12px !important; }
  #biotFutureExperiencePanel .bf-motion-toggle { font-size: 11px !important; }
  #biotFutureExperiencePanel .bf-day { min-height: 156px; }
  #biotFutureExperiencePanel .bf-year { min-height: 68px; }
}

@media (max-width: 480px) {
  #biotFutureExperiencePanel .bf-button { font-size: 12px !important; }
  #biotFutureExperiencePanel .bf-year { min-height: 66px; }
}

@media (forced-colors: active) {
  #biotFutureExperiencePanel :is(button, a, input, summary):focus-visible,
  #biotFutureExperiencePanel [tabindex]:focus-visible {
    outline-color: Highlight !important;
  }
}