/* Application shell and shared tokens.
   Fixed safe-area padding is intentional: native WebViews have reported unreliable env() insets. */

:root {
  --cyan: #27d7ff;
  --pink: #ff3ec9;
  --sa-top: 32px;
  --sa-right: 20px;
  --sa-bottom: 20px;
  --sa-left: 20px;
}

* { box-sizing: border-box; }

html { margin: 0; min-height: 100%; overflow-x: hidden; }

body { margin: 0; overflow-x: hidden; min-height: 100dvh; }

.app-shell { min-height: 100dvh; position: relative; z-index: 1; }

.screen { display: none; min-height: 100dvh; }

.screen.active { display: flex; }

button { font-family: inherit; }

button:hover,
button:active,
a:hover,
a:active { transform: none; }

@media (min-width:768px) and (orientation:landscape) {
  html,
  body { height: 100%; overflow: hidden; }
}

:root {
  --fretboard-desktop-width: 96vw;
  --control-h: 34px;
  --control-border: #2a4054;
  --control-bg: #09121d;
  --control-active: #ff57d7;
  --control-gap: 8px;
}

@media (min-width:1200px) {
  :root { --control-gap: clamp(8px,1vw,16px); }
}

:root {
  --ui-control-border: #2a4054;
  --ui-control-bg: #09121d;
  --ui-control-fg: #d4e7f2;
  --ui-control-active: #ff57d7;
  --ui-control-active-bg: #2b0b2c;
  --ui-control-radius: 12px;
  --ui-group-gap: 20px;
  --ui-label-gap: 9px;
  --ui-drawer-control-h: 54px;
  --control-min-h: 44px;
}

@media (max-width:767px) {
  :root { --screen-nav-h: calc(62px + var(--sa-top)); }
}