/* The Mac window: a 230 px glass sidebar floating over the page (inset 8), the page column with
   its 52 px title row, the floating mini player, the compact tab bar below 640 px, and the
   Stage Mode layer that replaces it all (spec/shell.md). */

.shell { position: fixed; inset: 0; overflow: hidden; background: var(--page); }
.shell[data-bg="plain"] { background: var(--plain); }

/* The page scrolls under the sidebar, so Home's wash shows through the glass. */
.page {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  padding-left: calc(var(--sidebar-w) + 8px);
  padding-bottom: 96px;
  scroll-padding-top: var(--toolbar-h);
  overscroll-behavior: contain;
}
.page[data-bg="plain"] { background: var(--plain); }
.page[data-bg="grouped"] { background: var(--page); }

.titlebar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  height: var(--toolbar-h);
  padding: 0 16px 0 22px;
  pointer-events: none;
}
.titlebar > * { pointer-events: auto; }
.titlebar::before {
  content: ""; position: absolute; inset: 0 0 -14px 0; z-index: -1;
  background: linear-gradient(var(--fade-from, var(--plain)) 55%, transparent);
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.page[data-bg="grouped"] .titlebar { --fade-from: var(--page); }
.page.scrolled:not([data-bg="home"]) .titlebar::before { opacity: 1; }
.titlebar .page-title {
  margin: 0; padding-left: 6px;
  font-size: 34px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.1;
}
.titlebar .back {
  display: inline-grid; place-items: center; width: 30px; height: 28px; border-radius: 999px;
  background: var(--glass); border: 0.5px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: var(--label);
}
.titlebar .back .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.titlebar .back:hover { background: var(--pressed); }
.titlebar .corner { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.titlebar.small .page-title { font-size: calc(17px * var(--text-scale)); }
/* The title row's Install capsule: on a phone only, where there is no sidebar to hold the row. */
.title-install {
  display: none; flex: none; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text); font-size: calc(13px * var(--text-scale)); font-weight: 600;
}
.title-install .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.title-install:active { background: color-mix(in srgb, var(--accent) 26%, transparent); }
/* The narrowest phones: the icon alone, so the page's title keeps its room. */
@media (max-width: 379px) {
  .title-install { width: 32px; padding: 0; justify-content: center; }
  .title-install span { display: none; }
}
.page-content { position: relative; }

/* ---------------------------------------------------------------- the rail */

/* The rail (owner, 2026-10-30), the Apple apps' from 1.4: 92 px of glass under the title row, 8 px
   from the window's edges, the page's colour coming through it. The ENYO wordmark over an accent
   rule at its head; the pages each a symbol over its name (11 px, unscaled, as the phone's tab bar);
   at the foot Install, the language, Support and Settings, and under a line the account. */
.sidebar {
  position: fixed; z-index: 50;   /* above Stage Mode: the rail is always on screen */
  top: var(--toolbar-h); bottom: 8px; left: 8px;
  width: var(--sidebar-w);
  box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: 14px 8px 10px;
  border-radius: 18px;
  background: var(--sidebar);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border: 0.5px solid var(--glass-edge);
  box-shadow: var(--sidebar-shadow);
}
.rail-brand { flex: none; display: flex; justify-content: center; padding: 2px 0 14px; }
.rail-wordmark {
  position: relative; padding-bottom: 7px;
  font-family: var(--font-rounded); font-weight: 700; font-size: 15px; line-height: 1;
  letter-spacing: 0.18em; margin-inline-end: -0.18em;   /* the O's tracking given back: centred */
  color: var(--label);
}
.rail-wordmark::after {
  content: ""; position: absolute; bottom: 0; height: 2px; border-radius: 1px;
  left: -3px; right: calc(0.18em - 3px);
  background: var(--accent);
}
.rail-nav, .rail-foot { display: flex; flex-direction: column; gap: 4px; }
.rail-nav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.rail-foot { flex: none; padding-top: 8px; }
.rail-item, .rail-account {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; box-sizing: border-box; padding: 8px 2px;
  border-radius: 10px;
  color: var(--label); text-align: center; text-decoration: none;
}
.rail-item .icon { width: 21px; height: 21px; }
.rail-label {
  max-width: 100%;
  font-size: 11px; font-weight: 500; line-height: 1.2;
  /* A long name takes two lines rather than shrinking. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  hyphens: auto; overflow-wrap: break-word;
}
.rail-item:hover, .rail-account:hover { background: var(--hover); }
.rail-item:active, .rail-account:active { background: var(--pressed); }
/* The page showing: a pale square of the accent, the symbol in it. */
.rail-item[aria-current="page"] { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.rail-item[aria-current="page"] .icon { color: var(--accent); }
.rail-item[aria-current="page"] .rail-label { font-weight: 600; }
.rail-sep { flex: none; height: 1px; margin: 6px 10px; background: var(--hairline); }
.rail-account { padding-block: 6px; }
.rail-account .account-avatar { --avatar: 32px; }

/* A touch screen too short for the rail's names (a phone on its side, shell.js applyRail): the
   symbols only, 60 px wide, no wordmark. */
.sidebar, .page, .mini, .stage-layer { transition: width 0.22s var(--snappy), padding-left 0.22s var(--snappy), left 0.22s var(--snappy); }
:root.sidebar-collapsed { --sidebar-w: 60px; }
:root.sidebar-collapsed .rail-brand, :root.sidebar-collapsed .rail-label { display: none; }
:root.sidebar-collapsed .sidebar { top: 8px; padding: 8px 6px; overflow-y: auto; }
:root.sidebar-collapsed .rail-nav { flex: none; overflow: visible; }
:root.sidebar-collapsed .rail-foot { margin-top: auto; }
:root.sidebar-collapsed .rail-item { padding: 8px 0; }

/* The account's picture (views/account.js): the initials on the accent, or a person while signed
   out. The rail's foot, Home's greeting on a phone, the account sheet's head. */
.account-avatar {
  --avatar: 30px;
  width: var(--avatar); height: var(--avatar); flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--chip); color: var(--label-2);
  font-family: var(--font-rounded); font-weight: 700; font-size: calc(var(--avatar) * 0.4);
  line-height: 1; letter-spacing: 0.02em;
}
.account-avatar .icon { width: 56%; height: 56%; margin-block-start: 8%; }
.account-avatar.signed-in { background: var(--accent); color: var(--on-accent); }
.account-avatar.big { --avatar: 60px; }

/* ---------------------------------------------------------------- mini player */

.mini {
  position: fixed; z-index: 15;
  left: calc(var(--sidebar-w) + 8px + 24px); right: 24px; bottom: 16px;
  margin: 0 auto;
  max-width: 560px;
  height: 60px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 10px 0 14px;
  border-radius: 999px;
}
.mini:active { transform: scale(0.995); }
.mini .open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 100%; text-align: left; }
.mini .text { flex: 1; min-width: 0; display: grid; }
.mini .name { font-size: calc(15px * var(--text-scale)); font-weight: 600; color: var(--label); }
.mini .detail { font-size: calc(13px * var(--text-scale)); color: var(--label-2); }
.mini .buttons { display: flex; direction: ltr; }
.mini .buttons button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; }
.mini .buttons button:hover:not(:disabled) { background: var(--hover); }
.mini .play { color: var(--accent); }
.mini .play .icon { width: 24px; height: 24px; }
.mini .next .icon { width: 22px; height: 22px; }
.mini .next:disabled { color: var(--label-4); }
.mini .play .icon { transition: transform 0.2s var(--snappy), opacity 0.2s; }

