/* Shell layout. The globe stays clickable in the free area. */

@layer shell {
  #app {
    position: fixed;
    inset: 0;
    z-index: var(--z-app);
    pointer-events: none;
    color: var(--text);
    font-family: var(--font-body);
  }

  .sh-rail,
  .sh-hud,
  .sh-panel,
  .sh-tabs,
  .sh-view {
    pointer-events: auto;
  }

  .sh-rail {
    position: fixed;
    top: var(--safe-top);
    bottom: var(--safe-bottom);
    left: var(--safe-left);
    z-index: var(--z-hud);
    width: var(--rail-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-2);
  }

  .sh-brand {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--accent);
    filter: drop-shadow(0 0 12px var(--accent-glow));
    text-decoration: none;
  }

  .sh-rail__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    overflow: auto;
  }

  .sh-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
  }

  .sh-nav__link:hover,
  .sh-nav__link.is-active {
    color: var(--text);
    background: var(--surface-hover);
  }

  .sh-nav__link.is-active {
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--border);
  }

  .sh-hud {
    position: fixed;
    z-index: var(--z-hud);
    top: calc(var(--safe-top) + 12px);
    left: calc(var(--rail-w) + 12px);
    right: 16px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-3);
  }

  .sh-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-mute);
  }

  .sh-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--fs-sm);
    outline: none;
  }

  .sh-hud__meta,
  .sh-hud__tools {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .sh-clock {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--accent);
    letter-spacing: 0.08em;
  }

  .sh-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    white-space: nowrap;
  }

  .sh-pill.is-off { color: var(--danger); }

  .sh-modes { flex: none; }

  .sh-panel {
    position: fixed;
    z-index: var(--z-panel);
    top: calc(var(--safe-top) + 76px);
    left: calc(var(--rail-w) + 12px);
    bottom: calc(var(--player-h) + var(--safe-bottom) + 12px);
    width: var(--panel-w);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  html[data-panel='closed'] .sh-panel {
    transform: translateX(calc(-100% - var(--rail-w)));
    visibility: hidden;
  }

  .sh-panel__bar {
    display: flex;
    justify-content: flex-end;
    padding: var(--sp-2) var(--sp-3) 0;
  }

  .sh-view {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--sp-3) var(--sp-4) var(--sp-5);
    scroll-behavior: smooth;
  }

  .sh-tabs { display: none; }

  html[data-mode='mobile'] .sh-rail,
  html[data-mode='mobile'] .sh-hud__meta,
  html[data-mode='mobile'] .sh-modes,
  html[data-mode='mobile'] .sh-panel__bar { display: none; }

  html[data-mode='mobile'] .sh-hud {
    left: 12px;
    right: 12px;
  }

  html[data-mode='mobile'] .sh-panel {
    top: calc(var(--safe-top) + 72px);
    left: 0;
    right: 0;
    bottom: calc(var(--tabbar-h) + var(--mini-player-h) + var(--safe-bottom));
    width: auto;
    border: 0;
    border-radius: 0;
    background: color-mix(in oklab, var(--bg-0) 88%, transparent);
    transform: none;
    visibility: visible;
  }

  html[data-mode='mobile'][data-scene='visible'] .sh-panel {
    background: transparent;
    pointer-events: none;
  }

  html[data-mode='mobile'][data-scene='visible'] .sh-view {
    pointer-events: none;
  }

  html[data-mode='mobile'][data-scene='visible'] .sh-view .v-globe {
    pointer-events: auto;
  }

  html[data-mode='mobile'] .sh-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    z-index: var(--z-hud);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--surface-strong);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(var(--blur));
  }

  html[data-mode='mobile'] .sh-tabs .sh-nav__link {
    justify-content: center;
    min-height: 44px;
  }

  html[data-mode='car'] #app,
  html[data-mode='car'] #player,
  html[data-mode='ambient'] #app,
  html[data-mode='ambient'] #player {
    visibility: hidden;
    pointer-events: none;
  }
}