/*
  GRIMLIFE VAULT — responsive layout contract
  2026-10-02

  This file intentionally loads last. The original visual treatments remain in
  index.html; this layer owns geometry, gutters, mobile containment and recorder
  visibility so new feature work does not need one-off spacing patches.
*/

:root {
  --gl-page-gutter: clamp(18px, 2.2vw, 28px);
  --gl-player-gutter: clamp(18px, 2.2vw, 24px);
  --gl-section-gap: 20px;
  --gl-control-gap: 8px;
  --gl-mobile-edge: 10px;
}

/* Shared horizontal geometry ------------------------------------------------ */
.global-header {
  width: min(1220px, calc(100% - var(--gl-page-gutter) - var(--gl-page-gutter)));
}

.app[data-mode="browse"] .library-shell {
  padding-left: var(--gl-page-gutter);
  padding-right: var(--gl-page-gutter);
}

.app[data-mode="player"] .player-console {
  width: min(860px, calc(100% - var(--gl-player-gutter) - var(--gl-player-gutter)));
}

.app[data-mode="metadata"] .player-console {
  max-width: calc(100% - var(--gl-player-gutter) - var(--gl-player-gutter));
}

.player-core,
.title-transport,
.wave-rail,
.wave-viewport {
  min-width: 0;
}

/* Recorder darkness ---------------------------------------------------------
   The orb remains alive underneath this veil; everything around it falls much
   closer to black. UI layers sit above z-index 3 and remain legible. */
.app[data-recording="true"]::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 52%,
      rgba(0, 0, 0, .62) 0%,
      rgba(0, 0, 0, .72) 18%,
      rgba(0, 0, 0, .88) 43%,
      rgba(0, 0, 0, .96) 74%,
      rgba(0, 0, 0, .985) 100%
    );
}

/* Recorder console containment. The seek rail is always inside its own panel,
   regardless of title length, safe-area inset or recorder stage. */
.app[data-mode="player"][data-recording="true"] .player-console {
  overflow: visible;
}

.app[data-mode="player"][data-recording="true"] .player-core {
  width: 100%;
  max-width: 100%;
}

