/* CastLock Cinema Desktop — application chrome. Lifted out of css/cinematic.css (the ai-mastery course stylesheet), whose :root overwrote --font-display/--font-body with Bebas Neue + Inter and repainted the page in the Void/Coral/Gold course palette. Tokens below map onto the DVP system instead: premium-core supplies the type vars and the accent, and the warm Edit Bay text colour matches every other tool page. */ .castlock-desktop { /* Warm noir, matching the Edit Bay pipeline ground the tier paints on (CinePrompt, FrameDNA, Script to Shots). These were #060d18 / #0b1523 / #101c2d — a cool blue-black that left the app shell floating on a warm page once the tier landed. Everything else here derives from these three through color-mix, so recolouring them carries the whole shell. */ --cl-canvas: #06080c; --cl-surface: #0b0e13; --cl-elevated: #12151b; --cl-accent: var(--accent, #ff7338); --cl-film: #d7a945; /* house gold — secondary/hover, never pink */ --cl-data: #39f5d4; --cl-text: #f6ead6; --cl-muted: #b9aa91; --cl-shade: #03070d; /* deepest tone for shadows/insets */ --cl-radius-panel: .75rem; --cl-radius-control: .375rem; background: var(--cl-canvas); color: var(--cl-text); font-family: var(--font-body, 'Hanken Grotesk', system-ui, sans-serif); } .castlock-desktop .cl-app { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 100%; overflow: hidden; background: var(--cl-canvas); border: 1px solid color-mix(in srgb, var(--cl-muted) 18%, transparent); box-shadow: 0 22px 56px color-mix(in srgb, var(--cl-shade) 78%, transparent); } .castlock-desktop .cl-app > *, .castlock-desktop .cl-build-grid > *, .castlock-desktop .cl-scene-grid > * { min-width: 0; } .castlock-desktop .cl-titlebar, .castlock-desktop .cl-contextbar { position: relative; z-index: 1; display: flex; align-items: center; min-width: 0; border-color: color-mix(in srgb, var(--cl-muted) 22%, transparent); background: color-mix(in srgb, var(--cl-surface) 88%, transparent); box-shadow: 0 10px 28px color-mix(in srgb, var(--cl-shade) 58%, transparent); backdrop-filter: blur(18px); } .castlock-desktop .cl-titlebar { min-height: 58px; padding-inline: clamp(1rem, 2.5vw, 1.5rem); } .castlock-desktop .cl-contextbar { min-height: 56px; padding-inline: clamp(1rem, 2.5vw, 1.5rem); border-block: 1px solid color-mix(in srgb, var(--cl-muted) 16%, transparent); } .castlock-desktop .cl-statusbar { display: flex; align-items: center; min-height: 32px; height: 32px; padding-inline: clamp(1rem, 2.5vw, 1.5rem); border-top: 1px solid color-mix(in srgb, var(--cl-muted) 20%, transparent); background: color-mix(in srgb, var(--cl-surface) 94%, var(--cl-canvas)); color: var(--cl-muted); font: 500 .625rem/1 var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .08em; text-transform: uppercase; } .castlock-desktop .cl-control { min-height: 40px; border: 1px solid color-mix(in srgb, var(--cl-muted) 28%, transparent); border-radius: var(--cl-radius-control); padding: .55rem .8rem; transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s cubic-bezier(.16,1,.3,1), border-color .25s cubic-bezier(.16,1,.3,1); } .castlock-desktop .cl-primary { background: var(--cl-accent); color: var(--cl-shade); border-color: color-mix(in srgb, var(--cl-accent) 76%, var(--cl-film)); box-shadow: inset 0 1px color-mix(in srgb, #fff4e3 24%, transparent), 0 3px 0 color-mix(in srgb, var(--cl-accent) 54%, var(--cl-shade)); } .castlock-desktop .cl-primary:hover { transform: translateY(-1px); } .castlock-desktop .cl-primary:active { transform: translateY(1px); box-shadow: none; } .castlock-desktop .cl-secondary { background: var(--cl-elevated); color: var(--cl-text); border-color: color-mix(in srgb, var(--cl-muted) 48%, transparent); box-shadow: 0 2px 0 color-mix(in srgb, var(--cl-canvas) 80%, transparent); } .castlock-desktop .cl-secondary:hover { background: color-mix(in srgb, var(--cl-elevated) 82%, var(--cl-film)); border-color: color-mix(in srgb, var(--cl-film) 58%, var(--cl-muted)); } .castlock-desktop .cl-quiet { background: transparent; color: var(--cl-muted); border-color: transparent; } .castlock-desktop .cl-quiet:hover { background: color-mix(in srgb, var(--cl-elevated) 80%, transparent); color: var(--cl-text); border-color: color-mix(in srgb, var(--cl-muted) 30%, transparent); } .castlock-desktop .cl-quiet:active { transform: translateY(1px); background: color-mix(in srgb, var(--cl-elevated) 74%, var(--cl-film)); color: var(--cl-text); border-color: color-mix(in srgb, var(--cl-film) 52%, var(--cl-muted)); } .castlock-desktop .cl-danger { background: color-mix(in srgb, var(--cl-accent) 14%, var(--cl-surface)); color: color-mix(in srgb, var(--cl-accent) 82%, var(--cl-text)); border-color: color-mix(in srgb, var(--cl-accent) 58%, var(--cl-film)); } .castlock-desktop .cl-danger:hover { background: color-mix(in srgb, var(--cl-accent) 28%, var(--cl-surface)); border-color: var(--cl-accent); } .castlock-desktop .cl-control:disabled, .castlock-desktop .cl-primary:disabled, .castlock-desktop .cl-secondary:disabled, .castlock-desktop .cl-quiet:disabled, .castlock-desktop .cl-danger:disabled { cursor: not-allowed; opacity: .42; transform: none; box-shadow: none; } .castlock-desktop .cl-control:focus-visible, .castlock-desktop .cl-primary:focus-visible, .castlock-desktop .cl-secondary:focus-visible, .castlock-desktop .cl-quiet:focus-visible, .castlock-desktop .cl-danger:focus-visible, .castlock-desktop .cl-field:focus-visible, .castlock-desktop .cl-segmented button:focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 2px; } .castlock-desktop .cl-field, .castlock-desktop .cl-region input, .castlock-desktop .cl-region select, .castlock-desktop .cl-region textarea { min-height: 40px; border: 1px solid color-mix(in srgb, var(--cl-muted) 30%, transparent); border-radius: var(--cl-radius-control); background: color-mix(in srgb, var(--cl-elevated) 78%, var(--cl-canvas)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cl-shade) 72%, transparent); color: var(--cl-text); } .castlock-desktop .cl-region textarea { min-height: 96px; } .castlock-desktop .cl-field:focus, .castlock-desktop .cl-region input:focus, .castlock-desktop .cl-region select:focus, .castlock-desktop .cl-region textarea:focus { border-color: color-mix(in srgb, var(--cl-accent) 76%, var(--cl-film)); outline: 2px solid color-mix(in srgb, var(--cl-accent) 72%, transparent); outline-offset: 1px; } .castlock-desktop .cl-label, .castlock-desktop .cl-region label { color: var(--cl-muted); font: 500 .625rem/1.25 var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .1em; text-transform: uppercase; } .castlock-desktop .cl-region { min-width: 0; min-height: 0; background: var(--cl-surface); border: 1px solid color-mix(in srgb, var(--cl-muted) 18%, transparent); border-radius: var(--cl-radius-panel); box-shadow: 0 14px 30px color-mix(in srgb, var(--cl-shade) 52%, transparent); } .castlock-desktop .cl-segmented { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem; border: 1px solid color-mix(in srgb, var(--cl-muted) 22%, transparent); border-radius: var(--cl-radius-control); background: color-mix(in srgb, var(--cl-canvas) 72%, var(--cl-surface)); } .castlock-desktop .cl-segmented button { min-height: 40px; border: 1px solid transparent; border-radius: calc(var(--cl-radius-control) - .125rem); padding: .35rem .6rem; background: transparent; color: var(--cl-muted); font: 500 .6875rem/1 var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .05em; text-transform: uppercase; } .castlock-desktop .cl-segmented button[aria-pressed="true"], .castlock-desktop .cl-segmented button[aria-current="true"] { border-color: color-mix(in srgb, var(--cl-accent) 40%, transparent); background: color-mix(in srgb, var(--cl-elevated) 74%, var(--cl-accent)); color: var(--cl-text); box-shadow: inset 0 1px color-mix(in srgb, #fff4e3 10%, transparent); } .castlock-desktop .cl-menu { padding: .35rem; border: 1px solid color-mix(in srgb, var(--cl-muted) 28%, transparent); border-radius: var(--cl-radius-control); background: color-mix(in srgb, var(--cl-surface) 94%, var(--cl-canvas)); box-shadow: 0 16px 34px color-mix(in srgb, var(--cl-shade) 76%, transparent); } .castlock-desktop .cl-menu .cl-quiet { width: 100%; text-align: left; } /* The library rail is 200–240px wide and Archivo runs wider than the Bebas Neue it replaced, so let the head and foot stack rather than break button labels. */ .castlock-desktop .cl-library .cl-region-head, .castlock-desktop .cl-library-foot { flex-wrap: wrap; } .castlock-desktop .cl-library .cl-region-head .cl-control, .castlock-desktop .cl-library-foot > .cl-control, .castlock-desktop .cl-library-foot > .workspace-more > .cl-control { white-space: nowrap; } .castlock-desktop .cl-library-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: .75rem .75rem 0; } .castlock-desktop .cl-library-filters .cl-control { min-width: 0; min-height: 36px; padding: .35rem .45rem; font-size: .68rem; } .castlock-desktop .cl-library-filters [aria-pressed="true"] { border-color: color-mix(in srgb, var(--cl-accent) 64%, var(--cl-muted)); background: color-mix(in srgb, var(--cl-elevated) 78%, var(--cl-accent)); color: var(--cl-text); } .castlock-desktop .cl-library-list { gap: .5rem; } .castlock-desktop .cl-library-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; border: 1px solid color-mix(in srgb, var(--cl-muted) 22%, transparent); border-radius: var(--cl-radius-control); background: color-mix(in srgb, var(--cl-elevated) 56%, var(--cl-surface)); min-width: 0; } .castlock-desktop .cl-library-card.is-current { border-color: color-mix(in srgb, var(--cl-accent) 60%, var(--cl-muted)); } .castlock-desktop .cl-library-card .cl-library-row { grid-column: 1; grid-template-columns: minmax(0, 1fr); gap: .15rem; min-width: 0; border: 0; background: transparent; } .castlock-desktop .cl-library-card .cl-library-row .mono { justify-self: start; font-size: .6rem; } .castlock-desktop .cl-library-card .cl-library-row span:first-child { min-width: 0; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; } .castlock-desktop .cl-library-card > p { grid-column: 1; margin: 0; padding: 0 .625rem .625rem; min-width: 0; overflow: visible; overflow-wrap: anywhere; color: var(--cl-muted); font-size: .7rem; line-height: 1.35; text-overflow: clip; white-space: normal; } .castlock-desktop .cl-library-delete { grid-column: 2; grid-row: 1; min-height: 36px; margin: .25rem; padding: .35rem .5rem; font-size: .68rem; } .castlock-desktop .cl-library-actions { grid-column: 2; grid-row: 2; min-width: 0; padding: .25rem; } .castlock-desktop .cl-library-actions > summary { min-height: 36px; padding: .35rem .5rem; list-style: none; font-size: .68rem; } .castlock-desktop .cl-library-actions > summary::-webkit-details-marker { display: none; } .castlock-desktop .cl-library-action-menu { position: absolute; z-index: 5; top: 2.8rem; right: .25rem; display: grid; min-width: 9.5rem; padding: .25rem; border: 1px solid color-mix(in srgb, var(--cl-muted) 30%, transparent); border-radius: var(--cl-radius-control); background: var(--cl-elevated); box-shadow: 0 12px 24px color-mix(in srgb, var(--cl-shade) 72%, transparent); } .castlock-desktop .cl-library-action-menu .cl-control { width: 100%; min-height: 40px; justify-content: flex-start; text-align: left; } .castlock-desktop :is( .cl-title-actions, .cl-context-actions, .cl-source-picker-actions, .cl-scene-actions ) { flex-wrap: wrap; min-width: 0; } .castlock-desktop .cl-new-entities, .castlock-desktop .cl-new-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; } .castlock-desktop .cl-new-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } .castlock-desktop .cl-new-method { display: grid; gap: .35rem; min-height: 7rem; align-content: center; text-align: left; } .castlock-desktop .cl-new-method span { color: var(--cl-muted); } .castlock-desktop .cl-photo-start { display: grid; gap: 1rem; } .castlock-desktop .cl-photo-dropzone { display: grid; min-height: 180px; place-content: center; gap: .45rem; border: 1px dashed color-mix(in srgb, var(--cl-accent) 62%, var(--cl-muted)); border-radius: var(--cl-radius-panel); background: color-mix(in srgb, var(--cl-elevated) 58%, var(--cl-surface)); color: var(--cl-text); text-align: center; cursor: pointer; } .castlock-desktop .cl-photo-dropzone strong { font: 700 1rem/1.2 var(--font-display, 'Archivo', system-ui, sans-serif); letter-spacing: .04em; } .castlock-desktop .cl-photo-dropzone span, .castlock-desktop .cl-photo-dropzone small { color: var(--cl-muted); } .castlock-desktop .cl-photo-dropzone[data-drag-active="true"] { border-color: var(--cl-accent); background: color-mix(in srgb, var(--cl-elevated) 72%, var(--cl-accent)); } .castlock-desktop .cl-photo-recovery { display: grid; gap: .75rem; } .castlock-desktop .cl-photo-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; } .castlock-desktop .cl-photo-review-note, .castlock-desktop .cl-photo-sources { grid-column: 1 / -1; } .castlock-desktop .cl-photo-review-group { min-width: 0; padding: .75rem; border: 1px solid color-mix(in srgb, var(--cl-muted) 22%, transparent); border-radius: var(--cl-radius-control); background: color-mix(in srgb, var(--cl-elevated) 52%, var(--cl-surface)); } .castlock-desktop .cl-photo-review-group h3 { margin: 0 0 .4rem; color: var(--cl-text); font-size: .75rem; } .castlock-desktop .cl-photo-review-group :is(p, ul) { margin: 0; } .castlock-desktop .cl-photo-review-group ul { padding-left: 1.15rem; color: var(--cl-muted); } .castlock-desktop .toast.is-visible { pointer-events: auto; } .castlock-desktop .toast { max-width: calc(100vw - 1rem); } .castlock-desktop .toast [data-undo-delete] { margin-left: .5rem; min-height: 36px; } .castlock-desktop .cl-continuity-rail { position: relative; padding-inline-start: 1.25rem; } .castlock-desktop .cl-continuity-rail::before { content: ""; position: absolute; inset-block: .35rem; inset-inline-start: .25rem; width: 2px; background: linear-gradient(180deg, var(--cl-accent), var(--cl-film)); box-shadow: 0 0 12px color-mix(in srgb, var(--cl-accent) 48%, transparent); } @media (hover: none), (max-width: 767px) { .castlock-desktop .cl-control, .castlock-desktop .cl-primary, .castlock-desktop .cl-secondary, .castlock-desktop .cl-quiet, .castlock-desktop .cl-danger, .castlock-desktop .cl-field, .castlock-desktop .cl-region input, .castlock-desktop .cl-region select, .castlock-desktop .cl-segmented button { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .castlock-desktop .cl-control { transition: none; } } /* CastLock responsive application frame ---------------------------------- */ /* The shell fills whatever the sticky site header leaves on compact screens, then becomes an inset workbench on large desktops. It used to be calc(100dvh - 74px), and calc(100dvh - 116px) on phones: both are guesses at the header's height, and the header wraps. At 390px wide it is 165px tall, so the shell hung 42px below the fold and took the pane switcher, the status bar and the phone Generate dock with it. A flex column on the body needs no number. */ body.castlock-page { display: flex; flex-direction: column; min-height: 100dvh; } .castlock-desktop .cl-shell { /* flex-basis 0, not auto: the phone rules give panes a min-height in vh, and a content-sized basis lets that push the shell past the viewport again. */ flex: 1 1 0; height: auto; min-height: 0; overflow: hidden; } @media (min-width: 1024px) and (min-height: 800px) { .castlock-desktop .cl-shell { width: min(1200px, calc(100% - 1rem)); max-height: 800px; margin: auto; border: 1px solid color-mix(in srgb, var(--cl-muted) 22%, transparent); border-radius: var(--cl-radius-panel); } } @media (max-width: 1023px) { .castlock-desktop .cl-shell .cl-app { flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden; } .castlock-desktop .cl-titlebar, .castlock-desktop .cl-contextbar { flex-wrap: wrap; gap: .5rem; padding-block: .5rem; } .castlock-desktop .cl-pane-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; padding: .5rem .75rem; border-bottom: 1px solid color-mix(in srgb, var(--cl-muted) 18%, transparent); background: var(--cl-surface); } .castlock-desktop .cl-build-grid, .castlock-desktop .cl-sequence-grid { display: block; min-width: 0; min-height: 0; overflow: hidden; padding: .5rem; } .castlock-desktop .cl-build-grid > .cl-region, .castlock-desktop .cl-sequence-grid > .cl-region { display: none; height: 100%; min-height: 0; } .castlock-desktop .cl-build-grid[data-active-pane="library"] > [data-desktop-region="library"], .castlock-desktop .cl-build-grid[data-active-pane="character"] > [data-desktop-region="character"], .castlock-desktop .cl-build-grid[data-active-pane="inspector"] > [data-desktop-region="inspector"], .castlock-desktop .cl-sequence-grid[data-active-pane="shots"] > [data-desktop-region="shots"], .castlock-desktop .cl-sequence-grid[data-active-pane="edit"] > [data-desktop-region="edit"], .castlock-desktop .cl-sequence-grid[data-active-pane="output"] > [data-desktop-region="output"] { display: flex; } } /* Scene-first workspace -------------------------------------------------- */ .castlock-desktop .cl-segmented a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; } .castlock-desktop .cl-segmented button { min-height: 44px; } .castlock-desktop .cl-segmented button[aria-current="page"] { border-color: color-mix(in srgb, var(--cl-accent) 40%, transparent); background: color-mix(in srgb, var(--cl-elevated) 74%, var(--cl-accent)); color: var(--cl-text); box-shadow: inset 0 1px color-mix(in srgb, var(--cl-text) 10%, transparent); } .castlock-desktop .cl-build-app[data-active-view="scene"] { grid-template-rows: auto minmax(0, 1fr) auto; } .castlock-desktop .cl-build-app[data-active-view="library"] { grid-template-rows: auto auto auto minmax(0, 1fr) auto; } /* The five rows above are titlebar, contextbar, pane switcher, workspace, status bar. From 1024px the pane switcher is display:none, so without this the workspace auto-placed into the switcher's `auto` row (sized to content) and the status bar into the `1fr` row, which the auto row had already emptied: the status bar sat clipped below the app on every desktop window. */ @media (min-width: 1024px) { .castlock-desktop .cl-build-app[data-active-view="library"] { grid-template-rows: auto auto minmax(0, 1fr) auto; } } .castlock-desktop #libraryWorkspace:not([hidden]) { display: contents; } .castlock-desktop #libraryWorkspace[hidden], .castlock-desktop #sceneWorkspace[hidden] { display: none; } .castlock-desktop .cl-build-app[data-active-view="scene"] .cl-title-actions { display: none; } /* One scroller, not a track budget. The workspace is a fixed-height pane inside the app shell; sizing its children with grid tracks made them fight over a height that was never enough (PR #199/#201/#206). As a block scroller each band takes the height its content needs and the pane scrolls once. */ .castlock-desktop .cl-scene-workspace { display: block; min-width: 0; min-height: 0; overflow: auto; background: color-mix(in srgb, var(--cl-canvas) 94%, var(--cl-film)); } .castlock-desktop .cl-scene-contextbar { position: sticky; top: 0; z-index: 4; justify-content: space-between; } .castlock-desktop .cl-scene-contextbar .cl-document-state { margin-left: auto; } .castlock-desktop .cl-scene-document-title { display: flex; align-items: center; gap: .75rem; min-width: 0; } .castlock-desktop .cl-scene-document-title input { min-width: 11rem; width: min(30vw, 22.5rem); border: 0; padding: 0; background: transparent; font: 600 clamp(1.25rem, 2.2vw, 1.6875rem)/1 var(--font-display, 'Archivo', system-ui, sans-serif); letter-spacing: .02em; } .castlock-desktop .cl-scene-document-title span { color: var(--cl-muted); font: 500 .625rem/1.2 var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .07em; text-transform: uppercase; } .castlock-desktop .cl-scene-workspace :is(button, input, select, textarea, summary) { min-height: 44px; } .castlock-desktop .cl-scene-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: .625rem; padding: .625rem; } .castlock-desktop .cl-scene-setup, .castlock-desktop .cl-scene-preview { display: flex; flex-direction: column; min-width: 0; padding: clamp(1rem, 2.2vw, 1.5rem); overflow: visible; } .castlock-desktop .cl-scene-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1rem, 2vw, 1.5rem); padding-bottom: .875rem; border-bottom: 1px solid color-mix(in srgb, var(--cl-muted) 22%, transparent); } .castlock-desktop .cl-scene-heading h2 { max-width: 28rem; margin: .35rem 0 0; color: var(--cl-text); font: 700 clamp(1.2rem, 2vw, 1.65rem)/1.12 var(--font-display, 'Archivo', system-ui, sans-serif); letter-spacing: .01em; } .castlock-desktop .cl-scene-eyebrow, .castlock-desktop .cl-scene-step, .castlock-desktop .cl-source-kicker, .castlock-desktop .cl-source-search > span, .castlock-desktop .cl-scene-action > span, .castlock-desktop .cl-advanced-grid label > span, .castlock-desktop .cl-prompt-cue, .castlock-desktop .cl-prompt-state, .castlock-desktop .cl-prompt-sources { color: var(--cl-muted); font: 500 .625rem/1.25 var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .1em; text-transform: uppercase; } .castlock-desktop .cl-scene-step { white-space: nowrap; } .castlock-desktop .cl-source-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: .625rem; min-width: 0; } .castlock-desktop .cl-scene-no-recurring { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; color: var(--cl-muted); font-size: .75rem; } .castlock-desktop .cl-scene-no-recurring input { min-height: auto; } .castlock-desktop .cl-scene-prepare { display: grid; gap: .625rem; margin-top: .875rem; padding: .75rem .875rem; border: 1px solid color-mix(in srgb, var(--cl-muted) 26%, transparent); border-radius: var(--cl-radius-control); background: color-mix(in srgb, var(--cl-elevated) 62%, var(--cl-canvas)); } .castlock-desktop .cl-scene-prepare h3 { margin: .2rem 0 0; color: var(--cl-text); font-size: .9rem; } .castlock-desktop .cl-scene-prepare-list { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; } .castlock-desktop .cl-scene-prepare-list li { display: grid; grid-template-columns: minmax(7.5rem, .45fr) minmax(0, 1fr); gap: .5rem; color: var(--cl-muted); font-size: .72rem; line-height: 1.4; } .castlock-desktop .cl-scene-prepare-list li[data-state="ready"] strong { color: var(--cl-data); } .castlock-desktop .cl-scene-prepare-list li[data-state="pending"] strong { color: var(--cl-film); } .castlock-desktop .cl-source-slot { min-width: 0; padding: .875rem; border: 1px solid color-mix(in srgb, var(--cl-muted) 26%, transparent); border-radius: var(--cl-radius-control); background: color-mix(in srgb, var(--cl-elevated) 76%, var(--cl-canvas)); } .castlock-desktop .cl-source-kicker { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .625rem; } .castlock-desktop .cl-source-kicker span:last-child { color: var(--cl-text); } .castlock-desktop .cl-source-plus { align-self: center; color: var(--cl-film); font: 700 1.25rem/1 var(--font-display, 'Archivo', system-ui, sans-serif); } .castlock-desktop .cl-costar-block { display: grid; gap: .5rem; padding: .75rem .875rem; border: 1px dashed color-mix(in srgb, var(--cl-muted) 30%, transparent); border-radius: var(--cl-radius-control); } .castlock-desktop .cl-costar-header { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; color: var(--cl-muted); font: 500 .625rem/1.25 var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .1em; text-transform: uppercase; } .castlock-desktop .cl-costar-count { color: var(--cl-accent); } .castlock-desktop .cl-costar-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .castlock-desktop .cl-costar-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--cl-accent) 14%, var(--cl-surface)); color: var(--cl-text); font-size: .75rem; } .castlock-desktop .cl-costar-remove { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font: inherit; line-height: 1; } .castlock-desktop .cl-costar-remove:hover { background: color-mix(in srgb, var(--cl-text) 16%, transparent); } .castlock-desktop .cl-costar-empty { color: var(--cl-muted); font-size: .75rem; } .castlock-desktop .cl-costar-add { display: grid; gap: .35rem; } .castlock-desktop .cl-costar-add-row { display: flex; gap: .5rem; } .castlock-desktop .cl-costar-add-row select { flex: 1; min-width: 0; } .castlock-desktop .cl-scene-advanced em { color: var(--cl-accent); font-style: normal; font-weight: 600; } .castlock-desktop .cl-source-picker { display: grid; gap: .35rem; width: 100%; min-height: 7.5rem; padding: .875rem; text-align: left; } .castlock-desktop .cl-source-picker-role { color: var(--cl-accent); } .castlock-desktop .cl-source-picker strong { overflow-wrap: anywhere; color: var(--cl-text); font: 700 1.05rem/1.2 var(--font-display, 'Archivo', system-ui, sans-serif); } .castlock-desktop .cl-source-picker span:last-child, .castlock-desktop .cl-source-option span, .castlock-desktop .cl-source-empty { color: var(--cl-muted); font-size: .75rem; line-height: 1.35; } .castlock-desktop .cl-source-popover { display: grid; gap: .625rem; margin-top: .625rem; padding-top: .625rem; border-top: 1px solid color-mix(in srgb, var(--cl-muted) 22%, transparent); } .castlock-desktop .cl-source-popover[hidden] { display: none; } .castlock-desktop .cl-source-search { display: grid; gap: .35rem; } .castlock-desktop .cl-source-options { display: grid; gap: .25rem; max-height: 13rem; overflow-y: auto; } .castlock-desktop .cl-source-option { display: grid; gap: .2rem; width: 100%; min-height: 44px; text-align: left; } .castlock-desktop .cl-source-option[data-active="true"] { border-color: var(--cl-accent); background: color-mix(in srgb, var(--cl-accent) 12%, var(--cl-surface)); } .castlock-desktop .cl-source-option strong { color: var(--cl-text); } .castlock-desktop .cl-source-picker-actions { display: flex; flex-wrap: wrap; gap: .375rem; } .castlock-desktop .cl-source-empty { margin: .5rem 0; } .castlock-desktop .cl-scene-action { display: grid; gap: .5rem; margin-top: 1rem; } .castlock-desktop .cl-scene-action textarea { width: 100%; min-height: 7rem; resize: vertical; } .castlock-desktop .cl-scene-advanced { margin-top: .75rem; border-block: 1px solid color-mix(in srgb, var(--cl-muted) 20%, transparent); } .castlock-desktop .cl-scene-advanced summary { min-height: 44px; padding: .75rem 0; color: var(--cl-text); font-weight: 600; cursor: pointer; } .castlock-desktop .cl-scene-advanced summary:focus-visible, .castlock-desktop .cl-source-search input:focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 2px; } .castlock-desktop .cl-advanced-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 0 0 .875rem; } .castlock-desktop .cl-advanced-grid label { display: grid; gap: .4rem; } .castlock-desktop .cl-advanced-grid :is(input, select, textarea) { width: 100%; min-width: 0; } .castlock-desktop .cl-scene-generate-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; } .castlock-desktop .cl-scene-generate-bar p { margin: 0; color: var(--cl-muted); font-size: .75rem; } .castlock-desktop .cl-prompt-preview { flex: 1; min-width: 0; min-height: 15rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--cl-muted) 24%, transparent); border-radius: var(--cl-radius-control); background: color-mix(in srgb, var(--cl-elevated) 64%, var(--cl-canvas)); } .castlock-desktop .cl-prompt-empty { display: grid; align-content: start; gap: .9rem; min-height: 13rem; text-align: center; } .castlock-desktop .cl-prompt-empty p { color: var(--cl-muted); max-width: 46ch; margin-inline: auto; } /* Ghosted sample so the empty preview shows the shape of the output, not a void. */ .castlock-desktop .cl-prompt-ghost { margin: .3rem 0 0; padding: 1rem 1.1rem; text-align: left; border: 1px solid color-mix(in srgb, var(--cl-muted) 14%, transparent); border-radius: var(--cl-radius-control); background: color-mix(in srgb, var(--cl-surface) 55%, transparent); color: color-mix(in srgb, var(--cl-muted) 58%, transparent); font: 500 .74rem/1.75 var(--font-mono, 'JetBrains Mono', ui-monospace, monospace); white-space: pre-wrap; overflow-wrap: anywhere; user-select: none; -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent); mask-image: linear-gradient(180deg, #000 42%, transparent); } @media (max-width: 1023px) { .castlock-desktop .cl-prompt-ghost { display: none; } } .castlock-desktop .cl-prompt-state[data-state="stale"] { color: var(--cl-film); } .castlock-desktop .cl-prompt-state[data-state="saved"] { color: var(--cl-data); } .castlock-desktop .cl-prompt-sources { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .75rem 0; } .castlock-desktop .cl-prompt-preview pre { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--cl-text); font: 400 .8rem/1.65 var(--font-mono, 'JetBrains Mono', monospace); } .castlock-desktop .cl-scene-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } @media (max-width: 767px) { .castlock-desktop .cl-build-app[data-active-view="scene"] { grid-template-rows: auto minmax(0, 1fr) auto; } .castlock-desktop .cl-build-app[data-active-view="library"] { grid-template-rows: auto auto minmax(0, 1fr) auto auto; } .castlock-desktop #libraryWorkspace .cl-contextbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .5rem; padding-block: .25rem; } .castlock-desktop #libraryWorkspace .cl-document-title { grid-column: 1; grid-row: 1; } .castlock-desktop #libraryWorkspace .cl-context-actions { grid-column: 1 / -1; grid-row: 2; } .castlock-desktop #libraryWorkspace .cl-document-state { grid-column: 2; grid-row: 1; margin-left: 0; } .castlock-desktop .cl-library .cl-region-head, .castlock-desktop .cl-library-foot { flex-wrap: nowrap; padding: .25rem .75rem; } .castlock-desktop .cl-library-filters { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: .25rem .75rem 0; } .castlock-desktop .cl-library-filters::-webkit-scrollbar { display: none; } .castlock-desktop .cl-library-filters .cl-control { flex: 0 0 auto; padding-inline: .45rem; white-space: nowrap; } .castlock-desktop .cl-library .cl-search { padding: .25rem .75rem 0; } .castlock-desktop .cl-library-card > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .castlock-desktop .cl-library-card .cl-library-actions { align-self: start; } .castlock-desktop .cl-segmented { width: 100%; order: 3; } .castlock-desktop .cl-segmented > * { flex: 1; justify-content: center; } .castlock-desktop .cl-scene-document-title { width: 100%; } .castlock-desktop .cl-scene-document-title input { width: 100%; min-width: 0; } .castlock-desktop .cl-scene-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content max-content; align-content: start; } .castlock-desktop .cl-scene-setup, .castlock-desktop .cl-scene-preview { min-height: max-content; } .castlock-desktop .cl-source-flow { grid-template-columns: minmax(0, 1fr); } .castlock-desktop .cl-scene-prepare-list li { grid-template-columns: 1fr; gap: .1rem; } .castlock-desktop .cl-source-plus { justify-self: center; } .castlock-desktop .cl-advanced-grid { grid-template-columns: minmax(0, 1fr); } .castlock-desktop .cl-scene-generate-bar { position: sticky; bottom: 0; z-index: 2; align-items: stretch; flex-direction: column; padding-block: .625rem; background: var(--cl-surface); } .castlock-desktop .cl-scene-generate-bar:has(#sceneGenerate[hidden]) { position: static; } .castlock-desktop .cl-scene-generate-bar .cl-primary { width: 100%; } .castlock-desktop .cl-new-entities, .castlock-desktop .cl-new-methods, .castlock-desktop .cl-photo-review { grid-template-columns: minmax(0, 1fr); } .castlock-desktop .cl-photo-review-note, .castlock-desktop .cl-photo-sources { grid-column: 1; } .castlock-desktop .toast [data-undo-delete] { min-height: 44px; } .castlock-desktop .cl-scene-actions { position: sticky; bottom: 0; padding-block: .5rem; background: var(--cl-surface); } } @media (prefers-reduced-motion: reduce) { .castlock-desktop .cl-scene-workspace, .castlock-desktop .cl-source-popover { scroll-behavior: auto; } } @media (max-width: 767px) { body.castlock-desktop :is(.cl-app, .modal-backdrop) :is( button, input:not([type="hidden"]):not([type="file"]), select, textarea, summary, a[href], [tabindex="0"] ) { min-width: 44px; min-height: 44px; } body.castlock-desktop .cl-app .cl-character #editor, body.castlock-desktop .cl-app .cl-shot-nav #shotList { overflow-x: hidden; } body.castlock-desktop .cl-app .cl-shot-nav .trace-head, body.castlock-desktop .cl-app .cl-shot-nav .shot-row { grid-template-columns: 44px minmax(0, 1fr) 80px 44px; } .castlock-desktop .cl-context-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .castlock-desktop .cl-build-app { grid-template-rows: auto auto minmax(0, 1fr) auto auto; } .castlock-desktop .cl-sequence-app { grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; } .castlock-desktop .cl-build-grid { grid-row: 3; } .castlock-desktop .cl-sequence-grid { grid-row: 4; } /* bottom: 0, not 32px: the 32px cleared the status bar, which is hidden at this width, and left the switcher floating above a strip of nothing. */ .castlock-desktop .cl-pane-switcher { position: sticky; bottom: 0; z-index: 3; } .castlock-desktop .cl-build-app .cl-pane-switcher { grid-row: 4; } .castlock-desktop .cl-sequence-app .cl-pane-switcher { grid-row: 5; } /* Phones: two of the status bar's three spans are already hidden here and the third is a privacy note the contextbar's save state stands in for. The 32px it costs is the difference between a usable record list and a two-card one (tests/castlock-visual-contract holds the list at 140px). */ .castlock-desktop .cl-statusbar { display: none; } .castlock-desktop .cl-build-app .cl-statusbar { grid-row: 5; } .castlock-desktop .cl-sequence-app .cl-statusbar { grid-row: 6; } .castlock-desktop .cl-style-shelf > .cl-style-fields { grid-template-columns: minmax(0, 1fr); max-height: min(34dvh, 17.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } } @media (min-width: 1024px) { .castlock-desktop .cl-build-grid { grid-template-columns: 200px minmax(0, 1fr) 260px; gap: .5rem; padding: .5rem; overflow: hidden; } .castlock-desktop .cl-sequence-grid { grid-template-columns: 240px 300px minmax(0, 1fr); gap: .5rem; padding: .5rem; overflow: hidden; } .castlock-desktop .cl-build-grid > .cl-region, .castlock-desktop .cl-sequence-grid > .cl-region { min-height: 0; overflow: hidden; } } @media (min-width: 1200px) { .castlock-desktop .cl-build-grid { grid-template-columns: minmax(220px, 240px) minmax(0, 1fr) minmax(300px, 340px); gap: .625rem; padding: .625rem; } .castlock-desktop .cl-sequence-grid { grid-template-columns: minmax(290px, 320px) minmax(400px, .9fr) minmax(0, 1.1fr); gap: .625rem; padding: .625rem; } } @media (prefers-reduced-motion: reduce) { html, body.castlock-desktop, body.castlock-desktop .cl-app, body.castlock-desktop .cl-app * { scroll-behavior: auto; } body.castlock-desktop .cl-app, body.castlock-desktop .cl-app *, body.castlock-desktop .cl-app *::before, body.castlock-desktop .cl-app *::after { animation: none; transition: none; } body.castlock-desktop .dvp-intro { display: none; } body.castlock-desktop .cl-app .cl-primary:hover, body.castlock-desktop .cl-app .cl-primary:active, body.castlock-desktop .cl-app .cl-quiet:active, body.castlock-desktop .toast, body.castlock-desktop .toast.is-visible, body.castlock-desktop .trace-spine { transform: none; } } /* ==== CastLock app shell: one workbench, one scroller per pane =========== The Build (index) and Sequence pages are applications, not documents. The shell uses the space below the site header and nothing sits under it, so the page itself never scrolls; each pane scrolls only when its own content overflows. Three things used to make the page scroll anyway: the cinematic masthead (300px of a fixed-height shell, collapsing only after an inner pane had been scrolled, and re-expanding when it scrolled back), the pipeline band and the site footer, both mounted below the shell. The masthead is now a slim info strip (eyebrow, status seal, slate counts) because the titlebar already carries the wordmark, and costs nothing on phones and short windows; the band mounts inside the shell as a compact rail, likewise dropped where there is no room; the footer stays in the DOM for the site-chrome contract (tests/dvp-site-chrome-render) but is hidden: the app's own status bar is this page's footer, and on phones nothing sits under the pane switcher. */ body.castlock-page .cl-shell{display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1} body.castlock-page .cl-shell>.cl-app{flex:1 1 auto;min-height:0;height:auto} .cl-masthead{flex:0 0 auto;position:relative;overflow:hidden;padding:.4rem clamp(1rem,3vw,1.5rem);border-bottom:1px solid color-mix(in srgb,var(--cl-muted) 16%,transparent)} .cl-masthead::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(120% 150% at 84% -30%,color-mix(in srgb,var(--cl-accent) 18%,transparent),transparent 55%),linear-gradient(180deg,#08111f,var(--cl-canvas))} /* One line at every width, by construction: nothing may wrap into a second row, because every pixel the strip grows comes out of the panes below it (the phone Library list has a 140px floor; a 600px-tall window has ~20px spare). The eyebrow drops below 1024px and the slate below 768px instead. */ .cl-masthead__inner{position:relative;z-index:1;display:flex;align-items:center;flex-wrap:nowrap;gap:1.25rem;min-height:26px;overflow:hidden} .cl-masthead__eyebrow{display:inline-flex;align-items:center;gap:.7rem;margin:0;font:600 .6rem/1 "JetBrains Mono",monospace;letter-spacing:.3em;text-transform:uppercase;color:var(--cl-muted);white-space:nowrap} .cl-masthead__eyebrow b{color:var(--cl-film);font-weight:600} .cl-masthead__eyebrow::before{content:"";width:24px;height:1px;background:var(--cl-accent)} /* The h1 stays for the document outline. The visible wordmark is the titlebar's brandmark, so only the status seal renders here; the name is clipped, not display:none, so it is still read out. */ .cl-masthead__wordmark{margin:0;display:inline-flex;align-items:center;font-size:.56rem;line-height:1;letter-spacing:0} .cl-masthead__wordmark .cast,.cl-masthead__wordmark .lock{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .cl-masthead__wordmark .seal{display:inline-flex;align-items:center;gap:.4rem;margin:0;padding:.26rem .5rem;border:1px solid color-mix(in srgb,var(--cl-accent) 48%,transparent);border-radius:2px;background:color-mix(in srgb,var(--cl-accent) 12%,transparent);font:600 .52rem/1 "JetBrains Mono",monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--cl-accent);transform:none} .cl-masthead__wordmark .seal::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cl-accent)} .cl-masthead__tagline,.cl-masthead__perf{display:none} .cl-slate{margin-left:auto;display:flex;flex-wrap:nowrap;gap:.3rem;min-width:0;overflow:hidden} .cl-slate__row{display:inline-flex;align-items:baseline;gap:.45rem;padding:.3rem .55rem;border:1px solid color-mix(in srgb,var(--cl-muted) 22%,transparent);border-radius:999px;background:color-mix(in srgb,var(--cl-surface) 70%,transparent)} .cl-slate__k{font:600 .5rem/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--cl-muted)} .cl-slate__v{font:700 .72rem/1 var(--font-display,'Archivo',system-ui,sans-serif);color:var(--cl-text)} .cl-slate__v.accent{color:var(--cl-accent)} .cl-slate__v.ok{color:var(--ok,#3ddc97)} @media(max-width:1023px){.cl-masthead__eyebrow{display:none}} /* Phones and short windows: the strip costs nothing. The old masthead used to collapse to 0px there in practice (its scroll-driven .is-slim fired on the first inner scroll), and every phone budget in tests/castlock-visual-contract and tests/castlock-browser was struck against that 0px. It stays in the accessibility tree (this is the page's h1) — clipped, not display:none. */ @media(max-width:767px), (max-height:720px){ .cl-masthead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} } /* Pipeline band as a rail inside the shell. js/dvp-loop-band.js renders the full marketing band (kicker, title, three cards, note, guide CTA) and owns the mount's className, so the compact treatment keys on the mount attribute the page itself wrote. Scoped to the shell child so the same band on CinePrompt and Vault is untouched. */ body.castlock-page .cl-shell>[data-char-pipeline]{flex:0 0 auto;margin:0;max-width:none;padding:.4rem clamp(1rem,3vw,1.5rem);border:0;border-top:1px solid color-mix(in srgb,var(--cl-muted) 16%,transparent);border-radius:0;background:color-mix(in srgb,var(--cl-surface) 55%,transparent);display:flex;align-items:center;flex-wrap:nowrap;gap:1rem;overflow:hidden} body.castlock-page .cl-shell>[data-char-pipeline] .cpb-kicker{margin:0;white-space:nowrap} body.castlock-page .cl-shell>[data-char-pipeline] .cpb-title, body.castlock-page .cl-shell>[data-char-pipeline] .cpb-desc, body.castlock-page .cl-shell>[data-char-pipeline] .cpb-verb, body.castlock-page .cl-shell>[data-char-pipeline] .cpb-loopnote{display:none} body.castlock-page .cl-shell>[data-char-pipeline] .cpb-flow{flex:1 1 auto;flex-wrap:nowrap;gap:.4rem;min-width:0} body.castlock-page .cl-shell>[data-char-pipeline] .cpb-step{flex:0 1 auto;display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .6rem;border-radius:999px;min-width:0} body.castlock-page .cl-shell>[data-char-pipeline] .cpb-step-top{margin:0} body.castlock-page .cl-shell>[data-char-pipeline] .cpb-n{width:1.1rem;height:1.1rem;font-size:.62rem} body.castlock-page .cl-shell>[data-char-pipeline] .cpb-name{margin:0;font-size:.74rem;white-space:nowrap} body.castlock-page .cl-shell>[data-char-pipeline] .cpb-here{margin-left:.25rem} body.castlock-page .cl-shell>[data-char-pipeline] .cpb-arrow{font-size:.95rem} body.castlock-page .cl-shell>[data-char-pipeline] .cpb-foot{margin:0;flex:0 0 auto} body.castlock-page .cl-shell>[data-char-pipeline] .cpb-cta{padding:.3rem .7rem;font-size:.6rem} /* Like the masthead, the rail is one line by construction: it wrapped to two rows at 800px wide (kicker + chips + guide link) and the second row came out of the app. Below 1024px only the three step chips remain. Phones and short windows drop it altogether: on a phone it would come straight out of the Library record list, which tests/castlock-visual-contract holds at a 140px floor, and at 600-720px tall the app already has less room than its popovers want (castlock-browser's default 800x600 window). The site header's pipeline nav carries the route in both cases. */ @media(max-width:1023px){ body.castlock-page .cl-shell>[data-char-pipeline] .cpb-kicker, body.castlock-page .cl-shell>[data-char-pipeline] .cpb-foot{display:none} } @media(max-width:767px), (max-height:720px){body.castlock-page .cl-shell>[data-char-pipeline]{display:none}} /* Nothing sits under the shell while it owns the window. */ body.castlock-page .dvp-site-footer{display:none} /* ── Edit Bay pipeline tier reconciliation ─────────────────────────────────── castlock/index.html and sequence.html carry `eb-pipeline-page eb-castlock-page` and load /css/edit-bay-pipeline.css — the same tier CinePrompt and FrameDNA use — so CastLock reads as part of the suite rather than its own product. The tier is written for marketing-shaped tool pages and reaches CastLock's app shell with blunt `!important` rules. These are the corrections. They are scoped to `eb-castlock-page` and placed last so they win at equal specificity, and they are deliberately narrow: the marketing masthead above the shell keeps the tier's treatment untouched. tests/castlock-visual-contract.test.mjs and tests/castlock-browser.test.mjs both police this boundary — run them after any change here. */ /* The tier paints every h1 span copper, flattening the wordmark to one colour. */ body.eb-castlock-page .cl-masthead__wordmark .cast { color: var(--cl-film) !important; } body.eb-castlock-page .cl-masthead__wordmark .lock { color: var(--cl-text) !important; } /* The tier gives main/.hero/footer `position: relative; z-index: 2` so its grid overlay sits behind the content. CastLock's modals are body-level, so that extra stacking context trapped them underneath and made confirm buttons unclickable — caught by "Sequence resets transient shot focus". */ body.eb-castlock-page :is(main, .main, .hero, footer) { position: static !important; z-index: auto !important; } /* Pills and 16px cards suit a marketing page with room to breathe. The app shell is dense, and its contract holds controls at 6px and panels at 12px. `.cl-app` and `.modal-backdrop` are its two surfaces — CastLock's own CSS already pairs them; modals sit at body level so they need naming explicitly. */ body.eb-castlock-page :is(.cl-app, .modal-backdrop) :is(button, .btn, .cl-control) { border-radius: var(--cl-radius-control) !important; } body.eb-castlock-page :is(.cl-app, .modal-backdrop) :is(input, textarea, select) { border-radius: var(--cl-radius-control) !important; background: color-mix(in srgb, var(--cl-shade) 72%, transparent) !important; } body.eb-castlock-page :is(.cl-app, .modal-backdrop) :is(.card, .panel, .cl-region) { border-radius: var(--cl-radius-panel) !important; } /* The tier gives every header/nav a gradient and a gold underline. Right for a masthead, wrong for an app titlebar — the contract requires flat app chrome. */ body.eb-castlock-page .cl-app :is(header, nav), body.eb-castlock-page .cl-titlebar, body.eb-castlock-page .cl-segmented { background-image: none !important; } /* The tier sizes every h1 with `!important` (`clamp(2.55rem, 13vw, 4.4rem)` on phones). The masthead h1 is now a strip that shows only its status seal, so the tier's size would open a tall empty line box above the titlebar. Restated here so CastLock's size wins at every width. */ body.eb-castlock-page .cl-masthead__wordmark { font-size: .56rem !important; line-height: 1 !important; }