/* Gristle editor styles, built on the kit's tokens so themes and densities apply. */

html, body { height: 100%; margin: 0; }

.ed-drop { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.ed-stage { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; background: var(--lt-surface-canvas); }
.ed-stage--rulers { grid-template: 20px minmax(0, 1fr) / 20px minmax(0, 1fr); }
.ed-stage__view { position: relative; min-width: 0; min-height: 0; overflow: hidden; grid-area: -2 / -2 / -1 / -1; }
.ed-ruler { display: block; width: 100%; height: 100%; touch-action: none; }
.ed-ruler--top { grid-area: 1 / 2; cursor: ns-resize; border-bottom: 1px solid var(--lt-border); box-sizing: border-box; }
.ed-ruler--left { grid-area: 2 / 1; cursor: ew-resize; border-right: 1px solid var(--lt-border); box-sizing: border-box; }
.ed-ruler-corner { grid-area: 1 / 1; background: var(--lt-surface-bar); border: solid var(--lt-border); border-width: 0 1px 1px 0; }
.ed-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; outline: none; }
.ed-canvas-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ed-canvas:focus-visible { box-shadow: inset 0 0 0 var(--lt-focus-width, 2px) var(--lt-focus); }

.ed-embed { display: flex; flex-direction: column; gap: var(--lt-gap); max-width: 560px; }
.ed-embed__steps { margin: 0; padding-left: 1.4em; color: var(--lt-text); }
.ed-embed__code { font-family: var(--lt-font-mono, ui-monospace, monospace); font-size: 12px; white-space: pre; }

.ed-prop-row { display: flex; align-items: flex-end; gap: var(--lt-gap-tight); }
.ed-prop-row__control { flex: 1; min-width: 0; }

/* Panels: the panel body or dialog supplies the inset (--lt-inset); content only sets gaps,
   matching the kit's .lt-stack / .lt-row / .lt-field / .lt-section. */
.ed-props, .ed-library, .ed-script, .ed-console {
  display: flex; flex-direction: column; gap: var(--lt-gap); padding: 0; min-width: 0;
}
/* Field panels and dialogs lay out on the kit's form grid (.lt-form). */
.ed-color, .ed-gradient, .ed-align, .ed-export, .ed-feedback { padding: 0; }
.lt-root .ed-props__title { font-size: calc(var(--lt-font-size) + 2px); line-height: var(--lt-line-height); font-weight: 600; margin: 0; color: var(--lt-text); overflow-wrap: anywhere; }
.ed-group { border: 0; border-top: 1px solid var(--lt-border); margin: 0; padding: var(--lt-gap) 0 0; }
.ed-group legend { font-size: calc(var(--lt-font-size) - 1px); font-weight: 600; color: var(--lt-text-muted); padding: 0 var(--lt-gap-tight) 0 0; text-transform: uppercase; letter-spacing: .04em; }
.ed-row { display: flex; align-items: center; gap: var(--lt-gap); flex-wrap: wrap; }
.ed-row--end { justify-content: flex-end; }
.ed-hint { color: var(--lt-text-muted); font-size: calc(var(--lt-font-size) - 1px); margin: 0; }
.ed-hint:empty { display: none; }
.ed-warning { color: var(--lt-warning); margin: 0; }
.ed-field { display: flex; flex-direction: column; gap: var(--lt-gap-tight); }
.ed-field label { color: var(--lt-text-muted); }
.lt-root .ed-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ed-stop-actions { display: flex; align-items: center; gap: var(--lt-gap-tight); }
.ed-text:focus-visible, .ed-textarea:focus-visible { outline: var(--lt-focus-width, 2px) solid var(--lt-focus); outline-offset: 1px; }
/* Buttons: every state is spelled out (Pico's own button states don't leak in), text is 7:1+
   (WCAG AAA) in light, dark and high-contrast themes, and hover/active tints sit on an opaque
   surface so the contrast never depends on what's behind the button. */
.lt-root .ed-btn {
  font: inherit; font-size: calc(var(--lt-font-size) - 1px); font-weight: 600;
  color: var(--lt-text); background: var(--lt-surface-raised); background-image: none;
  border: 1px solid var(--lt-border-strong); border-radius: var(--lt-radius); min-height: var(--lt-control-size); padding: 0 var(--lt-pad-x);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin: 0; width: auto;
  box-shadow: none; transition: none;
}
.lt-root .ed-btn:hover { color: var(--lt-text); background-color: var(--lt-surface-raised); background-image: linear-gradient(var(--lt-control-hover) 0 0); border-color: var(--lt-border-strong); }
.lt-root .ed-btn:active { color: var(--lt-text); background-color: var(--lt-surface-raised); background-image: linear-gradient(var(--lt-control-active) 0 0); }
.lt-root .ed-btn:focus { color: var(--lt-text); background-color: var(--lt-surface-raised); box-shadow: none; }
.lt-root .ed-btn:focus-visible { outline: var(--lt-focus-width, 2px) solid var(--lt-focus); outline-offset: 2px; }
.lt-root .ed-btn--primary,
.lt-root .ed-btn--primary:focus { color: var(--lt-accent-fg); background: var(--lt-accent); border-color: var(--lt-accent); }
.lt-root .ed-btn--primary:hover,
.lt-root .ed-btn--primary:active { color: var(--lt-accent-fg); background: var(--lt-accent-hover); border-color: var(--lt-accent-hover); }
/* Disabled: muted text (still 7:1+), dashed outline, no hover change. */
.lt-root .ed-btn:disabled,
.lt-root .ed-btn:disabled:hover,
.lt-root .ed-btn:disabled:active { opacity: 1; cursor: not-allowed; color: var(--lt-text-muted); background: var(--lt-surface-raised); border: 1px dashed var(--lt-border-strong); }
.lt-root .ed-link,
.lt-root .ed-link:hover,
.lt-root .ed-link:active,
.lt-root .ed-link:focus { font: inherit; background: none; border: 0; padding: 0; color: var(--lt-accent-text); cursor: pointer; text-decoration: underline; width: auto; margin: 0; }
.lt-root .ed-link:hover { text-decoration-thickness: 2px; }