.app[data-mode="player"][data-recording="true"] .wave-rail {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.app[data-mode="player"][data-recording="true"] .title-transport {
  width: 100%;
  max-width: 100%;
}

.app[data-mode="player"][data-recording="true"] .player-title {
  min-width: 0;
  max-width: 100%;
}

/* Tablet ------------------------------------------------------------------- */
@media (max-width: 980px) and (min-width: 721px) {
  :root {
    --gl-page-gutter: 16px;
    --gl-player-gutter: 16px;
  }
}

/* Phone -------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --gl-page-gutter: 10px;
    --gl-player-gutter: 10px;
    --gl-section-gap: 14px;
    --gl-control-gap: 6px;
  }

  html,
  body,
  .app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .global-header {
    left: var(--gl-page-gutter);
    right: var(--gl-page-gutter);
    width: auto;
    margin: 0;
    transform: none;
  }

  .app[data-recording="true"] .global-header {
    transform: translateY(-14px);
  }

  .app[data-mode="browse"] .library-shell {
    padding-left: var(--gl-page-gutter);
    padding-right: var(--gl-page-gutter);
  }

  #categoryGate,
  #categoryGate .category-choices,
  .collection-header,
  .library-toolbar,
  .library-scroll {
    width: 100%;
    max-width: 100%;
  }

  #categoryGate {
    gap: 24px;
    padding-top: 22px;
    padding-bottom: 16px;
  }

  #categoryGate .category-choices {
    gap: 10px;
  }

  /* Regular player and metadata share the same physical left/right edges. */
  .player-console {
    left: var(--gl-player-gutter);
    right: var(--gl-player-gutter);
    width: auto;
    max-width: none;
    margin: 0;
    transform: none;
  }

  .app[data-mode="player"] .player-console {
    left: 0;
    right: 0;
    width: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  .app[data-mode="metadata"]:not([data-recording="true"]) .player-console {
    left: 50%;
    right: auto;
    width: auto;
    max-width: calc(100vw - 20px);
    margin: 0;
    transform: translateX(-50%);
  }

  /* Recording setup/fullscreen: keep the seek rail reachable at all times. */
  .app[data-mode="player"][data-recording="true"] .player-console {
    left: var(--gl-mobile-edge);
    right: var(--gl-mobile-edge);
    top: max(calc(var(--safe-top) + 8px), 7dvh);
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 6px 10px 12px;
    transform: none;
  }

  .app[data-mode="player"][data-recording="true"] .recording-catalog {
    margin: 0 0 5px;
  }

  .app[data-mode="player"][data-recording="true"] .wave-rail {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 50px;
    margin: 0 0 7px;
    overflow: hidden;
    touch-action: none;
  }

  .app[data-mode="player"][data-recording="true"] .wave-viewport {
    max-width: 100%;
  }

  .app[data-mode="player"][data-recording="true"] .title-transport {
    grid-template-columns: max-content minmax(0, 1fr) auto;
    column-gap: 0;
    width: 100%;
    max-width: 100%;
    min-height: 52px;
  }

  .app[data-mode="player"][data-recording="true"] .player-title {
    overflow: hidden;
    padding-left: 7px;
    font-size: clamp(20px, 6.4vw, 28px);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app[data-mode="player"][data-recording="true"] .recording-tempo > strong {
    padding-right: 7px;
    font-size: 31px;
  }

  .app[data-mode="player"][data-recording="true"] .recording-tempo-meta {
    gap: 4px;
    padding-right: 7px;
    font-size: 7.5px;
  }

  .app[data-mode="player"][data-recording="true"] .recording-credit {
    max-width: calc(100% - 4px);
    overflow: hidden;
    margin-left: 18px;
    font-size: 6.8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app[data-mode="player"][data-recording="true"] .player-controls {
    flex: 0 0 auto;
    gap: 3px;
    margin-left: 5px;
  }

  .app[data-mode="player"][data-recording="true"] .round-button {
    width: 29px;
    height: 29px;
  }

  .app[data-mode="player"][data-recording="true"] .round-button.main {
    width: 37px;
    height: 37px;
  }

  /* On phones the recorder orb sits lower, so the darkness follows it. */
  .app[data-recording="true"]::after {
    background:
      radial-gradient(
        circle at 50% 59.5%,
        rgba(0, 0, 0, .64) 0%,
        rgba(0, 0, 0, .74) 17%,
        rgba(0, 0, 0, .90) 41%,
        rgba(0, 0, 0, .97) 72%,
        rgba(0, 0, 0, .99) 100%
      );
  }

  /* The recording setup card is constrained by the same viewport contract. */
  #recordingPrivateSetup {
    left: var(--gl-mobile-edge);
    right: var(--gl-mobile-edge);
    width: auto;
    max-width: none;
    transform: none;
  }
}

/* Very narrow phones: preserve interaction before typography. */
@media (max-width: 380px) {
  .app[data-mode="player"][data-recording="true"] .player-console {
    left: 8px;
    right: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .app[data-mode="player"][data-recording="true"] .player-title {
    font-size: clamp(18px, 6vw, 23px);
  }

  .app[data-mode="player"][data-recording="true"] .recording-tempo > strong {
    font-size: 28px;
  }

  .app[data-mode="player"][data-recording="true"] .round-button {
    width: 27px;
    height: 27px;
  }

  .app[data-mode="player"][data-recording="true"] .round-button.main {
    width: 35px;
    height: 35px;
  }
}


/* v8 mobile tune ----------------------------------------------------------- */
/* Recorder mode should feel centered, darker, and a touch more breathable on phones. */
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .scan-label{
  display:none;
}
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .scan-top{
  justify-content:flex-end;
}

.app[data-recording="true"]::after {
  background:
    radial-gradient(
      circle at 50% 54%,
      rgba(0, 0, 0, .78) 0%,
      rgba(0, 0, 0, .86) 16%,
      rgba(0, 0, 0, .93) 36%,
      rgba(0, 0, 0, .978) 64%,
      rgba(0, 0, 0, .995) 100%
    );
}

@media (max-width: 720px) {
  .app[data-mode="player"][data-recording="true"] .player-console {
    left: 50%;
    right: auto;
    width: min(420px, calc(100vw - 18px));
    transform: translateX(-50%);
    top: max(calc(var(--safe-top) + 8px), 5.5dvh);
    padding: 6px 12px 12px;
  }

  .app[data-mode="player"][data-recording="true"] .wave-rail {
    height: 48px;
  }

  #recordingPrivateSetup {
    width: min(420px, calc(100vw - 18px));
    max-height: min(44vh, 412px);
    bottom: max(10px, var(--safe-bottom));
  }

  .app[data-recording="true"]::after {
    background:
      radial-gradient(
        circle at 50% 56.3%,
        rgba(0, 0, 0, .82) 0%,
        rgba(0, 0, 0, .89) 15%,
        rgba(0, 0, 0, .95) 35%,
        rgba(0, 0, 0, .985) 66%,
        rgba(0, 0, 0, .998) 100%
      );
  }
}

@media (max-width: 560px) {
  .app[data-mode="player"][data-recording="true"] .player-console {
    width: min(398px, calc(100vw - 16px));
    padding-left: 10px;
    padding-right: 10px;
  }

  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .screen {
    transform: translateY(-18px) scale(.73);
    transform-origin: 50% 50%;
  }

  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .screen::before {
    top: -30px;
    bottom: -40px;
    left: -3.5%;
    right: -3.5%;
    inset-inline: -3.5%;
    border-radius: 52px;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, .66) 0%,
      rgba(0, 0, 0, .76) 18%,
      rgba(0, 0, 0, .84) 48%,
      rgba(0, 0, 0, .82) 76%,
      rgba(0, 0, 0, .70) 100%
    );
    box-shadow: 0 42px 150px rgba(0, 0, 0, .76), 0 0 96px rgba(0, 0, 0, .42);
    -webkit-backdrop-filter: blur(20px) saturate(92%) brightness(.34);
    backdrop-filter: blur(20px) saturate(92%) brightness(.34);
    -webkit-mask-image: radial-gradient(ellipse 108% 104% at 50% 48%, #000 0%, #000 44%, rgba(0,0,0,.96) 70%, rgba(0,0,0,.62) 88%, transparent 100%);
    mask-image: radial-gradient(ellipse 108% 104% at 50% 48%, #000 0%, #000 44%, rgba(0,0,0,.96) 70%, rgba(0,0,0,.62) 88%, transparent 100%);
  }

  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .stage {
    padding: 11px 8px 0;
  }

  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .wave-shell {
    width: 92%;
    height: 50px;
  }

  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .meta-row,
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .scan-wrap {
    width: 94%;
  }
}


/* v9 cleanup --------------------------------------------------------------- */
/* Metadata should show the finished object only: rows, not loading UI. */
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .scan-top,
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .progress {
  display: none !important;
}
.app[data-mode="metadata"]:not([data-recording="true"]) #grim-simple-unfold .scanner {
  margin-top: 8px !important;
  padding-top: 0 !important;
}

/* Keep the orb bright enough; darken the recorder card instead of blanketing
   the whole scene too aggressively. */
.app[data-recording="true"]::after {
  background:
    radial-gradient(
      circle at 50% 54%,
      rgba(0, 0, 0, .36) 0%,
      rgba(0, 0, 0, .46) 17%,
      rgba(0, 0, 0, .62) 39%,
      rgba(0, 0, 0, .82) 70%,
      rgba(0, 0, 0, .93) 100%
    );
}

@media (max-width: 720px) {
  /* Bring back the sexy browse player sitting over the feed instead of a giant
     reserved white gutter. */
  .app[data-mode="browse"] .library-shell {
    padding-bottom: calc(96px + var(--safe-bottom)) !important;
  }

  .app[data-recording="true"]::after {
    background:
      radial-gradient(
        circle at 50% 55%,
        rgba(0, 0, 0, .40) 0%,
        rgba(0, 0, 0, .52) 16%,
        rgba(0, 0, 0, .66) 38%,
        rgba(0, 0, 0, .84) 68%,
        rgba(0, 0, 0, .94) 100%
      );
  }
}

@media (max-width: 560px) {
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .screen {
    transform: translateY(-16px) scale(.73);
  }

  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .screen::before {
    top: -28px;
    bottom: -38px;
    left: -3%;
    right: -3%;
    inset-inline: -3%;
    border-radius: 52px;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, .74) 0%,
      rgba(0, 0, 0, .82) 20%,
      rgba(0, 0, 0, .88) 50%,
      rgba(0, 0, 0, .86) 78%,
      rgba(0, 0, 0, .76) 100%
    ) !important;
    box-shadow: 0 42px 150px rgba(0, 0, 0, .66), 0 0 96px rgba(0, 0, 0, .36) !important;
    -webkit-backdrop-filter: blur(18px) saturate(96%) brightness(.56) !important;
    backdrop-filter: blur(18px) saturate(96%) brightness(.56) !important;
  }
}


