/* Phone-only public shell and non-editor controls. Editor panels belong to
   studio-v5.css. Nothing in this module overrides the approved desktop. */
.mobile-bottom-nav,.mobile-nav-open {display:none}
.mobile-navigation:not([open]) {display:none}
@media (max-width:900px) {
  body[data-studio-version="5"] {
    --mobile-bottom-height:68px;
    --mobile-bottom-space:calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom,0px));
    scroll-padding-top:80px;
    scroll-padding-bottom:calc(var(--mobile-bottom-space) + 16px);
  }
  body[data-studio-version="5"] .shell,
  body[data-studio-version="5"] .shell.nav-collapsed {grid-template-columns:minmax(0,1fr)}
  body[data-studio-version="5"] .sidebar {display:none}
  body[data-studio-version="5"] .shell>.main {min-width:0}
  body[data-studio-version="5"]:not([data-page="editor"]) .shell>.main {
    padding-bottom:calc(var(--mobile-bottom-space) + 16px);
  }
  body[data-studio-version="5"] .topbar {
    min-height:64px;flex-wrap:nowrap;gap:8px;
    padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));
  }
  body[data-studio-version="5"] .topbar h1 {min-width:0;flex:1 1 auto;font-size:22px;line-height:1.35;overflow-wrap:anywhere}
  body[data-studio-version="5"] .topbar .spacer,
  body[data-studio-version="5"] .topbar .crumb {display:none}
  body[data-studio-version="5"] .topbar .user-chip {
    width:auto;flex:none;margin-left:auto;padding:0;max-width:92px;
    gap:6px;background:transparent;border-radius:0;
  }
  body[data-studio-version="5"] .topbar .user-chip .avatar {width:28px;height:28px;font-size:13px}
  body[data-studio-version="5"] .topbar .user-chip>div:last-child {display:block;min-width:0}
  body[data-studio-version="5"] .topbar .u-role {display:none}
  body[data-studio-version="5"] .topbar .u-name {font-size:13px;max-width:56px}
  body[data-studio-version="5"] .mobile-nav-open {
    display:flex;align-items:center;justify-content:center;gap:4px;
    flex:none;min-width:44px;min-height:44px;padding:4px;
    border:1px solid #577C6A;border-radius:10px;background:#F7FAF2;color:#183E35;font:inherit;
  }
  .mobile-nav-open svg {width:20px;height:20px}
  .mobile-nav-open-label {font-size:12px}
  body[data-studio-version="5"]:not([data-page="editor"]) .mobile-nav-open {display:none}
  body[data-studio-version="5"][data-page="editor"] .topbar {min-height:64px;padding-block:calc(10px + env(safe-area-inset-top,0px)) 10px}
  body[data-studio-version="5"][data-page="editor"] .topbar h1 {font-size:20px;white-space:nowrap}
  body[data-studio-version="5"][data-page="editor"] .topbar .user-chip>div:last-child {display:none}
  body[data-studio-version="5"] .mobile-bottom-nav {
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;
    position:fixed;inset:auto 0 0;z-index:80;
    padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
    min-height:var(--mobile-bottom-height);border-top:1px solid #B3CCBE;background:#FCFDFB;
  }
  body[data-studio-version="5"][data-page="editor"] .mobile-bottom-nav {display:none}
  .mobile-bottom-nav :is(a,button) {
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-width:0;min-height:54px;padding:6px 2px;border:0;border-radius:10px;
    background:transparent;color:#3F6254;font:inherit;font-size:12px;font-weight:500;
    line-height:1.35;text-decoration:none;cursor:pointer;touch-action:manipulation;
  }
  .mobile-bottom-nav :is(a[aria-current="page"],button.is-current) {background:#E5F1DC;color:#183E35;font-weight:700}
  .mobile-bottom-nav svg {width:22px;height:22px;display:block}
  .mobile-bottom-nav :is(a,button):focus-visible {outline:3px solid #236D5D;outline-offset:0}
  .mobile-navigation {
    position:fixed;inset:0 0 0 auto;margin:0;width:min(360px,calc(100% - 24px));max-width:none;
    height:100dvh;max-height:100dvh;padding:calc(20px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 20px;
    border:0;border-left:1px solid #B3CCBE;background:#FCFDFB;color:#183E35;
    overflow-y:auto;overscroll-behavior:contain;box-shadow:-12px 0 32px #183E3525;
  }
  .mobile-navigation::backdrop {background:#183E3570}
  .mobile-navigation-head {display:flex;align-items:center;justify-content:space-between;gap:16px}
  .mobile-navigation-head h2 {margin:0;font-size:22px;font-weight:650;line-height:1.4}
  .mobile-navigation-head button {min-height:44px;padding:8px 12px;border:1px solid #577C6A;border-radius:10px;background:white;color:#183E35;font:inherit;font-size:14px}
  .mobile-navigation-account {margin:8px 0 20px;color:#3F6254;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
  .mobile-navigation-group {display:grid;gap:8px}
  .mobile-navigation-group+.mobile-navigation-group {margin-top:16px;padding-top:16px;border-top:1px solid #D3E0D5}
  .mobile-navigation-group a,.mobile-navigation-logout {
    display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 12px;
    border:0;border-radius:10px;background:transparent;color:#183E35;font:inherit;font-size:15px;line-height:1.5;text-decoration:none;overflow-wrap:anywhere;touch-action:manipulation;
  }
  .mobile-navigation-group a[aria-current="page"] {background:#236D5D;color:white;font-weight:600}
  .mobile-navigation :is(a,button):focus-visible {outline:3px solid #236D5D;outline-offset:2px}
  .mobile-navigation-group svg,.mobile-navigation-logout svg {display:block;width:22px;height:22px;flex:none}
  .mobile-navigation-logout {margin-top:16px;border-top:1px solid #D3E0D5;width:100%;border-radius:0;text-align:left;cursor:pointer}
  body[data-studio-version="5"]:not([data-page="editor"]) .content {
    padding:20px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));
  }
  body[data-studio-version="5"][data-page="library"] .content {padding:0}
  body[data-studio-version="5"] #lib-root :is(.lib-bar,.lib-results) {padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
  body[data-studio-version="5"] #view .culture-rule-directory button,
  body[data-studio-version="5"] #view .home-v5-recent-tools :is(a,button) {min-height:44px}
  body[data-studio-version="5"]:not([data-page="editor"]) #view :is(.btn,.chip,summary) {min-height:44px}
  body[data-studio-version="5"]:not([data-page="editor"]) #view :is(input,select,textarea).input {font-size:16px;min-height:44px}
  body[data-studio-version="5"]:not([data-page="editor"]) #view :is(button,a,summary,input,select,textarea) {
    scroll-margin-top:88px;scroll-margin-bottom:calc(var(--mobile-bottom-space) + 16px);
  }
  body[data-studio-version="5"]:not([data-page="editor"]) .plan-grid {grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
  body[data-studio-version="5"]:not([data-page="editor"]) .plan-card .cover {height:auto;aspect-ratio:16/9;flex:none;min-height:0;overflow:hidden}
  body[data-studio-version="5"]:not([data-page="editor"]) .plan-card .cover img {position:absolute;inset:0;min-height:0;min-width:0;width:100%;height:100%;object-fit:contain}
  body[data-studio-version="5"]:not([data-page="editor"]) .plan-card .p-body>b {font-size:16px;overflow-wrap:anywhere}
  body[data-studio-version="5"]:not([data-page="editor"]) .plan-card .p-meta {font-size:13px;overflow-wrap:anywhere}
  body[data-studio-version="5"]:not([data-page="editor"]) .p-tabs {gap:8px;flex-wrap:wrap}
  body[data-studio-version="5"]:not([data-page="editor"]) .p-tabs .chip {padding:8px 12px;font-size:14px;white-space:normal}
  body[data-studio-version="5"]:not([data-page="editor"]) .plans-controls {gap:16px;padding:16px}
  body[data-studio-version="5"]:not([data-page="editor"]) .plan-card .p-ops {gap:8px}
  body[data-studio-version="5"]:not([data-page="editor"]) .plan-card .p-ops :is(a,button) {white-space:normal}
  body[data-studio-version="5"] .toast-wrap {bottom:calc(var(--mobile-bottom-space) + 16px);right:16px;max-width:calc(100vw - 32px);top:auto;pointer-events:none}
  body[data-studio-version="5"][data-page="editor"] .toast-wrap,
  body[data-studio-version="5"].login-body .toast-wrap {bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
  @media (max-width:360px) {
    .mobile-nav-open-label {display:none}
    body[data-studio-version="5"] .topbar h1 {font-size:20px}
    body[data-studio-version="5"] .mobile-bottom-nav {gap:0;padding-inline:4px}
    .mobile-bottom-nav :is(a,button) {font-size:12px}
  }
  @media (prefers-reduced-motion:reduce) {
    .mobile-bottom-nav :is(a,button),.mobile-navigation :is(a,button) {transition:none}
  }
}