/* Studio rooms in archive mode (platforms/studio-archive.js). Builds on studio.css: the same
   window, panes and classes as the demo rooms; only archive additions live here (state banner
   inside the chrome, project bar, positioned rulers/regions/clips, real waveforms, media). */
.studio-archive{height:780px}
.studio-archive .archive-state{flex-shrink:0;margin:0;border:0;border-bottom:1px solid #151515;background:#1e1e1e;color:#cfcfcf;padding:6px 12px;font-size:10px}
.studio-archive .archive-state strong{color:#f0ece4}
.studio-archive .archive-ready strong{color:#9fd3a7}
.studio-archive .archive-loading strong{color:#f3c58c}
.studio-archive .archive-preview{background:#3a2b14;color:#f6e6cc}
.studio-archive .archive-error{background:#3b1f1b;color:#f4d3cc}
.studio-archive .archive-locked,.studio-archive .archive-empty{background:#2a2824;color:#e2ddd2}
.studio-archive .archive-state .bevel{background:#3c3c3c;color:#e8e8e8;border:1px solid #111;border-radius:3px;padding:3px 9px;font-size:9px}

/* Project header: chooser, facts, and the standing structure-only label. */
.sa-projectbar{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:28px;padding:5px 12px;background:#2b2b2b;border-bottom:1px solid #151515;font-size:9px}
.sa-project-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sa-project-name b{font-weight:600}
.sa-facts{display:flex;flex-wrap:wrap;gap:2px 10px;color:#b8b8b8;font:8px var(--font-data)}
.sa-structure-label{margin-left:auto;padding:3px 6px;border:1px solid #5d4c33;border-radius:2px;color:#f1c48d;font:7px var(--font-system);letter-spacing:.05em;font-weight:400;white-space:nowrap}
.sa-chooser{display:flex;align-items:center;gap:6px;color:#b7b7b7;font-size:8px}
.studio-archive select{max-width:240px;padding:2px 4px;border:1px solid #111;border-radius:3px;background:#1b1b1b;color:#e6e6e6;font:9px var(--font-body)}
.sa-render-picker{display:none}
.sa-mode{display:none;padding:2px 6px;border-radius:2px;background:#1c1c1c;color:#cfcfcf;font:7px var(--font-data);white-space:nowrap}
.sa-mode-media{color:#9fd3a7}
.sa-mode-silent{color:#f1c48d}
.sa-pane-note{margin:8px 9px;color:#a8a8a8;font:8px/1.5 var(--font-data)}
.sa-not-exported{display:flex;flex-direction:column;gap:5px;max-width:420px;margin:14px auto;padding:10px 12px;border:1px dashed #5a5a5a;color:#bdbdbd;font:8px/1.5 var(--font-data);text-align:center}
.sa-not-exported strong{color:#f0d3a8;font:600 9px var(--font-body)}
.studio-archive .studio-transport button:disabled{opacity:.4;cursor:not-allowed}
.studio-archive .studio-lcd-meta small{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Rulers and markers placed by time. */
.studio-archive .sa-ruler{display:block;padding:0}
.studio-archive .sa-ruler>.sa-tick{position:absolute;top:0;bottom:0;padding:7px 0 0 4px;border-left:1px solid #6a6a6a;white-space:nowrap}
.sa-marker{position:absolute;top:3px;max-width:140px;padding:2px 4px;border-left:2px solid #f0b34a;background:#4f4329;color:#f6ead2;font:7px var(--font-data);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto}
.sa-marker b{font-weight:400}
.sa-marker-chapter{border-left-color:#ff8a3d;background:#5b3520}
.sa-marker-todo{border-left-color:#e05252;background:#4e2626}
.sa-marker-done{border-left-color:#59b36a;background:#26432c}
.sa-marker-strip{position:relative;height:17px;margin-top:2px;border-bottom:1px solid #303030}
.sa-marker-strip .sa-marker{top:1px}

/* Logic: tracks area scrolls in its own frame; headers stay put. */
.studio-archive .logic-main>.sa-tracks-scroll{flex:0 1 auto;max-height:310px;overflow:auto}
.studio-archive .logic-track-ruler{position:sticky;top:0;z-index:6;background:#343434}
.studio-archive .logic-track-label{position:sticky;left:0;z-index:5}
.studio-archive .logic-track-ruler>span:first-child{position:sticky;left:0;z-index:7}
.studio-archive .logic-track-label>span.sa-global-label{font-size:8px;color:#bdbdbd;padding-left:13px}
.studio-archive .sa-marker-track{height:22px;background:#2a2a2a}
.studio-archive .sa-marker-track .logic-track-label{background:#383838}
.studio-archive .logic-region{min-width:4px}
.studio-archive .logic-region b{overflow:hidden;text-overflow:ellipsis}
.studio-archive .sa-bounce-track{background:#262523}
.studio-archive .sa-bounce-track .logic-track-label{background:#3a3833}
.studio-archive .sa-bounce-track.selected .logic-track-label{background:#5a5750}
.studio-archive .sa-bounce-region{color:#26231f}
.studio-archive .sa-arrangement-empty{padding:18px 8px}
.sa-wave{display:block;width:100%;height:24px;fill:currentColor;opacity:.78}
.studio-archive .logic-region .sa-wave{height:25px}
.studio-archive .logic-bottom{min-height:140px}

/* Logic: Project Audio pane in the Library column. */
.studio-archive .sa-browser{min-height:0;overflow:auto}
.studio-archive .sa-browser>h3{text-align:left}
.sa-file-list{display:flex;flex-direction:column;gap:3px;padding:6px}
.studio-archive .sa-file{display:block;width:100%;padding:5px 6px;border:1px solid #1a1a1a;border-radius:3px;background:#2e2e2e;text-align:left}
.studio-archive .sa-file.selected{background:#45433f;border-color:#77746e;color:#f2f2f2}
.sa-file b{display:block;overflow:hidden;font-size:9px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.sa-file small{display:block;margin:2px 0 3px;color:#a2a2a2;font:7px var(--font-data)}
.sa-wave-mini{height:15px;color:#8fb5dc}
.sa-file-detail{padding:4px 6px 8px}
.studio-archive .studio-library-foot{padding:14px}
.sa-media{display:block;width:100%;max-width:100%}
.sa-audio{height:32px;color-scheme:dark}
.sa-media-note{margin:6px 0;padding:6px 7px;border-left:2px solid #d9a35a;background:#2f2a22;color:#e9dcc6;font:8px/1.5 var(--font-data)}
.sa-still{display:block;max-width:100%;max-height:100%;margin:auto;object-fit:contain}

/* Logic: Piano Roll of released notes; inspector and mixer notes. */
.studio-archive .sa-piano .piano-sidebar{overflow:hidden}
.studio-archive .sa-piano .piano-sidebar span{overflow-wrap:anywhere}
.sa-readonly{margin-top:auto;color:#8a8a8a;font:6px var(--font-data)}
.studio-archive .sa-piano-grid{overflow:auto;background:#252525}
.sa-piano-canvas{position:relative;height:100%;min-width:100%;background:repeating-linear-gradient(0deg,transparent 0 calc(100% / var(--rows) - 1px),#3a3a3a calc(100% / var(--rows) - 1px) calc(100% / var(--rows))),repeating-linear-gradient(90deg,#262626 0 59px,#3e3e3e 59px 60px)}
.studio-archive .sa-piano-canvas i{position:absolute;min-height:2px;border-radius:1px;box-shadow:inset 1px 1px #ffffff55;border:1px solid #0006}
.studio-archive .sa-editor-empty{align-items:center;justify-content:center;background:#2a2a2a}
.studio-archive .logic-inspector{overflow:auto}
.studio-archive .logic-inspector h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-archive .logic-channel-strip{align-items:stretch;padding:10px 8px}
.studio-archive .logic-channel-strip dl{padding:4px 0}
.studio-archive .logic-channel-strip .sa-pane-note{margin:4px 0}
.studio-archive .logic-channel-strip .track-toggles{justify-content:center}
.sa-level{color:#8c8c8c;font:6px var(--font-data);text-align:center}
.studio-archive .studio-channel .channel-name{display:block;width:100%;overflow:hidden;text-overflow:ellipsis}
.studio-archive span.channel-name{padding:5px 0;font-size:7px;text-align:center;min-height:23px}
.sa-mixer-empty{flex:1;display:flex;align-items:center;justify-content:center}
.studio-archive .master-channel .sa-level{margin-top:auto}

/* Final Cut / Resolve: browser tiles, viewer and positioned timeline items. */
.studio-archive .sa-art{background:var(--clip-color,#2c4f73);color:#f2f2f2}
.studio-archive .sa-art img{width:100%;height:100%;max-height:none;object-fit:cover}
.studio-archive .sa-art>.sa-art-kind{position:static;font:9px var(--font-system);letter-spacing:.05em;color:#ffffffd9;text-transform:uppercase}
.studio-archive .sa-art-audio{background:#2e5e3d;color:#a9dcb5}
.studio-archive .sa-art-image{background:#3d3a35}
.studio-archive .sa-art .sa-tile-wave{position:absolute;inset:auto 0 18% 0;height:45%;opacity:.9}
.sa-badge{position:absolute;top:3px;left:3px;padding:1px 3px;background:#000b;color:#fff;font:6px var(--font-system);font-style:normal;letter-spacing:.04em}
.studio-archive .browser-clip.sa-current .studio-art{box-shadow:0 0 0 1px #e1a35d}
.studio-archive .sa-browser-empty{grid-column:1/-1}
.studio-archive .sa-screen{background:#0d0d0d}
.studio-archive .sa-video{width:100%;height:100%;object-fit:contain;background:#000}
.sa-screen-empty{display:flex;flex-direction:column;gap:6px;max-width:320px;padding:14px;border:1px dashed #4d4d4d;color:#a9a9a9;font:8px/1.5 var(--font-data);text-align:center}
.sa-screen-empty strong{color:#e7e7e7;font:600 10px var(--font-body)}
.sa-audio-screen{display:flex;flex-direction:column;justify-content:center;gap:10px;width:100%;color:#7cc28e}
.sa-audio-screen .sa-screen-wave{height:46%;min-height:40px}
.sa-noform{color:#8a8a8a;font:8px var(--font-data);text-align:center}
.sa-still-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:100%;min-height:0}
.sa-still-screen .sa-still{min-height:0;flex:1}
.sa-title-text{white-space:pre-line;border-left:2px solid #9b6ab3;padding-left:6px}
.studio-archive .video-inspector .sa-pane-note{margin:8px 9px}
.studio-archive .sa-video-scroll{overflow:auto}
.studio-archive .sa-video-timeline{height:auto;min-height:100%;padding-bottom:10px}
.studio-archive .sa-video-timeline>.studio-ruler{position:relative}
.studio-archive .sa-vlane{min-height:46px;margin-top:6px}
.studio-archive .sa-vlane.video-title-lane{min-height:24px}
.studio-archive .sa-vlane.audio-lane{min-height:32px}
.studio-archive .sa-vlane .video-lane-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-lane-track{position:relative;flex:1;min-width:0}
.studio-archive .sa-clip{position:absolute;top:0;min-width:4px;margin:0;padding:3px 5px;overflow:hidden;text-align:left;white-space:nowrap}
.studio-archive .sa-clip b{display:block;overflow:hidden;font-size:8px;font-weight:500;text-overflow:ellipsis}
.studio-archive .timeline-clip.sa-clip{height:44px;background:linear-gradient(#0000 0 58%,#0000002e 58%),var(--clip-color)}
.studio-archive .timeline-clip.sa-clip>b{position:static;padding:0}
.studio-archive .title-region.sa-clip{height:21px;background:var(--clip-color);border-color:#b37acc;color:#ead5f4}
.studio-archive .audio-region.sa-clip{height:30px;background:var(--clip-color);border:1px solid #5ca96c;border-radius:3px;color:#e3f3e6}
.studio-archive .resolve-timeline .audio-region.sa-clip{border-radius:0;border-color:#4a9865}
.studio-archive .sa-clip.selected{box-shadow:inset 0 0 0 2px #f2cf47}
.studio-archive .sa-disabled{opacity:.45;background-image:repeating-linear-gradient(135deg,#0000 0 6px,#0004 6px 8px)}
.sa-gap{position:absolute;top:0;height:44px;border:1px dashed #4a4a4a;background:#2d2d2d}
.sa-transition{position:absolute;top:22px;z-index:2;height:18px;border:1px solid #9a9a9a;border-radius:2px;background:linear-gradient(135deg,#1c1c1c 49%,#7a7a7a 50%,#1c1c1c 51%);opacity:.9}
.sa-note-region{position:absolute;top:0;height:40px;padding:4px;border-radius:3px;background:#4ca978;color:#13261b;font-size:8px}
.studio-archive .sa-timeline-empty{padding:16px 0}
.studio-archive .sa-video-timeline .video-playhead-overlay{z-index:4}

/* Resolve pages. The page wrapper shares the demo class "resolve-deliver" with the inner
   grid; in this room the wrapper keeps the page column layout. */
.studio-archive .resolve-page.resolve-deliver{display:flex;flex-direction:column;height:auto;grid-template-columns:none}
.studio-archive .resolve-cut-overview>i{display:block;min-width:1px}
.studio-archive .resolve-cut-overview>i.sa-mini-gap{background:#2b2b2b}
.studio-archive .resolve-cut-overview button{min-width:3px}
.sa-mini{display:block;width:100%;height:100%}
.studio-archive .sa-nodes-empty{display:block;padding:10px;overflow:auto}
.studio-archive .resolve-color-clips button>.studio-art{height:46px}
.studio-archive .resolve-color-clips .studio-art>.sa-art-kind{display:block;font-size:7px}
.studio-archive .color-wheels,.studio-archive .resolve-scopes{overflow:auto}
.studio-archive .sa-fusion-single{grid-template-columns:1fr}
.studio-archive .fusion-workspace>.sa-not-exported{margin-top:28px}
.sa-render-list{display:flex;flex-direction:column;gap:3px;margin:0 0 10px;padding:0;list-style:none}
.studio-archive .sa-render-row{display:grid;grid-template-columns:1fr auto;gap:2px 6px;width:100%;padding:5px 6px;text-align:left;background:#333}
.studio-archive .sa-render-row.selected{background:#4a4540;border-color:#de7247}
.sa-render-row b{overflow:hidden;font-size:8px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.sa-render-row small{grid-column:1/-1;color:#a9a9a9;font:7px var(--font-data)}
.sa-render-row em{grid-row:1;grid-column:2;color:#e7b07a;font:6px var(--font-system);font-style:normal;text-align:right}
.studio-archive .render-settings h4{margin-top:4px;background:none;padding:6px 0;border:0}
.studio-archive .render-settings dl{padding:4px 0}

@media(max-width:1100px){.sa-mode{display:inline-block}}
@media(max-width:760px){
  .studio-archive{height:820px}
  .studio-logic .sa-render-picker{display:flex}
  .sa-structure-label{margin-left:0}
  .studio-archive .logic-main>.sa-tracks-scroll{max-height:300px}
  .studio-archive .sa-render-row em{display:none}
}
@media(max-width:450px){
  .studio-archive{height:860px}
  .sa-projectbar{padding:5px 8px;gap:3px 8px}
  .studio-archive select{max-width:100%}
  .sa-chooser{flex-wrap:wrap}
  .studio-archive .archive-state{padding:6px 8px;font-size:9px}
  .studio-archive .piano-sidebar{width:96px}
}