/* Social Studio v0.4.16 — additive responsive/mobile hardening.
   Loaded after the existing stylesheet so desktop behavior remains unchanged. */
html,body{max-width:100%;overflow-x:hidden}
img,video{max-width:100%}
.table-wrap,.review-block,.panel,.production-card,.business-card,.connection-card,.influencer-card,.workflow-card,.provider-card,.idea-card{min-width:0}
.table-wrap{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.review-block pre{max-width:100%;overflow:auto;overflow-wrap:anywhere}
.card-body,.meta,.story-shot-prompt,.code-note,.warning,.success-box{overflow-wrap:anywhere;word-break:break-word}
.mobile-nav-toggle,.mobile-nav-backdrop{display:none}

@media (pointer:coarse){
  .btn:not(.small),nav button,select,input{min-height:44px}
  .icon-btn{min-width:44px;min-height:44px}
}

@media(max-width:820px){
  body.mobile-nav-locked{overflow:hidden}
  .app-shell{display:block;min-height:100dvh}
  .main{width:100%;min-width:0}
  .sidebar{
    position:fixed;z-index:80;inset:0 auto 0 0;width:min(320px,88vw);height:100dvh;
    padding:16px 12px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch;
    overflow:hidden;background:#0c0f12;border-right:1px solid #343a43;box-shadow:18px 0 60px #000b;
    transform:translateX(-105%);transition:transform .2s ease
  }
  .app-shell.mobile-nav-open .sidebar{transform:translateX(0)}
  .sidebar .logo-row{justify-content:flex-start;padding:4px 8px 16px;flex:0 0 auto}
  .sidebar .logo-row>div:last-child{display:block}
  .sidebar .logo-row strong,.sidebar .logo-row span,.sidebar .sidebar-foot span,.sidebar .text-btn{display:block}
  .sidebar nav{display:flex;flex-direction:column;gap:3px;overflow:auto;overscroll-behavior:contain;padding-right:3px}
  .sidebar nav button{font-size:12px;justify-content:flex-start;min-height:44px;flex:0 0 auto;padding:10px 11px}
  .sidebar nav button span{display:inline-block;width:22px;font-size:10px}
  .sidebar-foot{display:flex;margin-top:auto;padding:14px 10px 2px;flex:0 0 auto}
  .mobile-nav-backdrop{display:block;position:fixed;z-index:70;inset:0;background:#0009;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s ease}
  .mobile-nav-backdrop.show{opacity:1;pointer-events:auto}
  .mobile-nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);
    border-radius:11px;background:var(--panel2);color:var(--text);font-size:20px;line-height:1
  }
  .topbar{
    position:sticky;top:0;z-index:35;height:auto;padding:10px 14px 12px;display:grid;
    grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px;
    background:rgba(9,11,13,.94);backdrop-filter:blur(12px)
  }
  .topbar>div:not(.top-actions){min-width:0}
  .topbar .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar h1{font-size:22px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-actions{grid-column:1/-1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .top-actions select{min-width:0;width:100%}
  .top-actions .btn{white-space:nowrap}
  .view{padding:16px 14px calc(64px + env(safe-area-inset-bottom));max-width:none}
  .production-choice,.cards,.cards.two,.review-grid,.form-grid,.story-columns,.asset-check-grid,.character-reference-grid,.method-action-grid{grid-template-columns:1fr}
  .production-card{min-height:0;padding:18px;border-radius:16px}
  .production-card h2{font-size:22px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .metric-card{padding:14px}.metric-card b{font-size:24px}
  .section-head{align-items:flex-start;gap:9px;flex-wrap:wrap;margin-top:20px}
  .section-actions,.actions,.hero-actions,.workflow-filter-bar{max-width:100%;flex-wrap:wrap}
  .card-top,.card-foot,.workflow-ready-row,.story-scene-head,.calendar-toolbar{flex-wrap:wrap}
  .card-foot{align-items:flex-start}
  .card-foot>.actions{width:100%}
  .form-grid .full,.story-columns>div:last-child{grid-column:auto}
  .form-actions{flex-wrap:wrap}
  .form-actions .btn{min-height:44px}
  .split-tabs,.story-project-tabs{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .story-project-tabs{margin-left:-14px;margin-right:-14px;padding:0 14px 5px}
  .story-project-tab{min-width:min(78vw,280px);scroll-snap-align:start}
  .story-project-tabs{scroll-snap-type:x proximity}
  .story-hero{align-items:flex-start;flex-direction:column;padding:16px}
  .story-hero h2{font-size:23px}
  .compute-grid,.character-library-grid,.media-library-grid,.story-assets{grid-template-columns:1fr}
  .compute-grid{min-width:0}
  .compact-select{display:grid;grid-template-columns:1fr}
  .compact-select select{min-width:0}
  .table{min-width:720px}
  .calendar-grid{grid-template-columns:repeat(7,minmax(118px,1fr));overflow-x:auto;overscroll-behavior-x:contain}
  .day{min-height:104px}
  .media-preview{max-height:62dvh}
  .asset-preview-wrap{min-height:140px}
  select,input,textarea{font-size:16px}
  .toast{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));text-align:center}
  .login-shell{padding:16px}
  .login-card{width:100%;max-width:430px;padding:22px}
  .modal{padding:8px;place-items:center}
  .modal-card,.modal-card.wide{width:100%;max-width:100%;max-height:calc(100dvh - 16px)}
}

@media(max-width:560px){
  .top-actions{grid-template-columns:1fr}
  .top-actions .btn{width:100%}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-actions{width:100%}
  .section-actions .btn{flex:1 1 auto}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .form-actions{flex-direction:column}
  .form-actions .btn{width:100%}
  .check-row{gap:10px}
  .calendar-toolbar{align-items:stretch;gap:8px}
  .calendar-toolbar .btn{flex:1 1 auto}
  .modal{padding:0}
  .modal-card,.modal-card.wide{
    width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border-left:0;border-right:0;padding:16px 14px calc(20px + env(safe-area-inset-bottom))
  }
  .modal-head{position:sticky;top:-16px;z-index:2;background:#101317;padding-top:14px}
  .modal-head h2{font-size:17px}
  .asset-preview,.character-thumb .asset-preview{max-height:58dvh}
}

@media(max-width:390px){
  .view{padding-left:10px;padding-right:10px}
  .stats-grid{grid-template-columns:1fr}
  .btn.small{padding:7px 9px}
}