/* Lenci App maker — the runtime's layout (v3/app-runtime.js, COMPOSER-CONTRACT §3.2). Only under html[data-app]: the normal Studio is
   untouched. The placement of each component (grid-area, phone order, hidden values) is written by app-runtime.js into #app-layout. */
html[data-app="loading"] .main { visibility: hidden; }
html[data-app="loading"] .app::after { content: ""; position: fixed; inset-inline-start: 50%; top: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; border: 2px solid rgba(139,92,246,.25); border-top-color: #a78bfa; animation: appSpin .8s linear infinite; }
@keyframes appSpin { to { transform: rotate(360deg); } }

html[data-app="on"] :is(.stagepane, .stage-toolbar, .inspector, #sections) { display: contents !important; }
html[data-app="on"] :is(.stagepane, .inspector) { animation: none; }
html[data-app="on"] :is(.stage-holder, #format-chips, #shot-chips, .tb-view, .tb-out, #shotlist, #ingredients, #plan-sticky, #sections > details.section, .app-tabs) { min-width: 0; min-height: 0; margin: 0; }

@media (min-width: 901px) {
  html[data-app="on"] .main { display: grid !important; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: repeat(16, minmax(0, 1fr)); gap: 10px; padding: 12px 16px 14px; min-height: 0; overflow: hidden; position: relative; }
  html[data-app="on"] :is(#format-chips, #shot-chips, .tb-view) { align-self: center; justify-self: start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  html[data-app="on"] .tb-out { align-self: center; flex-wrap: nowrap; min-width: 0; }
  html[data-app="on"] .stage-holder { align-self: stretch; justify-self: stretch; padding: 0; }
  html[data-app="on"] #sections > details.section { overflow: auto; align-self: stretch; overscroll-behavior: contain; }
  html[data-app="on"] #plan-sticky { overflow: auto; align-self: stretch; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
  html[data-app="on"] :is(#shotlist, #ingredients) { align-self: stretch; overflow: auto; padding: 0; }
  html[data-app="on"] #ingredients .dropzone { height: 100%; }
  html[data-app="on"] #three-bar { align-self: start; z-index: 6; margin: 10px; background: rgba(14,14,22,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  html[data-app="on"] .results-strip { align-self: end; z-index: 6; margin: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(14,14,22,.9); border: 1px solid var(--line); }
  html[data-app="on"] .fx-panel { position: relative !important; inset: auto !important; top: auto !important; max-height: none !important; align-self: stretch; z-index: 20; }
  html[data-app="on"] .studio-draft-status { position: fixed; bottom: calc(var(--sheet-h) + 10px); inset-inline-start: 16px; z-index: 30; margin: 0; max-width: 420px; }
}
@media (max-width: 900px) {
  html[data-app="on"] .main { display: flex !important; flex-direction: column; gap: 10px; padding: 10px 0 14px; }
  html[data-app="on"] :is(#format-chips, #shot-chips, .tb-view, .tb-out, #shotlist, #ingredients, #plan-sticky, .app-tabs) { margin-inline: 12px; }
  html[data-app="on"] #sections > details.section { margin-inline: 12px; }
}

/* the tabbed controls panel */
.app-tabs { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.035); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; align-self: center; }
.app-tabs::-webkit-scrollbar { display: none; }
.app-tab { flex: none; border: 0; background: transparent; color: var(--muted); font: 600 11.5px/1 var(--display); padding: 7px 11px; border-radius: 999px; white-space: nowrap; transition: color var(--t), background var(--t); }
.app-tab:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.app-tab[aria-selected="true"] { color: #fff; background: var(--active); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 12px rgba(139,92,246,.35); }
.app-tab:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }

/* the app's name beside the scene name */
.app-badge { margin-inline-start: 4px; display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 260px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--ink); text-decoration: none; font: 600 11.5px/1.1 var(--display); white-space: nowrap; transition: border-color var(--t), background var(--t); }
.app-badge:hover { border-color: rgba(168,85,247,.6); background: rgba(139,92,246,.1); }
.app-badge-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--app-color, #8b5cf6); box-shadow: 0 0 8px var(--app-color, #8b5cf6); }
.app-badge-name { overflow: hidden; text-overflow: ellipsis; }
.app-badge-edit { color: var(--accent-2); font-weight: 500; }
.app-badge-edit::before { content: "·"; margin-inline-end: 6px; color: var(--dim); }
/* the badge must never push the top bar onto a second row (it did at 1536 px with Inspire me and Concepts on): the Studio Pro pill
   gives way to it, and below 1720 px it shows only the app's name */
html[data-app="on"] .top .pro { display: none; }
@media (max-width: 1720px) { .app-badge-edit { display: none; } .app-badge { max-width: 180px; } }
@media (max-width: 700px) { .app-badge { max-width: 120px; } }

/* a behaviour's note at the top of its section, and the runtime's notice */
.app-note { margin: 0 12px 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(139,92,246,.3); background: rgba(139,92,246,.08); color: var(--accent-2); font-size: 12px; line-height: 1.45; }
.app-notice { position: fixed; top: 64px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 60; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(18,18,28,.96); color: var(--ink); font-size: 13px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
[dir="rtl"] .app-notice { transform: translateX(50%); }