:root {
  --cs-app-tabs-height: calc(64px + max(14px, var(--cs-safe-area-bottom)) - min(14px, var(--cs-safe-area-bottom)));
  --cs-app-header-height: calc(56px + env(safe-area-inset-top));
}
@view-transition { navigation: auto; }
::view-transition-old(app-header), ::view-transition-new(app-header),
::view-transition-old(app-tabs), ::view-transition-new(app-tabs) { animation: none; }
::view-transition-old(root) { animation: 120ms ease-out both cs-shell-fade-out; }
::view-transition-new(root) { animation: 120ms ease-in both cs-shell-fade-in; }
@keyframes cs-shell-fade-out { to { opacity: 0; } }
@keyframes cs-shell-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
.play-invite-banner { position: fixed; z-index: 40; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 42rem; margin: auto; padding: .8rem; border: 1px solid var(--cs-border-strong); border-radius: 12px; background: var(--cs-surface-raised); color: var(--cs-text); box-shadow: 0 12px 30px var(--cs-scrim); }
.play-invite-banner[hidden] { display: none; }
.play-invite-banner p { flex: 1 1 100%; margin: 0; }
.play-invite-banner button { min-height: 44px; padding: .5rem .85rem; border: 1px solid var(--cs-border-control); border-radius: 8px; background: transparent; color: var(--cs-text); font: inherit; }
.play-invite-banner button:first-of-type { border-color: var(--cs-accent-fill); background: var(--cs-accent-fill); color: var(--cs-on-accent); }
.play-invite-banner button:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
body:has(.play-invite-banner:not([hidden])) #member-session-join { border-color: var(--cs-border-control); background: transparent; color: var(--cs-text); }
body { --cs-toast-edge-offset: calc(max(16px, var(--cs-safe-area-bottom)) + 8px); --cs-toast-bottom-offset: var(--cs-toast-edge-offset); }
body:has(.app-tabs:not([hidden])) { --cs-toast-bottom-offset: calc(var(--cs-app-tabs-height) + var(--cs-toast-edge-gap)); }
body:has(#account-screen:not([hidden])), body.pairing-active { --cs-toast-bottom-offset: var(--cs-toast-edge-offset); }

.app-header {
  view-transition-name: app-header;
  z-index: 30; /* the profile menu lives inside this layer and must stay above page content */
  position: absolute;
  inset: 0 0 auto;
  width: min(100%, 1420px);
  height: var(--cs-app-header-height);
  margin: 0 auto;
  padding: env(safe-area-inset-top) clamp(18px, 3vw, 44px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--cs-divider);
  background: var(--cs-bg);
}
/* Home Screen app on iPhone: iOS fades the strip just under the status bar (its scroll-edge effect), so
   give the header room below it. Safari tabs and other devices keep the normal header. */
@media (display-mode: standalone) and (hover: none) {
  :root { --cs-app-header-height: calc(56px + 18px + env(safe-area-inset-top)); }
  .app-header { padding-top: calc(env(safe-area-inset-top) + 18px); }
}
.app-header + main, body:has(.app-header) > main { margin-top: var(--cs-app-header-height); }
.app-header #profile-placeholder { display: flex; align-items: center; justify-content: center; pointer-events: none; }
.app-header #profile-placeholder, .app-header #profile-trigger { box-sizing: border-box; }
.app-wordmark { display: inline-flex; align-items: center; min-height: 44px; }
/* The mock-up's header wordmark is 17px letters and a 19px slash on a 402px phone: 162px wide before the
   2026-10-15 tighter spacing, 153px now at the same letter size (162 × 8395 / 8881). */
.app-wordmark .brand-wordmark { width: 153px; }
body:has(#controller-main:not([hidden]) .active-display-picker) .app-header { border-bottom: 0; }
.app-header .profile-control { position: relative; top: auto; right: auto; }
.app-header .profile-trigger { border-color: var(--cs-border-strong); background: var(--cs-surface-raised); }
.app-header .profile-menu { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); }
.app-tabs {
  view-transition-name: app-tabs;
  position: fixed;
  z-index: 25;
  inset: auto 0 0;
  /* 64 + 14 = 78 px without a home indicator; with one, the inset replaces our 14 px (about 84 px). */
  height: var(--cs-app-tabs-height);
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--cs-divider);
  background: var(--cs-bg);
}
.app-tabs a {
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--cs-text-muted);
  font: 500 11px/1 "IBM Plex Mono", monospace;
  text-decoration: none;
}
.app-tabs a { position: relative; }
.app-tabs a[aria-current="page"] { color: var(--cs-accent); }
.play-tab-marker { position: absolute; top: 6px; left: calc(50% + 8px); width: 7px; height: 7px; border-radius: 50%; background: var(--cs-accent); }
.play-tab-marker.has-count { top: 3px; left: calc(50% + 7px); width: auto; min-width: 17px; height: 17px; padding: 2px 3px; box-sizing: border-box; color: var(--cs-on-accent); font: 600 10px/13px "IBM Plex Mono", monospace; text-align: center; }
.app-tabs a:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.play-booting .play-shell { visibility: hidden; }
.app-tabs svg { width: 22px; height: 22px; stroke: currentColor; }
body:has(.app-tabs) > main { padding-bottom: calc(86px + max(14px, env(safe-area-inset-bottom)) - min(14px, env(safe-area-inset-bottom))); }
body:has(.app-tabs[hidden]) > main { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.device-dialog { max-height: calc(100dvh - 2 * max(8px, env(safe-area-inset-top), env(safe-area-inset-bottom))); overflow-y: auto; }
@media (max-width: 560px) {
  .content-picker-dialog { height: 100dvh; }
  .content-picker-header { padding-top: max(18px, env(safe-area-inset-top)); }
  .play-shell { padding-top: max(24px, env(safe-area-inset-top)); }
}
.controller-header { padding-right: 0; }
.studio-back[hidden] + .studio-title { grid-column: 1 / 3; text-align: left; }

/* Shared title rhythm for controller pages. Shell CSS loads after each page stylesheet. */
:root .cs-page-title { min-width: 0; }
:root .cs-page-title .cs-page-title-eyebrow,
:root .active-display-picker > .cs-page-title-eyebrow {
  display: block; margin: 0 0 4px; color: var(--cs-text-muted);
  font: 500 11px/1.2 "IBM Plex Mono", monospace;
  letter-spacing: .08em; text-transform: uppercase; word-spacing: -.25em;
}
:root .cs-page-title .cs-page-title-heading,
:root .active-display-picker > .cs-page-title-heading {
  max-width: none; margin: 0; color: var(--cs-text);
  font: 600 28px/1.15 "IBM Plex Sans", sans-serif;
  letter-spacing: -.03em;
}
:root .cs-page-title .cs-page-title-subtitle {
  margin: 6px 0 0; color: var(--cs-text-muted);
  font: 400 15px/1.4 "IBM Plex Sans", sans-serif;
}
.cs-page-title-subtitle[hidden] { display: none; }
:root .active-display-picker > .cs-page-title-heading { grid-column: 1; grid-row: 2; min-width: 0; }
:root .active-display-picker .cs-page-title-heading .display-name-picker { font: inherit; letter-spacing: inherit; }