/* ============================================================
   NeuroArt Studio — Desktop / laptop adaptation
   ------------------------------------------------------------
   Viewed on a PC/laptop (wide viewport ≥ 940px) the mobile phone
   frame becomes a full desktop application: the app fills the
   window, the bottom tab bar becomes a left navigation rail, the
   bottom sheets become centred modal dialogs and content grids
   open up to use the extra width. Everything below the breakpoint
   (phones) keeps the original mobile shell untouched — this file
   only ever overrides styles inside the >= 940px media query.
   Same Aurum Studio design tokens, same components.
   ============================================================ */

@media (min-width: 940px) {

  /* ── Window: drop the phone frame, fill the viewport ── */
  body {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    background:
      radial-gradient(110% 90% at 50% -12%, #17151A 0%, var(--bg) 55%),
      var(--bg);
  }

  .grain { z-index: 90; }

  .device {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    /* translucent so the ambient aurum glows bleed through the whole window */
    background: linear-gradient(180deg, rgba(12,12,14,0.78) 0%, rgba(8,8,10,0.92) 100%);
  }
  .device__notch, .statusbar { display: none; }

  /* ── Application shell → 2 panes: left nav rail + content ── */
  .app {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "nav  appbar"
      "nav  screen"
      "nav  dock";
    overflow: hidden;
  }

  /* ── Left navigation rail (was the bottom tab bar) ── */
  .tabnav {
    grid-area: nav;
    display: flex;
    align-self: stretch;
    width: 268px;
    padding: 18px 14px 22px;
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(17,17,21,0.92) 0%, rgba(10,10,13,0.96) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 1px 0 0 rgba(255,255,255,0.02) inset;
  }
  /* keep the rail hidden on screens without a tab bar (sub-screens) */
  .tabnav[hidden] { display: none; }

  .tabnav__row {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    padding: 8px;
    border-radius: 24px;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .tabnav__item {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border-radius: var(--r-md);
  }
  .tabnav__item:hover { background: var(--surface); }
  .tabnav__item.is-active {
    color: var(--accent-2);
    background: linear-gradient(135deg, rgba(255,201,60,0.14), rgba(245,180,0,0.04));
  }
  .tabnav__label { font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }

  /* Create → becomes a full, prominent rail button */
  .tabnav__fab {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: var(--r-md);
  }
  .tabnav__star {
    width: 46px; height: 46px;
    box-shadow: 0 10px 24px -8px var(--accent-glow), 0 1px 0 rgba(255,255,255,0.4) inset;
  }
  .tabnav__star svg { width: 22px; height: 22px; }
  .tabnav__fab-label { font-size: 13px; letter-spacing: 0.02em; }

  /* ── App bar ── */
  .appbar {
    grid-area: appbar;
    padding: 16px 28px 14px;
  }
  .appbar__in { max-width: 1200px; margin: 0 auto; }
  .appbar__na { font-size: 16px; }
  .appbar__back:hover { background: var(--surface-2); }

  /* ── Content pane: centred reading column for clean line-lengths ── */
  .screen {
    grid-area: screen;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 28px 56px;
    scrollbar-width: thin;
    scrollbar-color: rgba(216,222,232,0.22) transparent;
  }
  .screen::-webkit-scrollbar { width: 10px; display: block; background: transparent; }
  .screen::-webkit-scrollbar-thumb { background: rgba(216,222,232,0.18); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
  .screen::-webkit-scrollbar-thumb:hover { background: rgba(216,222,232,0.3); border: 3px solid transparent; background-clip: content-box; }
  /* cap every top-level block so sections don't stretch to the window edges */
  .screen > * { width: 100%; max-width: 1200px; }

  /* ── Dock (primary action row) — centred, not stretched ── */
  .dock {
    grid-area: dock;
    padding: 14px 28px 24px;
  }
  .dock__row { max-width: 560px; margin: 0 auto; }
  .dock__hint { max-width: 560px; margin: 8px auto 0; }

  /* ── Grids open up ── */
  .tilegrid { grid-template-columns: repeat(3, 1fr); }
  .ctorgrid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .inspgrid { column-count: 3; column-gap: 8px; }
  @media (min-width: 1360px) {
    .inspgrid { column-count: 4; }
    .tilegrid { grid-template-columns: repeat(4, 1fr); }
  }

  /* ── Paywall: 4 cards in a row (no scroll on wide viewports), featured pops up ── */
  .pw-rail { overflow: visible; margin: 28px 0 4px; padding: 0; }
  .pw-rail > .pw-card { flex: 1 1 0; }
  .pw-dots { display: none; }
  .pw-card--feat { margin-top: -12px; padding-top: 38px; z-index: 1; }
  .pw-hero__title { font-size: 42px; }
  .pw-hero__lede { font-size: 15.5px; max-width: 60ch; }
  .pw-terms { max-width: 460px; }

  /* bigger generation / result stage */
  .genstage { min-height: 60vh; }
  .ghost { width: min(60%, 340px); }
  .result__art { max-width: 560px; max-height: 66vh; }
  .result__art .rs-prompt { font-size: 13px; }

  /* ── Bottom sheets → centred modal dialogs ── */
  /* Mobile hides the closed sheet by sliding it below the viewport; centred
     here, it must instead fade out — otherwise the closed sheet hangs in the
     middle of the screen (styles.css keeps `.sheet[hidden] { display:flex }`
     for the mobile slide animation). */
  .sheet {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: min(560px, 92vw);
    max-height: 84dvh;
    border-radius: 26px;
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-2), 0 0 0 1px rgba(255,255,255,0.04) inset;
    transition: transform .36s var(--ease-out), opacity .26s var(--ease-out), visibility 0s linear .36s;
  }
  .sheet.is-shown {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .36s var(--ease-out), opacity .26s var(--ease-out), visibility 0s;
  }
  .sheet__grip { display: none; }
  .sheet-veil.is-shown { opacity: 1; }

  /* ── Toast settles above the rail ── */
  .toast { left: calc(50% + 134px); }
}