/* ==========================================================================
   App shell: header, view container, floating tab bar, page widths
   ========================================================================== */

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-on); font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.app-header {
  position: sticky; top: 0; z-index: 50;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--gutter) 0;
}
.app-header__bar {
  display: flex; align-items: center; gap: var(--sp-2);
  max-width: var(--page-max-wide); margin: 0 auto;
  min-height: var(--header-h); padding: 8px 8px 8px 10px;
  border-radius: var(--r-pill);
}
.app-header__brand { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--text); text-decoration: none; border-radius: var(--r-pill); }
.app-header__brand:hover { text-decoration: none; }
.app-header__brand { min-height: var(--tap); padding: 0 8px; flex: none; }
.app-header__bar > .segmented { flex: none; }
.app-header__brand .wordmark { color: var(--brand-ink); display: block; }
.app-header__spacer { flex: 1 1 auto; }
.app-header__picker {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 0 10px 0 4px;
  border: 0; border-radius: var(--r-pill); background: var(--fill-1); color: var(--text);
  font-size: var(--fs-subhead); font-weight: 600; max-width: 150px;
}
.app-header__picker:hover { background: var(--fill-2); }
.app-header__picker .icon { color: var(--text-2); }
.app-header__picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) {
  .app-header__brand { padding: 0 4px; }
  .app-header__brand .wordmark { height: 16px; width: auto; }
  .app-header .segmented__option { padding: 0 12px; }
}
@media (max-width: 420px) {
  .app-header__picker-name { display: none; }
  .app-header__picker { padding-right: 6px; }
}
@media (max-width: 420px) {
  .app-header__bar { gap: 6px; }
  .app-header .segmented__option .icon { display: none; }
}
@media (max-width: 340px) {
  .app-header .segmented__option { padding: 0 8px; }
}
body.no-header .app-header { display: none; }

/* ---------- Main view ---------- */
.app-main { outline: none; }
.view {
  padding: var(--sp-4) var(--gutter) var(--tabbar-clearance);
  animation: view-in var(--dur) var(--ease);
}
body.no-tabbar .view { padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px)); }

/* Page containers: phone width by default; .page--wide grows for coach screens */
.page { max-width: var(--page-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-6); }
.page--wide { max-width: var(--page-max-wide); }
.page--full { max-width: none; }

/* Two-column layout for coach screens from 900px (sidebar + main). Single column below. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); align-items: start; }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split__aside--sticky { position: sticky; top: calc(var(--header-h) + 24px); }
  .hide-wide { display: none !important; }
}
@media (max-width: 899px) { .hide-narrow { display: none !important; } }

/* ---------- Floating tab bar ---------- */
.tabbar {
  position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: stretch; gap: 2px;
  padding: 6px; border-radius: var(--r-pill);
  width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur-strong)) saturate(var(--saturate));
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 .5px var(--glass-stroke), var(--glass-shadow-lg);
}
.tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 76px; min-height: 52px; padding: 4px 14px;
  border-radius: var(--r-pill);
  color: var(--text-2); text-decoration: none;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tabbar__item:hover { color: var(--text); text-decoration: none; }
.tabbar__item[aria-current="page"] {
  color: var(--tint-ink);
  background: var(--tint-soft);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.tabbar__item[aria-current="page"] .icon { stroke-width: 2.4; }
@media (max-width: 374px) { .tabbar__item { min-width: 64px; padding: 4px 8px; } }
body.no-tabbar .tabbar { display: none; }

/* ---------- Styleguide helpers ---------- */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); }
.sg-swatch { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-footnote); }
.sg-swatch__chip { height: 44px; border-radius: var(--r-sm); background: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.sg-code {
  display: block; overflow-x: auto; white-space: pre; margin-top: var(--sp-2);
  padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--fill-1); color: var(--text);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
}
.sg-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.sg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--sp-2); }
.sg-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-3) var(--sp-1); border-radius: var(--r-sm); background: var(--fill-1); font-size: 11px; color: var(--text-2); text-align: center; word-break: break-word; }
.sg-icon .icon { color: var(--text); }
.sg-tabbar-demo { position: static; transform: none; margin: 0 auto; }