/* ---------------------------------------------------------------- compact tab bar */

.tabbar {
  position: fixed; z-index: 20;
  left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  height: 58px;
  display: none; gap: 2px; padding: 4px;
  border-radius: 999px;
}
.tabbar a {
  flex: 1; height: 50px; border-radius: 999px;
  display: grid; justify-items: center; align-content: center; gap: 2px;
  color: var(--label); font-size: 10px; font-weight: 500;
}
.tabbar a .icon { width: 22px; height: 20px; }
.tabbar a[aria-current="page"] { background: var(--chip); color: var(--accent); }

@media (max-width: 639px) {
  .sidebar { display: none; }
  .tabbar { display: flex; }
  .title-install { display: inline-flex; }
  .page { padding-left: 0; padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
  .titlebar { padding-left: 16px; padding-top: env(safe-area-inset-top, 0px); height: calc(var(--toolbar-h) + env(safe-area-inset-top, 0px)); }
  .titlebar .page-title { font-size: 28px; }
  .mini { left: 16px; right: 16px; bottom: calc(12px + 58px + 10px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- Stage Mode layer */

.stage-layer {
  position: fixed; inset: 0; z-index: 40;
  /* The whole window: the backdrop runs behind the sidebar; the player starts beside it. */
  --stage-inset: calc(var(--sidebar-w) + 8px);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  color: rgba(255, 255, 255, 0.85);
  background: #1C232B;
}
/* Phones have no sidebar, so the player takes the whole width. After the rule above, which it overrides. */
@media (max-width: 639px) { .stage-layer { --stage-inset: 0px; } }
/* A phone on its side (touch, 520 px or less): Stage Mode takes the whole screen, as it does
   upright; its close button leads back to the pages and the sidebar. */
@media (max-height: 520px) and (pointer: coarse) {
  .stage-layer { --stage-inset: 0px; }
  html.stage .sidebar { visibility: hidden; }
}
.stage-layer.shown { opacity: 1; }
.shell.behind-stage { visibility: hidden; transition: visibility 0s 0.25s; }
/* Opening on Stage Mode (shell.js): there from the first frame, no fade over Home. */
.stage-layer.at-once { opacity: 1; transition: none; }
.shell.behind-stage.at-once { transition: none; }

/* The page-load placeholder: the static description crawlers read, shown until the app is up. */
.prerender { max-width: 760px; margin: 0 auto; padding: 72px 24px 120px; }
.prerender h1 { font-size: 34px; margin: 0 0 8px; }
.prerender p { font-size: calc(15px * var(--text-scale)); color: var(--label-2); line-height: 1.5; }
.app-ready .prerender { display: none; }
/* Starting up (the first script in index.html): the description waits out of sight, and the
   Metronome's landing pages show Stage Mode's ground at once. */
.app-booting:not(.app-ready) .prerender { visibility: hidden; }
.boot-stage:not(.app-ready) body { background: #1C232B; }

/* The load screen (owner, 2026-10-28): the brand's amber with the ENYO wordmark, drawn as the apps'
   Wordmark is (rounded, bold, tracked 0.18 em), while the app loads; four beats at 120 BPM appear if
   it takes a moment. Amber in either appearance, like an app's launch screen. It fades as the app
   comes up, and gives way to the description if the app is not up in 6 s (index.html). The
   developer banner stays above it. The word is drawn by CSS, so crawlers read only the page. */
.boot-screen { display: none; }
.app-booting .boot-screen {
  position: fixed; inset: 0; z-index: 190;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: #E8961A; color: #1E1203;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.app-ready .boot-screen { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-mark { font-family: var(--font-rounded); font-weight: 700; font-size: clamp(44px, 13vw, 76px); line-height: 1; }
/* The tracking after the O, matched before the E, so the word sits in the middle. */
.boot-mark::before { content: "ENYO"; letter-spacing: 0.18em; padding-inline-start: 0.18em; }
.boot-beats { display: flex; align-items: center; gap: 12px; opacity: 0; animation: boot-in 0.25s ease 0.45s forwards; }
.boot-beats i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.28; animation: boot-beat 2s ease-out infinite; }
.boot-beats i:nth-child(1) { width: 12px; height: 12px; animation-delay: 0.6s; }
.boot-beats i:nth-child(2) { animation-delay: 1.1s; }
.boot-beats i:nth-child(3) { animation-delay: 1.6s; }
.boot-beats i:nth-child(4) { animation-delay: 2.1s; }
@keyframes boot-in { to { opacity: 1; } }
@keyframes boot-beat { 0% { opacity: 1; transform: scale(1.2); } 30%, 100% { opacity: 0.28; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .boot-beats i { animation: none; }
  .app-booting .boot-screen { transition: none; }
}

/* ---------------------------------------------------------------- the developer site's banner */
/* html.dev-build (index.html's start-up script): every host but the public ones. A full-width
   strip above the app; the shell, the sidebar and Stage Mode start below it, so nothing hides. */

html.dev-build { --dev-banner-h: calc(26px + env(safe-area-inset-top, 0px)); }
html.dev-build body::before {
  content: "DEVELOPER VERSION · work in progress, not the public site";
  position: fixed; z-index: 200; top: 0; left: 0; right: 0;
  height: var(--dev-banner-h); box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) 12px 0;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(-45deg, #b3261e 0 14px, #9c1f18 14px 28px);
  color: #fff; font: 700 11px/1 -apple-system, system-ui, sans-serif; letter-spacing: 0.08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
@media (max-width: 520px) { html.dev-build body::before { content: "DEVELOPER VERSION · not public"; } }
html.dev-build .shell,
html.dev-build .stage-layer { top: var(--dev-banner-h); }
html.dev-build .sidebar { top: calc(var(--toolbar-h) + var(--dev-banner-h)); }
html.dev-build.sidebar-collapsed .sidebar { top: calc(8px + var(--dev-banner-h)); }
html.dev-build .prerender { padding-top: var(--dev-banner-h); }