/* v10 — restore the original compact floating browse player ----------------
   Surgical browse-only fix. Do not let the global responsive player contract
   stretch the always-armed mini player. */
@media (max-width: 720px) {
  .app[data-mode="browse"] .player-console {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(var(--safe-bottom) + 8px) !important;
    width: min(310px, calc(100vw - 16px)) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5px 12px 9px !important;
    border-radius: 18px !important;
    transform: translateX(-50%) !important;
  }

  /* Let the catalog visually continue beneath the floating card, like the
     reference build, instead of ending in a large blank safety gutter. */
  .app[data-mode="browse"] .library-shell {
    padding-bottom: calc(48px + var(--safe-bottom)) !important;
  }

  .app[data-mode="browse"] .surface-handle {
    top: -22px;
    left: 50%;
  }
}


/* v11 — performance architecture ------------------------------------------ */
@media (max-width: 720px) {
  /* The floating player is already almost opaque. Blurring the scrolling grid
     beneath it forced Safari to repaint a large backdrop on every scroll tick. */
  .app[data-mode="browse"] .player-console {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255,255,255,.975) !important;
  }

  .app[data-mode="browse"] .track-card {
    contain: layout paint style;
  }
/* Preserve the dark translucent recorder plate without asking WebKit to live-
     blur a moving WebGL canvas behind a huge masked element every frame. */
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold .screen::before {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.74) 0%,
      rgba(0,0,0,.82) 20%,
      rgba(0,0,0,.88) 50%,
      rgba(0,0,0,.86) 78%,
      rgba(0,0,0,.76) 100%
    ) !important;
  }

  #recordingPrivateSetup {
    -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
    backdrop-filter: blur(8px) saturate(110%) !important;
  }

  #recordingPrivateSetup .rs-row,
  #recordingPrivateSetup .rs-code,
  #recordingPrivateSetup .rs-palette,
  #recordingStartButton {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}