/* AdEQ — the script page's own stylesheet. * * THE FIRST WALL IN THE CSS, AND THE PATTERN FOR THE REST. * * Franz, 2026-09-22: "we obviously need a proper architectural foundaiton * mate that's done fully properly so we can continue the work". * * Every rule in this file is written under [data-screen="script"], which * app.js sets on for this screen and no other. That is not a naming * convention anybody has to remember: a selector in here CANNOT match an * element on the client page, the workspace page or Home, however careless * it is and however many class names two screens happen to share. * * WHY THIS FILE EXISTS AT ALL, in one example. `.page-head` is used by six * screens. The script page is the only one that makes it sticky, and the * whole of 2026-09-22 was spent moving it by two and eight and sixteen * pixels. Every one of those edits was two characters away from moving the * title row on Home, on Clients, on the report and on the workspace page — * and nothing in the codebase would have stopped it or even mentioned it. * Now it cannot happen. * * WHAT DOES NOT BELONG HERE. Anything another screen also needs: buttons, * inputs, chips, the type scale, the colour tokens, the popovers. Those live * in app.css and are more than half of it, which is why this looks like one * product rather than six. This file is only for what THIS screen decides * alone. * * Loaded after app.css, so where a rule here and a rule there tie on * specificity, this one wins — which is what "the screen decides" means. */ /** * A PAGE HEAD THAT STAYS. Used by the script page, where the document is four * screens long and scene 5 otherwise says nothing about which script it is. * * ITS SPACING IS PADDING, NOT MARGIN. A sticky bar's margin is transparent, so * the script would scroll through the gap under the title. The same 18px is * spent below the line instead, and travels with the bar. * * z-index 8: under the app header, which must stay on top of everything, and * under nothing else — the toolbar sits directly beneath this and they never * overlap. */ [data-screen="script"] .page-head.is-stuck-head { position: sticky; top: var(--header-h); z-index: 8; background: var(--paper); /* IT DOES NOT TRAVEL BEFORE IT STICKS. Franz, 2026-09-22: "the page shift up during sticky scroll this should never ever happen". `main` opens with 16px of padding, so the title began 68px down the viewport and pinned at 52 — it slid 11px on the first flick of the wheel and then stopped dead, taking the whole page up with it. That is the shift, and it is not sticky misbehaving: it is the bar resting somewhere other than where it sticks. So the bar is pulled up through that padding and given the same 16px back as its OWN padding. Its resting place and its stuck place are now the same pixel, so it never moves — and because the space above the title is the bar's own paper rather than the page's, nothing scrolls through the gap under the nav. No shadow, which Franz has rejected twice ("dont like that shadow scrioll under the header"). */ margin: calc(-1 * var(--s-2)) 0 0; padding: var(--s-2) 0; /* TWO PIXELS OF PAPER BELOW IT, PAINTED NOT LAID OUT. The toolbar hides the seam under this bar with its own background, but the Activity card cannot — it has a border and a rounded corner, so it has to rest BELOW the head rather than a pixel under it. That leaves a sub-pixel slot (0.4px on a 903px window) for the script to show through, which on a 2x screen is one bright device pixel under the title and reads as a torn line. A shadow costs no layout and closes it. */ box-shadow: 0 2px 0 var(--paper); } /* THE HEAD NO LONGER CHANGES SIZE AT ALL. Franz, 2026-09-22: "only the back button shouldnt move up at all along with the name". The lift used to be eight pixels off this bar's bottom padding, and every centred child took half of that — the arrow rose 4px while the title held still, which is worse than both moving. `align-self` did not save it, because the line box itself was shrinking. So the head is now a fixed height and the two bars slide UP INTO its bottom padding instead. That padding is empty paper, so there is nothing to paint over, and the head's children cannot move because nothing about the head changes. */ @media (prefers-reduced-motion: reduce) { [data-screen="script"] .page-head.is-stuck-head { transition: none; } } /* ── THE SCRIPT PAGE IN THE BULK PAGE'S SHAPE (2026-10-19) ───────────────────── Franz: "the description script need to be tabs like in bulk", "the other videos picker in top right", "same tool bar spacing vertically". The name row stays put with Other Videos on its right; the toolbar pins under the app header with 16px over its controls; the tabs pin under it; the rail pins level with the toolbar's controls. Exactly screen-bulk.css's numbers. */ [data-screen="script"] .page-head.sc-head { position: relative; top: auto; z-index: auto; margin: 0; padding: 0; box-shadow: none; background: none; flex-wrap: wrap; row-gap: var(--s-half); } [data-screen="script"] .page-head.sc-head::after { display: none; } /* THE NAME SITS ON THE PAGE MARGIN, as on every page. .script-title is a column and the shared h1 rule centres a column's items, which showed once the name took the full width of a phone. */ [data-screen="script"] .sc-head .script-title { align-items: flex-start; } [data-screen="script"] .sc-head .sc-switch { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: var(--s-1); height: var(--h-md); padding: 0 var(--s-1h); font-weight: 600; } [data-screen="script"] .scene-rail, [data-screen="script"] .scene-rail.is-stuck { position: static; transform: none; transition: none; /* UNDER THE TABS NOW (2026-11-03): 20 above its pills and 20 below them to the tab's content, the toolbar's own rhythm; 8 of the 20 below is its own paper, so a pinned bar has room under its pills. */ margin: 0 0 var(--s-1h); padding: calc(var(--s-2) + var(--s-half)) 0 var(--s-1); border-bottom: 0; background: var(--paper); flex-wrap: nowrap; gap: var(--s-1); } [data-screen="script"] .scene-rail .btn, [data-screen="script"] .scene-rail .chip { height: var(--h-md); } [data-screen="script"] .scene-rail .rail-dot { align-self: center; } [data-screen="script"] .sc-tabs { position: static; background: var(--paper); margin: 0; padding: var(--s-2) 0 0; border-bottom: 1px solid var(--rule-faint); } [data-screen="script"] .sc-tabs .subtab { padding: var(--s-1) 0 var(--s-1h); } [data-screen="script"] .sec.sc-tabbed { margin-top: 0; margin-bottom: 0; } [data-screen="script"] .sec.sc-tabbed > .sec-head { display: none; } [data-screen="script"] .sec.sc-tabbed[hidden], [data-screen="script"] .sc-video[hidden] { display: none; } [data-screen="script"] .live-rail { position: static; top: auto; transform: none; transition: none; max-height: none; overflow: visible; margin-top: var(--s-2); } [data-screen="script"] [id^="scene-"] { scroll-margin-top: calc(var(--header-h) + var(--sc-tabs-h, 64px) + var(--s-2) + var(--s-half) + var(--h-md) + var(--s-1) + var(--s-2)); } @media (min-width: 1024px) { [data-screen="script"] .scene-rail, [data-screen="script"] .scene-rail.is-stuck { position: sticky; top: calc(var(--header-h) + var(--sc-tabs-h, 0px)); z-index: var(--z-sticky); height: calc(var(--s-2) + var(--s-half) + var(--h-md) + var(--s-1)); box-sizing: border-box; } /* THE TABS PIN FIRST, the toolbar under them (script-view.js measures the tabs into --sc-tabs-h). */ [data-screen="script"] .sc-tabs { position: sticky; z-index: var(--z-sticky); top: var(--header-h); } /* scroll: the rail is pinned, so when its cards are taller than the window it scrolls inside itself; no overscroll rule, so the wheel still reaches the page at either end. */ [data-screen="script"] .live-rail { position: sticky; top: calc(var(--header-h) + var(--s-2)); max-height: calc(100vh - var(--header-h) - var(--s-2) - var(--pad-page-end)); overflow-y: auto; scrollbar-width: none; } } @media (max-width: 1023px) { [data-screen="script"] .scene-rail { flex-wrap: wrap; row-gap: var(--s-1); } } /* The stage, one green pill that opens the six (the bulk page's). */ [data-screen="script"] .sc-stage { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-1h); cursor: pointer; border-radius: var(--r-pill); border: 1px solid transparent; font: 600 12.5px/1 var(--font-body); background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--ink); } [data-screen="script"] .sc-stage.is-approved, [data-screen="script"] .sc-stage.is-delivered { background: var(--accent); color: var(--accent-ink); } [data-screen="script"] .sc-stage:hover { border-color: var(--accent); } [data-screen="script"] .sc-stage-chev, [data-screen="script"] .sc-switch .sc-stage-chev { display: inline-flex; opacity: .8; } [data-screen="script"] .script-waiting { margin-left: var(--s-1); font-size: 12.5px; color: var(--mute); white-space: nowrap; } /* THE VIDEO TAB: sizes over the cut, the cut in its own shape, its verbs under it, all one width and centred in a card. */ [data-screen="script"] .sc-video { display: flex; justify-content: center; padding: var(--s-3) var(--s-2); border: 1px solid var(--rule-faint); border-radius: var(--r-lg); background: var(--card); } /* WITH THE STUDIO: the switch on top, the editor (or the cut) under it, full width. */ [data-screen="script"] .sc-video:has(> .sc-vid-modebar) { flex-direction: column; justify-content: flex-start; padding: var(--s-2); } [data-screen="script"] .sc-vid-body { display: flex; justify-content: center; min-width: 0; } [data-screen="script"] .sc-vid-body > .sc-studio { flex: 1; min-width: 0; } [data-screen="script"] .sc-vid-col { --vh: min(68vh, 760px); width: min(100%, max(var(--w-col), calc(var(--vh) * var(--arn, .8)))); display: grid; gap: var(--s-1h); } [data-screen="script"] .sc-vid-top { display: flex; align-items: center; gap: var(--s-1h); min-width: 0; } [data-screen="script"] .sc-vid-sizes { display: inline-flex; flex: none; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: var(--shade); } [data-screen="script"] .sc-vid-size { height: var(--h-md); padding: 0 var(--s-1h); border: 0; background: none; cursor: pointer; color: var(--ink-soft); font: 600 12.5px/1 var(--font-body); font-variant-numeric: tabular-nums; } [data-screen="script"] .sc-vid-size + .sc-vid-size { border-left: 1px solid var(--rule); } [data-screen="script"] .sc-vid-size.is-empty { color: var(--mute); font-weight: 500; } [data-screen="script"] .sc-vid-size:hover { color: var(--ink); } [data-screen="script"] .sc-vid-size.is-on { background: var(--accent); color: var(--accent-ink); } [data-screen="script"] .sc-vid-facts { margin-left: auto; color: var(--mute); font: 600 12.5px/1 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-screen="script"] .sc-vid-frame { width: 100%; aspect-ratio: var(--ar, 4 / 5); border-radius: var(--r-lg); overflow: hidden; background: #000; border: 1px solid var(--rule-faint); } [data-screen="script"] .sc-vid-player { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; } [data-screen="script"] .sc-vid-frame.is-empty { background: var(--shade); border-style: solid; border-color: var(--rule); display: grid; place-items: center; } [data-screen="script"] .sc-vid-empty { display: grid; justify-items: center; gap: var(--s-1h); } [data-screen="script"] .sc-vid-empty-t { font: 600 14px/1.2 var(--font-display); color: var(--ink-soft); } [data-screen="script"] .sc-vid-tools { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; } [data-screen="script"] .sc-vid-tools .btn-sm { margin-left: 0; } [data-screen="script"] .sc-vid-dl { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } [data-screen="script"] .sc-vid-wait { margin: 0; } /* --------------------------------------------------------------------------- * THE CLIENT'S DECISION BAR AND THREAD (web/decide.js, SPEC-PORTAL-V3 §4). * One piece shared by every view a client opens, so its rules are written * once here, under each of those screens by name, and match nothing else. * ------------------------------------------------------------------------- */ :is([data-screen="script"], [data-screen="static"], [data-screen="form"], [data-screen="video"], [data-screen="bulk"], [data-screen="landing"]) .dc-bar { display: grid; gap: var(--s-1h); padding: var(--s-2); border: 1px solid var(--accent); border-radius: var(--r-lg); background: var(--card); } :is([data-screen="script"], [data-screen="static"], [data-screen="form"], [data-screen="video"], [data-screen="bulk"], [data-screen="landing"]) .dc-bar.is-read { border-color: var(--rule); } :is([data-screen="script"], [data-screen="static"], [data-screen="form"], [data-screen="video"], [data-screen="bulk"], [data-screen="landing"]) .dc-bar .hint { margin: 0; } :is([data-screen="script"], [data-screen="static"], [data-screen="form"], [data-screen="video"], [data-screen="bulk"], [data-screen="landing"]) .dc-ask { margin: 0; font: var(--t-section); color: var(--ink); } :is([data-screen="script"], [data-screen="static"], [data-screen="form"], [data-screen="video"], [data-screen="bulk"], [data-screen="landing"]) .dc-go { display: flex; flex-wrap: wrap; gap: var(--gap-inline); } :is([data-screen="script"], [data-screen="static"], [data-screen="form"], [data-screen="video"], [data-screen="bulk"], [data-screen="landing"]) .dc-say:empty { display: none; } :is([data-screen="script"], [data-screen="static"], [data-screen="form"], [data-screen="video"], [data-screen="bulk"], [data-screen="landing"]) .dc-thread { display: grid; gap: var(--s-2); } :is([data-screen="script"], [data-screen="static"], [data-screen="form"], [data-screen="video"], [data-screen="bulk"], [data-screen="landing"]) .dc-thread .comment .reply-box { margin-top: var(--s-1); } :is([data-screen="script"], [data-screen="static"], [data-screen="form"], [data-screen="video"], [data-screen="bulk"], [data-screen="landing"]) .dc-compose { display: grid; gap: var(--s-1); } :is([data-screen="script"], [data-screen="static"], [data-screen="form"], [data-screen="video"], [data-screen="bulk"], [data-screen="landing"]) .dc-opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-inline); } :is([data-screen="script"], [data-screen="static"], [data-screen="form"], [data-screen="video"], [data-screen="bulk"], [data-screen="landing"]) .dc-pin { display: inline-flex; align-items: center; gap: var(--s-1); } /* A static's decision spans its row, as a script's and a video's do. */ /* ON A PHONE THE CREATIVE COMES FIRST: it is what is being looked at and approved, and one column put it under every line of its words. */ @media (max-width: 639px) { [data-screen="static"] .ad-trio > :nth-child(2) { order: -1; } } [data-screen="static"] .ad-stagebar > .dc-mount { flex: 1; min-width: 0; } /* Read-only fields in client mode keep the team's look and lose the edit cue. */ :is([data-screen="script"], [data-screen="form"]) :is(.sf-value, .scene-name-edit, .fm-ed)[readonly]:is(:hover, :focus) { border-color: transparent; background: none; cursor: text; } :is([data-screen="script"], [data-screen="form"]) .is-read.chip { cursor: default; } [data-screen="script"] .sc-decide:empty, [data-screen="form"] .fm-decide:empty { display: none; } [data-screen="script"] .sc-decide { margin: var(--s-2) 0; } [data-screen="form"] .fm-decide { margin: var(--s-2) 0 0; } /* A scene or section with no client Feedback to show (View As, or a viewer on a quiet scene) gives its column back, rather than drawing an empty half. */ [data-screen="script"] .script-layout.is-client .scene:not(:has(.dc-scene:not([hidden]))) { grid-template-columns: minmax(0, 1fr); } [data-screen="script"] .script-layout.is-client .scene:not(:has(.dc-scene:not([hidden]))) > .scene-side { display: none; } [data-screen="form"] .fm-layout.is-client .fm-sec:not(:has(.dc-scene:not([hidden]))) .fm-sec-body { grid-template-columns: minmax(0, 1fr); } [data-screen="form"] .fm-layout.is-client .fm-sec:not(:has(.dc-scene:not([hidden]))) .fm-sec-side { display: none; } /* THE SCENES SCROLL, AT MOST HALF THE BAR (Franz, 2026-11-03: "the s1 s2 should be scrollable and not hide other stuff ... max half of the toolbar"). The bar stays one row; the scene pills slide sideways inside their own strip, with a thin bar under them when there are more than fit, and the stage, Share, and the copies keep their places. */ [data-screen="script"] .scene-rail { flex-wrap: nowrap; } [data-screen="script"] .rail-scenes { display: flex; align-items: center; gap: var(--s-1); flex: 0 1 auto; min-width: 0; max-width: 50%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } [data-screen="script"] .rail-scenes::-webkit-scrollbar { display: none; } [data-screen="script"] .rail-scenes > .rail-dot { flex: none; } @media (max-width: 1023px) { [data-screen="script"] .scene-rail { flex-wrap: wrap; } [data-screen="script"] .rail-scenes { max-width: 100%; flex-basis: 100%; } } /* THE PAGE'S CONTROLS IN THE STUDIO'S BAR (script-view.js videoPanel): a button, never an underlined link. */ [data-screen="script"] .adeq-studio .sc-vid-full { text-decoration: none; } /* THE VIDEO DESCRIPTION, UNDER THE BRIEF IN THE VIDEO BRIEF TAB (Franz, 2026-11-04): its own heading and Copy, 24px under the brief's last panel. */ [data-screen="script"] .sec.sc-desc { margin: var(--s-3) 0 0; } [data-screen="script"] .sec.sc-desc[hidden] { display: none; } /* NO FRAME AROUND THE EDITOR (Franz, 2026-11-04: "remove the whole padding thing around the whole video editor, waste of space"): no card, no coloured area, its panels sit straight on the page at the page's own margins, as tall as the window leaves (script-view.js fitStudio). The Cut keeps its card. */ [data-screen="script"] .sc-video:has(.sc-studio) { padding: 0; border: 0; border-radius: 0; background: none; } [data-screen="script"] .sc-studio.adeq-studio { padding: 0; background: none; height: auto; min-height: 0; } /* THE VIDEO TAB'S TOOLS IN THE PAGE'S TOOLBAR (script-view.js, 2026-11-04). */ [data-screen="script"] .scene-rail > [hidden] { display: none; } [data-screen="script"] .sc-vid-bar, [data-screen="script"] .sc-vid-tools-slot { display: contents; } [data-screen="script"] .scene-rail > .sc-share { order: 2; } [data-screen="script"] .scene-rail > .sc-copy { order: 3; } [data-screen="script"] .sc-vid-bar[hidden] { display: none; }