/* Library */
.ed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ed-list__row { display: flex; align-items: center; gap: var(--lt-space-2); min-height: var(--lt-control-size); padding: 0 var(--lt-space-1); border-bottom: 1px solid var(--lt-border); }
.ed-list__folder { display: flex; align-items: center; gap: var(--lt-gap-tight); padding: var(--lt-gap-tight) var(--lt-inset); color: var(--lt-text-muted); font-weight: 600; }
.ed-list__folder svg { width: 16px; height: 16px; }
.ed-list__row--nested { padding-left: calc(var(--lt-inset) + 1.25em); }
.ed-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-list__meta { color: var(--lt-text-muted); font-size: calc(var(--lt-font-size) - 1px); }

/* Colour */
.ed-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.ed-swatch { aspect-ratio: 1; border: 1px solid var(--lt-border-strong); border-radius: 4px; padding: 0; cursor: pointer; min-width: 0; width: auto; margin: 0; }
.ed-swatch:focus-visible { outline: var(--lt-focus-width, 2px) solid var(--lt-focus); outline-offset: 1px; }
.ed-stops { height: 16px; border-radius: 4px; border: 1px solid var(--lt-border); }

/* Ease editor */
.ed-ease { display: flex; flex-direction: column; gap: var(--lt-space-2); }
.ed-ease__graph { width: 100%; max-width: 240px; background: var(--lt-surface-raised); border: 1px solid var(--lt-border); border-radius: var(--lt-radius); touch-action: none; }
.ed-ease__frame { fill: none; stroke: var(--lt-border); }
.ed-ease__linear { stroke: var(--lt-border); stroke-dasharray: 4 3; }
.ed-ease__curve { fill: none; stroke: var(--lt-accent); stroke-width: 2; }
.ed-ease__arm { stroke: var(--lt-text-muted); }
.ed-ease__handle { fill: var(--lt-surface-panel); stroke: var(--lt-accent); stroke-width: 2; cursor: grab; }
.ed-ease__point { fill: var(--lt-accent); cursor: grab; }
.ed-ease__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lt-space-1); }

/* Timeline */
.ed-timeline { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; contain: inline-size; }
.ed-timeline__body { display: flex; flex: 1; min-height: 0; overflow: auto; }
.ed-timeline__layers { list-style: none; margin: 20px 0 0; padding: 0; width: 220px; flex: none; border-right: 1px solid var(--lt-border); }
.ed-layer { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px; cursor: pointer; border-bottom: 1px solid var(--lt-border); }
.ed-layer--active { background: var(--lt-pressed-bg); color: var(--lt-pressed-fg); }
.ed-layer__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--lt-font-size) - 1px); }
.ed-layer__link { display: inline-flex; color: var(--lt-text-muted); }
.ed-layer__link svg { width: 14px; height: 14px; }
.ed-layer .lt-icon-button { width: 22px; height: 22px; min-width: 22px; }
.ed-timeline__grid { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; position: relative; }
.ed-timeline__spacer { height: 1px; position: relative; }
.ed-timeline__canvas { position: absolute; left: 0; top: 0; outline: none; }
.ed-timeline__canvas:focus-visible { box-shadow: inset 0 0 0 var(--lt-focus-width, 2px) var(--lt-focus); }
.ed-frame-counter { font-variant-numeric: tabular-nums; padding: 0 var(--lt-space-2); color: var(--lt-text-muted); }
.ed-breadcrumb { display: inline-flex; gap: 4px; align-items: center; }

/* Scripting */
.ed-script__editor { min-height: 220px; border: 1px solid var(--lt-border); border-radius: var(--lt-radius); overflow: hidden; display: flex; }
.ed-script__editor .cm-editor { flex: 1; font-size: 13px; }
.ed-script__fallback { flex: 1; border: 0; min-height: 220px; }
.ed-console__lines { list-style: none; margin: 0; padding: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow: auto; }
.ed-console__line { display: flex; gap: var(--lt-space-2); justify-content: space-between; padding: 2px var(--lt-space-1); border-bottom: 1px solid var(--lt-border); }
.ed-console__line--error { color: var(--lt-danger); }
.ed-preview { display: flex; flex-direction: column; gap: var(--lt-space-2); }
/* Test Movie: wider than a standard dialog; the frame fills it at the stage's proportions
   (set inline), no taller than leaves room for the title, hint and Close. The player letterboxes. */
