/* Studio 6.0 · mobile-first interaction layer
   Loaded after the desktop theme so narrow screens get a deliberate app shell,
   not a compressed desktop sidebar. */
@media (max-width: 850px) {
  :root { --studio-mobile-nav-h: 72px; }

  html { scroll-padding-top: 86px; }
  body { padding-bottom: calc(var(--studio-mobile-nav-h) + env(safe-area-inset-bottom)); }
  #app { display: block; min-height: 100dvh; }

  .side {
    position: fixed !important;
    z-index: 70;
    inset: auto 0 0 !important;
    display: block !important;
    width: 100% !important;
    height: calc(var(--studio-mobile-nav-h) + env(safe-area-inset-bottom)) !important;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(184, 221, 255, .18) !important;
    background: rgba(7, 12, 25, .92) !important;
    box-shadow: 0 -16px 48px rgba(0, 0, 0, .35) !important;
    backdrop-filter: blur(18px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  }
  .side .brand, .side .side-clock, .side .side-account { display: none !important; }
  .side nav {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(64px, 1fr);
    gap: 4px;
    width: 100%;
    height: 58px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav a, .side nav a:nth-child(n) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 64px;
    min-height: 54px;
    padding: 4px 5px !important;
    border: 0 !important;
    border-radius: 13px !important;
    scroll-snap-align: center;
    color: #91a1ba;
    background: transparent !important;
    box-shadow: none !important;
  }
  .side nav a span {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    font-size: 14px;
  }
  .side nav a b { display: block !important; font-size: 9px; line-height: 1; white-space: nowrap; }
  .side nav a.active { color: #e9fbff; background: rgba(114, 230, 255, .09) !important; }
  .side nav a.active span { box-shadow: 0 0 20px rgba(114, 230, 255, .16); }
  .side nav a[href="/studio/import.html"] { color: #bfefff; }

  main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 14px calc(30px + env(safe-area-inset-bottom)) !important;
  }
  .studio-header {
    position: sticky !important;
    z-index: 35;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 76px;
    margin: 0 -14px 16px;
    padding: calc(11px + env(safe-area-inset-top)) 14px 11px !important;
    border-bottom: 1px solid rgba(184, 221, 255, .12) !important;
    background: linear-gradient(180deg, rgba(7, 12, 25, .96), rgba(7, 12, 25, .82));
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
  }
  .studio-header > div:first-child { min-width: 0; flex: 1 1 180px; }
  .studio-header h1 { margin: 3px 0 1px; font-size: clamp(24px, 8vw, 32px); line-height: 1.05; }
  .studio-header p {
    max-width: 100%;
    overflow: hidden;
    margin: 3px 0 0;
    font-size: 10px;
    line-height: 1.45;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .studio-header .kicker { font-size: 7px; }
  .header-actions { display: flex; flex: 0 0 auto; gap: 7px; }
  .header-actions > a, .header-actions > button, .studio-header > button { min-height: 42px; padding: 9px 12px; }

  .stats {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(156px, 46vw);
    grid-template-columns: none !important;
    gap: 10px;
    overflow-x: auto;
    margin: 0 -14px 18px;
    padding: 0 14px 5px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stats article { min-height: 104px; padding: 15px; scroll-snap-align: start; }
  .stats article b { font-size: 25px; }

  .studio-home-launcher { margin-bottom: 21px; padding: 15px; border-radius: 17px; }
  .studio-home-launcher .section-title { align-items: flex-end; gap: 8px; }
  .studio-home-launcher .section-title h2 { font-size: 18px; }
  .studio-home-launcher .section-title > a { white-space: nowrap; }
  .launch-grid {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(215px, 76vw);
    grid-template-columns: none !important;
    gap: 9px;
    overflow-x: auto;
    margin: 0 -15px;
    padding: 2px 15px 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .launch-grid::-webkit-scrollbar { display: none; }
  .launch-grid > a, .launch-grid > a.launch-primary {
    grid-column: auto !important;
    min-height: 82px;
    padding: 13px !important;
    scroll-snap-align: start;
  }

  .project-view > .section-title { align-items: center; margin: 0 0 10px; }
  .studio-toolbar {
    position: sticky;
    z-index: 25;
    top: calc(76px + env(safe-area-inset-top));
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0 -14px 12px !important;
    padding: 9px 14px;
    background: rgba(7, 12, 25, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .studio-toolbar .search { grid-column: 1 / -1; min-height: 44px; }
  .studio-toolbar .search input, .studio-toolbar .sort select { min-height: 44px; font-size: 16px; }
  .studio-toolbar .sort { min-width: 0; }
  .studio-toolbar .sort select { width: 100%; padding-top: 7px; padding-bottom: 7px; }
  .studio-toolbar .filters { justify-content: flex-end; overflow-x: auto; scrollbar-width: none; }
  .studio-toolbar .filters::-webkit-scrollbar { display: none; }
  .studio-toolbar .filters button { flex: 0 0 auto; min-height: 42px; padding: 9px 13px; }

  .grid { grid-template-columns: 1fr !important; gap: 11px; }
  .project {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 13px !important;
    min-height: 146px;
    padding: 11px !important;
    border-radius: 16px !important;
  }
  .project .cover { width: 92px !important; height: 123px; }
  .project .p-main { align-content: center; gap: 4px; }
  .project h3 { font-size: 16px; }
  .project .p-summary { -webkit-line-clamp: 2; }
  .project .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
  .project .actions button { min-height: 39px; padding: 7px 9px; font-size: 10px; }
  .new-card { min-height: 102px !important; border-radius: 16px; }
  .grid-empty { min-height: 160px; padding: 24px 14px; }
  .grid-empty-import {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 14px;
    border: 1px solid rgba(114, 230, 255, .3); border-radius: 12px; color: #bfefff; text-decoration: none;
  }

  .detail { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .detail-cover {
    width: min(42vw, 176px) !important;
    max-width: none !important;
    margin: 0 auto;
    overflow: visible;
  }
  .detail-cover > img, .detail-cover > span { overflow: hidden; border-radius: 13px; }
  .cover-controls { left: 50%; right: auto; width: min(92vw, 430px); transform: translateX(-50%); }
  .cover-controls button, .cover-controls label { min-height: 40px; display: grid; place-items: center; }
  .detail-main { margin-top: 42px; border-radius: 17px !important; }
  .detail-tabs {
    position: sticky;
    z-index: 20;
    top: calc(76px + env(safe-area-inset-top));
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 9px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    background: rgba(10, 16, 31, .94);
  }
  .detail-tabs::-webkit-scrollbar { display: none; }
  .detail-tabs button { flex: 0 0 auto; min-width: 94px; min-height: 42px; scroll-snap-align: center; }
  .tab-content { padding: 17px 14px !important; }
  .tab-content h2 { font-size: 20px; }
  .facts {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 44vw);
    flex-wrap: nowrap !important;
    overflow-x: auto;
    margin: 0 -14px;
    padding: 0 14px 5px;
    scrollbar-width: none;
  }
  .facts::-webkit-scrollbar { display: none; }
  .facts span { min-width: 0 !important; }
  .tab-content .big { width: 100%; min-height: 46px; margin-top: 10px; }
  .export-cards { grid-template-columns: 1fr !important; }
  .export-cards button { min-height: 86px; }
  .delivery-tools, .quality-report > div { grid-template-columns: 1fr !important; }
  .delivery-publish-copy input, .delivery-publish-copy textarea,
  .cover-generator-grid select, .cover-generator-grid textarea,
  .api-editor input, .api-editor select, .modal input { font-size: 16px !important; }

  .hub-hero { min-height: 0; padding: 18px !important; border-radius: 18px; }
  .hub-hero h2 { font-size: 28px; }
  .api-list-panel, .api-editor { padding: 15px; border-radius: 17px; }
  .api-connection { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .api-connection > button { min-height: 40px; }
  .community-strip button, .api-editor-actions button { min-height: 44px; }
  .api-editor-actions { display: grid; grid-template-columns: 1fr 1fr; }

  .modal { z-index: 90 !important; align-items: end !important; padding: 0 !important; }
  .modal form {
    width: 100% !important;
    max-height: min(82dvh, 680px);
    overflow-y: auto;
    padding: 21px 17px calc(18px + env(safe-area-inset-bottom)) !important;
    border-radius: 22px 22px 0 0 !important;
  }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions > span { flex-basis: 100%; }
  .modal-actions button { flex: 1; min-height: 44px; }
  .inbox { right: 10px !important; bottom: calc(var(--studio-mobile-nav-h) + env(safe-area-inset-bottom) + 10px) !important; width: calc(100vw - 20px) !important; }
  .toast { bottom: calc(var(--studio-mobile-nav-h) + env(safe-area-inset-bottom) + 12px) !important; max-width: calc(100vw - 24px); }
}

@media (max-width: 420px) {
  .studio-header .workshop-entry { display: none; }
  .project { grid-template-columns: 80px minmax(0, 1fr) !important; min-height: 132px; }
  .project .cover { width: 80px !important; height: 107px; }
  .project .p-summary { display: none; }
  .project .actions { grid-template-columns: 1fr 1fr; }
  .project .actions .danger { grid-column: 1 / -1; min-height: 34px; }
  .stats { grid-auto-columns: minmax(145px, 60vw); }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 850px) {
  :root { --studio-mobile-nav-h: 62px; }
  .side nav { height: 48px; }
  .side nav a, .side nav a:nth-child(n) { min-height: 46px; }
  .side nav a span { width: 23px; height: 23px; }
  .studio-header { position: relative !important; }
  .studio-toolbar, .detail-tabs { top: 0; }
}