/* Results, collapsible instructions, history: a single normal-flow column. */
.production-main.has-result-help{grid-template-columns:minmax(0,1fr)}
.production-main.has-result-help>.workspace{grid-template-columns:minmax(0,1fr) clamp(280px,28%,360px);gap:20px}
.production-main.has-result-help .kind-top{grid-column:1;grid-row:1}
.production-main.has-result-help .control-main{grid-column:1;grid-row:2}
.production-main.has-result-help .side{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px;position:static;inset:auto;height:auto;max-height:none;min-height:0}
.production-main.has-result-help .side>*{flex:0 0 auto;grid-column:auto;grid-row:auto;margin:0;min-width:0;box-sizing:border-box}
.production-main.has-result-help .side .stage-wrap{order:0}
.production-main.has-result-help .side .stage-help{order:1;position:static;inset:auto;max-height:none;overflow:visible;padding:0;width:100%}
.production-main.has-result-help .side .history{order:2;height:auto;max-height:560px;min-height:160px;width:100%}
.production-main.has-result-help .stage-help-details{border:1px solid var(--line);border-radius:12px;padding:0 16px;background:#101725}
.production-main.has-result-help .stage-help-details>summary{padding:14px 0}
.production-main.has-result-help .stage-help-body{padding:0 0 18px}
.header-system-status{position:relative;margin-left:auto;flex:0 1 auto}
.header-system-status>summary{cursor:pointer;list-style:none;padding:6px 10px;border:1px solid transparent;border-radius:8px}
.header-system-status>summary::-webkit-details-marker{display:none}
.header-system-status>summary:hover,.header-system-status[open]>summary{background:#ffffff05;border-color:var(--line)}
.header-system-status .header-monitor{margin:0}
.header-system-status>.job-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(420px,calc(100vw - 32px));box-sizing:border-box;max-height:70dvh;overflow:auto;z-index:90;box-shadow:0 20px 70px #0009}
.system-status-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;font-size:13px}
.system-status-heading button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:#171e30;cursor:pointer}
@container production (max-width:950px){.production-main.has-result-help>.workspace{grid-template-columns:minmax(0,1fr)}.production-main.has-result-help .side{grid-column:1;grid-row:3}}
@media(max-width:650px){.header-system-status{margin-left:0}.header-system-status>.job-panel{right:auto;left:0}}
/* ヘッダーはぼかし（backdrop-filter）で独自の重なり順を持つため、ヘッダーごと前面に出し、
   開いた処理一覧が制作タブの下に回り込まないようにする */
.top{position:relative}.top:has(.header-system-status[open]){z-index:500}
/* 縦スクロール時の追従：ヘッダー高さは director-design で 64px。帯はその直下に密着させる */
:root:not(#_) .director-design .shell>.top{position:sticky;top:0;z-index:450}
:root:not(#_) .director-design .shell>.top:has(.header-system-status[open]){z-index:500}
:root:not(#_) .director-design .studio-heading{position:sticky;top:64px;z-index:420;background:linear-gradient(180deg,#050c17f0,#06101ce6)!important;backdrop-filter:blur(14px)}
@media(max-width:1150px){:root:not(#_) .director-design .shell>.top{position:relative}:root:not(#_) .director-design .studio-heading{top:0}}
/* GPU・処理状況：2行（1行目＝見出しと「処理一覧を開く」、2行目＝GPU・VRAM と処理件数）で縦幅を抑える */
.header-system-status>summary{padding:5px 12px;row-gap:2px}
.header-system-status .header-monitor{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:0;white-space:nowrap;line-height:1.5}
.header-system-status .header-monitor>#headerJobs::before{content:'·';margin:0 7px;color:#6f7d99}
.header-system-status .header-monitor-title,.header-system-status .header-monitor-action{line-height:1.5}
:root:not(#_) .header-system-status :is(.header-monitor,.header-monitor-title,.header-monitor-action){font-size:12px}
@media(max-width:650px){.header-system-status{max-width:100%;min-width:0}.header-system-status .header-monitor{flex-wrap:wrap;white-space:normal}.header-system-status .header-monitor>#headerJobs::before{display:none}.header-system-status .header-monitor>span{flex-basis:100%}}
/* 帯（サブヘッダー）を画面端まで：shell 左右22pxを区画ごと打ち消し、帯だけ全幅にする */
:root:not(#_) .director-design .shell>.cinovex-workspace{margin-left:-22px!important;margin-right:-22px!important;width:auto!important;max-width:none!important}
:root:not(#_) .director-design .shell .living-storyboard{padding-top:0!important;padding-left:22px!important;padding-right:22px!important;box-sizing:border-box}
:root:not(#_) .director-design .living-storyboard>.studio-heading{
  box-sizing:border-box!important;
  width:calc(100% + 44px)!important;max-width:none!important;
  margin-top:0!important;margin-bottom:0!important;
  margin-left:-22px!important;margin-right:-22px!important;
  padding-left:22px!important;padding-right:22px!important;
  border:0!important;border-radius:0!important;
}
:root:not(#_) .director-design .living-storyboard>.studio-heading>.director-page-intro{padding-left:0!important}
/* 区画の中でスクロールする画面では、帯を区画の上端に置く（ヘッダーの下に追従させるのはページ全体がスクロールする画面だけ） */
:root:not(#_) .director-design:is(.canvas-viewport-mode,.director-board-window) .studio-heading{top:0}
/* 帯の下地：下に向かってぼかしながら透けていく（境界線は引かない）。下地は疑似要素で描き、帯の少し下までフェードさせる */
:root:not(#_) .director-design .living-storyboard>.studio-heading{background:transparent!important;backdrop-filter:none!important;border-bottom-color:transparent!important;isolation:isolate;position:sticky}
:root:not(#_) .director-design .living-storyboard>.studio-heading::before{content:"";position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#050c17f2 0%,#050c17d6 58%,#050c1700 100%);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
@media(max-width:650px){
  :root:not(#_) .director-design .shell>.cinovex-workspace{margin-left:-10px!important;margin-right:-10px!important}
  :root:not(#_) .director-design .shell .living-storyboard{padding-left:10px!important;padding-right:10px!important}
  :root:not(#_) .director-design .living-storyboard>.studio-heading{
    width:calc(100% + 20px)!important;
    margin-left:-10px!important;margin-right:-10px!important;
    padding-left:10px!important;padding-right:10px!important;
  }
}