.lt-root dialog.lt-dialog:has(.ed-preview) { width: min(60rem, calc(100vw - 2rem)); }
.ed-preview__frame { display: block; box-sizing: border-box; width: 100%; height: auto; max-height: calc(100vh - 12rem); border: 1px solid var(--lt-border); border-radius: var(--lt-radius); background: #111; }
.ed-templates, .ed-templates li { list-style: none; } .ed-templates { padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--lt-space-2); }
.ed-template-groups .ed-templates { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-templates > li { display: block; margin: 0; padding: 0; }
.ed-templates > li::marker { content: none; }
.lt-root .ed-template-groups .ed-templates button.ed-template { box-sizing: border-box; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; text-align: left; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.ed-template__size { color: var(--lt-text-muted); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.ed-template-groups { max-height: min(70vh, 640px); overflow-y: auto; display: grid; gap: var(--lt-space-3); padding-right: var(--lt-space-1); }
.ed-template-groups .ed-template-group h3 { --pico-font-size: 0.95rem; --pico-typography-spacing-vertical: var(--lt-space-1); font-size: 0.95rem; font-weight: 600; margin: 0 0 var(--lt-space-1); }
@media (min-width: 720px) { .ed-template-groups .ed-templates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Launch */
/* The top-right ad, in the shell's top aside beside the menu bar, options bar and toolbar row
   (they narrow to make room): a 728 × 90 leaderboard on wide screens, a 320 × 50 banner on
   smaller desktop ones, none below 1200 px. Its space is kept before ads are set up
   (.ed-ad--reserved), so turning them on never shifts the layout. */
.ed-ad { flex: none; width: 320px; height: 50px; overflow: hidden; }
@media (min-width: 1400px) { .ed-ad { width: 728px; height: 90px; } }
@media (max-width: 1199px) { .lt-shell__aside:has(> .ed-ad) { display: none; } }
/* A 300 × 250 ad's space in the export progress dialog. */
.ed-ad-rect { width: 300px; max-width: 100%; height: 250px; margin-inline: auto; border-radius: var(--lt-radius); background: var(--lt-surface-panel); border: 1px solid var(--lt-border); }
.ed-consent {
  position: fixed; left: 50%; bottom: calc(var(--lt-status-height, 28px) + 12px); transform: translateX(-50%); z-index: 1000;
  width: min(560px, calc(100vw - 32px)); background: var(--lt-surface-raised); color: var(--lt-text); border: 1px solid var(--lt-border-strong);
  border-radius: var(--lt-radius-lg); box-shadow: var(--lt-shadow); padding: var(--lt-space-3); display: flex; flex-direction: column; gap: var(--lt-space-2);
}
.ed-consent p { margin: 0; }
.ed-similar { border: 1px solid var(--lt-border); border-radius: var(--lt-radius); padding: var(--lt-space-2); }
.ed-similar p { margin: 0 0 4px; font-weight: 600; }
.ed-similar ul { margin: 0; padding-left: 1.2em; }

@media (max-width: 700px) {
  .ed-timeline__layers { width: 140px; }
}

/* The logo before the menus. */
.ed-menubar { display: flex; align-items: center; min-width: 0; }
.ed-menubar > .lt-menubar { flex: 1; min-width: 0; }
.ed-logo { flex: none; display: block; width: 18px; height: 18px; margin-inline-start: var(--lt-inset); border-radius: 4px; }


/* Frame picker: a grid of frame thumbnails (toggle buttons). */
.ed-frame-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--lt-gap-tight); margin-top: var(--lt-gap); }
.lt-root .ed-frame-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 24px; padding: 4px; border: 1px solid var(--lt-border); border-radius: var(--lt-radius); background: var(--lt-surface); color: var(--lt-text); font-size: calc(var(--lt-font-size) - 1px); cursor: pointer; }
.lt-root .ed-frame-pick:hover { background: var(--lt-hover, var(--lt-surface-raised)); }
.lt-root .ed-frame-pick[aria-pressed="true"] { border-color: var(--lt-accent); box-shadow: inset 0 0 0 1px var(--lt-accent); }
.ed-frame-pick img { width: 56px; height: 40px; object-fit: contain; background: repeating-conic-gradient(#0000 0 25%, #8882 0 50%) 0 0 / 8px 8px; }
@media (forced-colors: active) { .lt-root .ed-frame-pick[aria-pressed="true"] { border: 2px solid Highlight; } }

/* Export progress: a full-width bar with the percentage under it. */
.ed-export-progress { display: grid; gap: 0.5rem; width: min(320px, 80vw); }
.ed-export-progress progress { width: 100%; }
.ed-export-progress p { margin: 0; }