/* Shell selectors are scoped to avoid changing the independent lip application. */
.bc-app {
  font-family: var(--bc-font-body);
  color: var(--bc-text);
  background: radial-gradient(ellipse at 80% 0, #e9e2f044, transparent 48%), var(--bc-bg);
  line-height: 1.65;
}
.bc-app *, .bc-app *::before, .bc-app *::after { box-sizing: border-box; }
.bc-app :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--bc-focus);
  outline-offset: 4px;
}
.bc-skip-link {
  position: fixed;
  inset: 8px auto auto 16px;
  z-index: 20001;
  transform: translateY(-160%);
  padding: 12px 20px;
  border-radius: var(--bc-radius-control);
  color: #fff;
  background: var(--bc-primary);
}
.bc-skip-link:focus { transform: none; }
.bc-shell { background: #ffffffd9; border-bottom: 1px solid var(--bc-border); }
@supports (backdrop-filter: blur(16px)) {
  .bc-shell { background: #ffffffb8; backdrop-filter: blur(16px); }
}
.bc-shell__inner {
  max-width: var(--bc-width-stage);
  min-height: var(--bc-header-height);
  margin-inline: auto;
  padding: 16px var(--bc-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.bc-brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; min-width: 0; }
.bc-brand__mark { width: 34px; height: 42px; flex-shrink: 0; color: var(--bc-text); }
.bc-brand__name { font: 19px/1.2 var(--bc-font-brand); letter-spacing: .02em; white-space: nowrap; }
.bc-brand__caption { display: block; margin-top: 5px; color: var(--bc-text-secondary); font-size: 12px; letter-spacing: .1em; }
.bc-app #nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 4px;
  height: auto;
  border: 1px solid #e6e0ec;
  border-radius: var(--bc-radius-pill);
  background: #f2eef6cc;
}
.bc-app #nav a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--bc-touch-target);
  padding: 10px 16px;
  border-radius: var(--bc-radius-pill);
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--bc-text-secondary);
  transition: background var(--bc-duration-nav) var(--bc-ease), color var(--bc-duration-fast) var(--bc-ease);
}
.bc-app #nav a.active { background: var(--bc-selected-bg); color: var(--bc-selected-text); }
.bc-app #nav a:hover { background: #e9e2f0; filter: none; }
.bc-nav__icon { width: 20px; height: 20px; flex-shrink: 0; }
.bc-shell__tools { display: flex; justify-self: end; align-items: center; gap: 12px; min-width: 0; }
.bc-about {
  display: grid; place-items: center;
  min-width: var(--bc-touch-target); min-height: var(--bc-touch-target);
  color: var(--bc-text-secondary); border-radius: 50%;
}
.bc-about svg { width: 22px; height: 22px; }
.bc-account { display: flex; align-items: center; gap: 10px; min-height: var(--bc-touch-target); min-width: 0; padding: 4px; text-align: left; border-radius: var(--bc-radius-control); }
.bc-account__text { min-width: 0; max-width: 150px; }
.bc-account b { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-account small { display: block; color: var(--bc-text-secondary); font-size: 12px; white-space: nowrap; }
.bc-account .avatar { width: 36px; height: 36px; background: var(--bc-selected-bg); color: var(--bc-selected-text); }
.bc-app .app-shell { margin-left: 0; }
.bc-context {
  max-width: var(--bc-width-content);
  margin: 20px auto 0;
  padding-inline: var(--bc-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bc-app .bc-subnav { display: block; min-width: 0; margin: 0; }
.bc-subnav__group { display: flex; align-items: center; gap: 20px; }
.bc-app .bc-subnav a {
  display: inline-flex; flex: none; flex-direction: row; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 0;
  font-size: 14px; line-height: 1.5; font-weight: 400;
  color: var(--bc-text-secondary); white-space: nowrap;
  border-radius: 0; border-bottom: 2px solid transparent;
}
.bc-app .bc-subnav a > span { width: auto; font-size: 14px; line-height: inherit; }
.bc-app .bc-subnav a.active { color: var(--bc-selected-text); border-bottom-color: #a68cbf; background: transparent; }
.bc-app .bc-subnav b { margin: 0; padding: 0 7px; border-radius: var(--bc-radius-pill); color: var(--bc-selected-text); background: var(--bc-selected-bg); font-size: 12px; font-weight: 400; }
.bc-path { margin: 0; color: var(--bc-text-secondary); font-size: 12px; white-space: nowrap; }
.bc-path b { font-weight: 400; }

/* No stage page is enabled in P1. These classes define later layout capabilities. */
.bc-app .bc-container, .bc-app #main.bc-container {
  width: 100%; max-width: var(--bc-width-content);
  margin-inline: auto; padding: 28px var(--bc-gutter) 48px;
}
.bc-app .bc-container--stage, .bc-app #main.bc-container--stage { max-width: var(--bc-width-stage); }
.bc-app .bc-container--viewport, .bc-app #main.bc-container--viewport { width: var(--bc-width-viewport); max-width: none; margin: 0; padding-inline: 0; }
.bc-app #main:focus { outline: none; }
.bc-app #main h1 { font-family: var(--bc-font-editorial); font-size: clamp(28px, 2.5vw, 38px); line-height: 1.4; letter-spacing: 0; text-wrap: balance; }
.bc-app #main :is(.card, .feature-card) { border-radius: var(--bc-radius-panel); }
.bc-app #main :is(.primary, .outline, .white-button) { border-radius: var(--bc-radius-control); min-height: var(--bc-touch-target); }
.bc-app #main .primary:hover { background: var(--bc-primary-hover); filter: none; }
.bc-app #main :is(input:not([type=checkbox]):not([type=range]):not([type=color]), select, textarea) {
  font-family: var(--bc-font-body); font-size: 16px;
  border-color: var(--bc-control-border); border-radius: var(--bc-radius-control);
}
.bc-app #main :is(.page-intro, .section-heading, .welcome, .form-actions) { min-width: 0; }
.bc-app #main :is(.panel, .product-card, .plan-result, .coach-layout > *, .two-col > *) { min-width: 0; overflow-wrap: anywhere; }
.bc-app #main footer { color: var(--bc-text-secondary); }
/* Keep the retained legacy entry dismissible after the shell changes. */
.bc-app #ai-coach-modal .coach-container { position: relative; }
.bc-app #closeCoach { position: absolute; top: 16px; right: 20px; z-index: 1; float: none; min-width: 44px; min-height: 44px; }
.bc-app #ai-coach-modal .step-page h1 { padding-right: 48px; }

@media (min-width: 1024px) and (max-width: 1250px) {
  .bc-shell__inner { gap: 16px; }
  .bc-account__text { display: none; }
  .bc-brand__name { font-size: 17px; }
  .bc-app #nav a { padding-inline: 12px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .bc-shell__inner { grid-template-columns: 1fr auto; gap: 12px; padding-block: 14px; }
  .bc-app #nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .bc-shell__tools { grid-column: 2; grid-row: 1; }
}
@media (max-width: 767px) {
  /* A backdrop-filter ancestor would make the fixed bottom nav follow the header. */
  .bc-shell { backdrop-filter: none; }
  .bc-shell__inner { min-height: var(--bc-header-height); padding-block: 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .bc-brand { gap: 8px; }
  .bc-brand__mark { width: 26px; height: 34px; }
  .bc-brand__name { font-size: 16px; }
  .bc-brand__caption { font-size: 12px; margin-top: 2px; letter-spacing: .04em; }
  .bc-shell__tools { gap: 0; }
  .bc-account__text { display: none; }
  .bc-account { padding: 6px; }
  .bc-about { min-width: 44px; }
  .bc-app #nav {
    position: fixed; z-index: 100; inset: auto 0 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0; width: 100%; min-height: calc(var(--bc-mobile-nav-height) + var(--bc-safe-bottom));
    padding: 6px 8px calc(6px + var(--bc-safe-bottom));
    border: 0; border-top: 1px solid var(--bc-border); border-radius: 0;
    background: #fbf9fd; box-shadow: 0 -4px 24px rgb(43 29 62 / 3%);
  }
  .bc-app #nav a { flex-direction: column; gap: 4px; padding: 6px 2px; min-height: 60px; font-size: 12px; line-height: 1.4; border-radius: var(--bc-radius-compact); }
  .bc-app #nav a.active { background: #eee8f5; }
  .bc-nav__icon { width: 21px; height: 21px; }
  .bc-context { margin-top: 12px; display: block; }
  .bc-path { display: none; }
  .bc-app .bc-subnav { padding: 4px 0; overflow-x: auto; scrollbar-width: thin; }
  .bc-subnav__group { width: max-content; gap: 24px; padding-inline: 4px; }
  .bc-app #main.bc-container { padding-top: 20px; padding-bottom: calc(40px + var(--bc-mobile-nav-height) + var(--bc-safe-bottom)); }
  .bc-app #main .welcome { flex-wrap: wrap; }
  .bc-app #main h1 { font-size: 28px; }
  .bc-app #main .page-intro h1 { font-size: 28px; }
  .bc-app #toast { bottom: calc(16px + var(--bc-mobile-nav-height) + var(--bc-safe-bottom)); }
  .bc-app[data-bc-keyboard] #nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-app *, .bc-app *::before, .bc-app *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}