/* Video to GIF: the artifact (decisions/027, 030). A late-1980s CompuServe terminal session in amber phosphor.
   Everything here sits under [data-artifact="video-to-gif"]; nothing reaches the cabinet. Colours and type come from
   video-to-gif-palette.css as var(--v2g-…). The picture, the crop canvases and the result GIF keep their own colours:
   no scanline, glow or tint is ever drawn over them. */
[data-artifact="video-to-gif"] [hidden] { display: none !important; }

[data-artifact="video-to-gif"] {
  box-sizing: border-box;
  max-width: 62rem;
  margin: 0 0 1rem;
  padding: 0.5rem;
  border: 3px solid var(--v2g-rule);
  background: var(--v2g-bg);
  color: var(--v2g-ink);
  font: var(--v2g-text);
  text-shadow: 0 0 5px var(--v2g-glow);
}
[data-artifact="video-to-gif"] *, [data-artifact="video-to-gif"] *::before, [data-artifact="video-to-gif"] *::after { box-sizing: border-box; }
[data-artifact="video-to-gif"] p { margin: 0; }
[data-artifact="video-to-gif"] .v2g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The login banner: the modem line, the title, the sysop's message. Scanlines sit on this chrome only. */
[data-artifact="video-to-gif"] .v2g-banner { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 1rem; margin-bottom: 0.5rem; padding: 0.25rem 0.5rem; border-bottom: 2px solid var(--v2g-rule); background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--v2g-scan) 2px 3px); }
[data-artifact="video-to-gif"] .v2g-strip { grid-column: 2; grid-row: 1; display: flex; gap: 1rem; justify-content: flex-end; font: var(--v2g-text-s); color: var(--v2g-muted); letter-spacing: 0.05em; }
[data-artifact="video-to-gif"] .v2g-title { margin: 0; font: var(--v2g-title-font); color: var(--v2g-ink); letter-spacing: 0.02em; }
[data-artifact="video-to-gif"] .v2g-sysop { margin-top: 0.75rem; padding: 0.25rem 0.5rem; border-top: 2px solid var(--v2g-rule); font: var(--v2g-text-s); color: var(--v2g-muted); overflow-wrap: anywhere; }
[data-artifact="video-to-gif"] .v2g-title { white-space: nowrap; }
@media (max-width: 36rem) {
  [data-artifact="video-to-gif"] .v2g-strip span + span { display: none; }
  [data-artifact="video-to-gif"] .v2g-title { font: var(--v2g-title-font-s); }
}
@media (prefers-reduced-motion: no-preference) {
  [data-artifact="video-to-gif"] .v2g-title::after { content: "_"; margin-left: 0.15em; animation: v2g-cursor 1.1s steps(1) infinite; }
}
@keyframes v2g-cursor { 50% { opacity: 0; } }

[data-artifact="video-to-gif"] .v2g { max-width: none; margin-bottom: 0; }

/* Menu: two lines, the chosen one in inverse video. The radios stay real, so the arrow keys and screen readers work. */
[data-artifact="video-to-gif"] .v2g-modes { display: flex; width: 100%; margin: 0 0 0.5rem; padding: 0; border: 2px solid var(--v2g-rule); background: var(--v2g-panel); }
[data-artifact="video-to-gif"] .v2g-mode { position: relative; flex: 1; margin: 0; }
[data-artifact="video-to-gif"] .v2g-mode input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
[data-artifact="video-to-gif"] .v2g-mode label { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 1rem; font: var(--v2g-text-b); color: var(--v2g-ink); }
[data-artifact="video-to-gif"] .v2g-mode input:checked + label { background: var(--v2g-inv-bg); color: var(--v2g-inv-ink); text-shadow: none; }
[data-artifact="video-to-gif"] .v2g-mode input:focus-visible + label { outline: 3px solid var(--v2g-focus); outline-offset: -5px; }
@media (min-width: 60rem) {
  [data-artifact="video-to-gif"] .v2g-modes { display: inline-flex; width: auto; }
  [data-artifact="video-to-gif"] .v2g-mode { flex: none; }
}

/* Fields: a prompt and its answer. */
[data-artifact="video-to-gif"] .v2g-field { display: flex; flex-direction: column; gap: 0.125rem; margin: 0.5rem 0; }
[data-artifact="video-to-gif"] .v2g-field label { font: var(--v2g-text-s); color: var(--v2g-muted); }
[data-artifact="video-to-gif"] input:not([type="checkbox"], [type="range"], [type="radio"]), [data-artifact="video-to-gif"] select {
  font: var(--v2g-text);
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--v2g-rule);
  border-radius: 0;
  background: var(--v2g-bg);
  color: var(--v2g-ink);
}
[data-artifact="video-to-gif"] :is(input, select, button, summary, canvas, a):focus-visible { outline: 3px solid var(--v2g-focus); outline-offset: 2px; }
[data-artifact="video-to-gif"] input[type="range"] { accent-color: var(--v2g-ink); min-height: 2.75rem; }
[data-artifact="video-to-gif"] input[type="checkbox"] { accent-color: var(--v2g-ink); width: 1.5rem; height: 1.5rem; flex: none; }
[data-artifact="video-to-gif"] input[type="file"]::file-selector-button { margin-right: 0.75rem; min-height: 2rem; padding: 0 0.75rem; border: 2px solid var(--v2g-ink); border-radius: 0; background: var(--v2g-inv-bg); color: var(--v2g-inv-ink); font: var(--v2g-text-b); cursor: pointer; }
[data-artifact="video-to-gif"] input[type="color"] { min-height: 2.75rem; width: 100%; padding: 0.25rem; }
[data-artifact="video-to-gif"] .v2g-check { flex-direction: row; align-items: center; gap: 0.75rem; }
[data-artifact="video-to-gif"] .v2g-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 1rem; }
[data-artifact="video-to-gif"] .v2g-grid-4 { grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); }
[data-artifact="video-to-gif"] output { color: var(--v2g-ink); font: inherit; }
[data-artifact="video-to-gif"] .v2g-note { font: var(--v2g-text-s); color: var(--v2g-muted); margin: 0.5rem 0; }
[data-artifact="video-to-gif"] .v2g-error { padding: 0.75rem; border: 2px solid var(--v2g-danger); background: var(--v2g-panel); color: var(--v2g-danger); }
[data-artifact="video-to-gif"] .v2g-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.5rem 0; }
[data-artifact="video-to-gif"] .v2g-progress { width: 100%; height: 1.5rem; accent-color: var(--v2g-ink); }
[data-artifact="video-to-gif"] .v2g-size { font: var(--v2g-text-s); color: var(--v2g-muted); }

/* Buttons: menu keys. A box in the rule colour; the main action is inverse video. */
[data-artifact="video-to-gif"] .v2g-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1rem; border: 2px solid var(--v2g-ink); border-radius: 0; background: var(--v2g-bg); color: var(--v2g-ink); font: var(--v2g-text-b); text-decoration: none; cursor: pointer; }
[data-artifact="video-to-gif"] .v2g-btn-primary, [data-artifact="video-to-gif"] .v2g-btn[aria-pressed="true"] { background: var(--v2g-inv-bg); color: var(--v2g-inv-ink); text-shadow: none; }
[data-artifact="video-to-gif"] .v2g-btn-secondary { background: var(--v2g-panel); }
[data-artifact="video-to-gif"] .v2g-views .v2g-btn[aria-pressed="false"] { background: var(--v2g-panel); color: var(--v2g-ink); }
[data-artifact="video-to-gif"] .v2g-btn-quiet { border-color: var(--v2g-rule); background: transparent; }
[data-artifact="video-to-gif"] .v2g-btn-sm { min-height: 2.75rem; padding: 0 0.75rem; }
[data-artifact="video-to-gif"] .v2g-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Picking a file: an UPLOAD> prompt above the bench. The bench is on the page before a file is open (#96), so the strip is the same size throughout. */
[data-artifact="video-to-gif"] .v2g-drop { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 9rem; padding: 2rem 1rem 0.5rem; border: 2px dashed var(--v2g-rule); background: var(--v2g-panel); }
[data-artifact="video-to-gif"] .v2g-drop::before { content: "UPLOAD>"; content: "UPLOAD>" / ""; position: absolute; top: 0.25rem; left: 0.75rem; font: var(--v2g-text-s); color: var(--v2g-muted); }
[data-artifact="video-to-gif"] .v2g-drop .v2g-field { margin: 0 0 0.5rem; }
[data-artifact="video-to-gif"] .v2g-drop:has(+ .v2g-bench) { min-height: 0; padding: 0.25rem 0.75rem; margin-bottom: 0.5rem; }
[data-artifact="video-to-gif"] .v2g-drop:has(+ .v2g-bench) .v2g-note, [data-artifact="video-to-gif"] .v2g-drop:has(+ .v2g-bench)::before { display: none; }
[data-artifact="video-to-gif"].is-over .v2g-drop, [data-artifact="video-to-gif"] .v2g.is-over .v2g-drop, [data-artifact="video-to-gif"] .v2g.is-over .v2g-plate { border-color: var(--v2g-ink); border-style: solid; background: var(--v2g-bg); }
[data-artifact="video-to-gif"] .v2g-drop:has(+ .v2g-bench) .v2g-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[data-artifact="video-to-gif"] .v2g-drop:has(+ .v2g-bench) { padding-block: 0; border: 0; background: none; }

/* The bench: the picture and its timeline on one side, the controls on the other. */
[data-artifact="video-to-gif"] .v2g-bench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-items: start; }
[data-artifact="video-to-gif"] .v2g-plate { position: relative; display: grid; place-items: center; min-height: calc(17svh + 1rem); padding: 0.5rem 0; border: 2px solid var(--v2g-rule); background: var(--v2g-well); color: var(--v2g-well-ink); overflow: hidden; }
[data-artifact="video-to-gif"] .v2g-plate canvas { display: block; width: auto; max-width: 100%; max-height: 17svh; height: auto; margin: 0 auto; }
[data-artifact="video-to-gif"] .v2g-decoder { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* The crop canvases read these three custom properties for their overlay colours. */
[data-artifact="video-to-gif"] .v2g-crop { touch-action: none; cursor: crosshair; --v2g-dim: var(--v2g-dim-canvas); --v2g-line: var(--v2g-crop-line); --v2g-handle: var(--v2g-crop-handle); }
[data-artifact="video-to-gif"] .v2g-crop[data-over="corner"] { cursor: nwse-resize; }
[data-artifact="video-to-gif"] .v2g-crop[data-over="inside"] { cursor: move; }
[data-artifact="video-to-gif"] .v2g-views { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0; }
[data-artifact="video-to-gif"] .v2g-empty-prompt { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 1rem; text-align: center; font: var(--v2g-text-s); color: var(--v2g-well-ink); text-shadow: none; pointer-events: none; }
[data-artifact="video-to-gif"] .v2g-bench:not([data-empty]) .v2g-empty-prompt { display: none; }

/* The timeline: a scrubber for where you are, and a bar with two handles for the part you keep. */
[data-artifact="video-to-gif"] .v2g-timeline { margin-top: 0.25rem; }
[data-artifact="video-to-gif"] .v2g-scrub { margin: 0; }
[data-artifact="video-to-gif"] .v2g-scrub input[type="range"] { min-height: 2.25rem; }
[data-artifact="video-to-gif"] .v2g-scrub label { display: flex; justify-content: space-between; }
[data-artifact="video-to-gif"] .v2g-trim { --from: 0; --to: 100; position: relative; height: 3.5rem; margin: 0 0.75rem; touch-action: none; cursor: pointer; }
[data-artifact="video-to-gif"] .v2g-trim::before { content: ""; position: absolute; inset: 0.75rem 0 auto; height: 1.25rem; border: 2px solid var(--v2g-rule); background: var(--v2g-panel); }
[data-artifact="video-to-gif"] .v2g-trim::after { content: ""; position: absolute; top: 0.75rem; height: 1.25rem; inset-inline-start: calc(var(--from) * 1%); width: calc((var(--to) - var(--from)) * 1%); border: 2px solid var(--v2g-ink); background: var(--v2g-span); pointer-events: none; }
[data-artifact="video-to-gif"] .v2g-trim-label { position: absolute; inset: auto 0 0; text-align: center; font: var(--v2g-text-s); color: var(--v2g-muted); pointer-events: none; }
[data-artifact="video-to-gif"] .v2g-handle { --pos: 0; position: absolute; top: 0; width: 1.5rem; height: 2.75rem; padding: 0; inset-inline-start: calc(var(--pos) * 1%); transform: translateX(-50%); z-index: 1; border: 2px solid var(--v2g-ink); border-radius: 0; background: var(--v2g-inv-bg); cursor: ew-resize; touch-action: none; }
[data-artifact="video-to-gif"] .v2g-handle::before { content: ""; position: absolute; inset: 0 -0.5rem; }
[data-artifact="video-to-gif"] .v2g-handle:focus-visible { outline: 3px solid var(--v2g-focus); outline-offset: 3px; }

/* The result takes the place of the picture and its timeline. */
[data-artifact="video-to-gif"] .v2g-main:has(.v2g-result:not([hidden])) .v2g-view { display: none; }
[data-artifact="video-to-gif"] .v2g-gif { display: block; max-width: 100%; height: auto; margin: 0 auto 0.75rem; border: 2px solid var(--v2g-rule); background: var(--v2g-well); }

/* Controls */
[data-artifact="video-to-gif"] .v2g-panel { display: flex; flex-direction: column; }
[data-artifact="video-to-gif"] .v2g-set, [data-artifact="video-to-gif"] .v2g-more { margin: 0 0 0.75rem; padding: 0.25rem 1rem 0.5rem; border: 2px solid var(--v2g-rule); background: var(--v2g-panel); }
[data-artifact="video-to-gif"] .v2g-set legend { font: var(--v2g-text-b); color: var(--v2g-ink); padding: 0 0.5rem; }
[data-artifact="video-to-gif"] .v2g-more summary { cursor: pointer; display: flex; align-items: center; min-height: 2.75rem; font: var(--v2g-text-b); color: var(--v2g-ink); }
[data-artifact="video-to-gif"] .v2g-bar { order: 2; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--v2g-rule); }
[data-artifact="video-to-gif"] .v2g-grid-main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 0.5rem; }
[data-artifact="video-to-gif"] .v2g-grid-main .v2g-field label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-artifact="video-to-gif"] .v2g-grid-main input[type="number"] { padding-inline: 0.5rem; }
[data-artifact="video-to-gif"] .v2g-logbox { margin: 0.75rem 0; font: var(--v2g-text-s); }
[data-artifact="video-to-gif"] .v2g-logbox summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; color: var(--v2g-ink); }
[data-artifact="video-to-gif"] .v2g-log { margin: 0; padding: 0.75rem 1rem 0.75rem 2rem; max-height: 13rem; overflow: auto; background: var(--v2g-well); border: 2px solid var(--v2g-rule); color: var(--v2g-well-ink); text-shadow: none; }
[data-artifact="video-to-gif"] .v2g-log li[data-kind="error"] { color: var(--v2g-danger); }

/* The first screen (#54, #96): once a file is open, the stage, the trim bar and the main controls sit above the fold at 375x667 and 1280x800.
   The hint line reserves the room the loaded estimate takes, so nothing moves when a file opens. */
[data-artifact="video-to-gif"] .v2g-lede { display: grid; min-height: 4.5rem; align-content: start; }
[data-artifact="video-to-gif"] .v2g-lede > .v2g-note { grid-area: 1 / 1; margin: 0.5rem 0; }
[data-artifact="video-to-gif"] .v2g-bench:not([data-empty]) .v2g-hint, [data-artifact="video-to-gif"] .v2g-bench[data-empty] .v2g-lede > .v2g-note:not(.v2g-hint) { visibility: hidden; }
/* A rejected file leaves the bench empty again; the last frame and file line must not linger under the prompt. */
[data-artifact="video-to-gif"] .v2g-bench[data-empty] canvas, [data-artifact="video-to-gif"] .v2g-bench[data-empty] #v2g-info, [data-artifact="video-to-gif"] .v2g-bench[data-empty] #ge-info { visibility: hidden; }
[data-artifact="video-to-gif"] .v2g-bench[data-empty] :disabled { cursor: not-allowed; }
[data-artifact="video-to-gif"] #v2g-info, [data-artifact="video-to-gif"] #ge-info { display: none; }
@media (max-width: 59.99rem) {
  [data-artifact="video-to-gif"] .v2g-bench { gap: 0.5rem; }
  [data-artifact="video-to-gif"] .v2g-plate { min-height: calc(10svh + 1rem); padding: 0.25rem 0; }
  [data-artifact="video-to-gif"] .v2g-plate canvas { max-height: 10svh; }
  [data-artifact="video-to-gif"] .v2g-modes { margin-bottom: 0.25rem; }
}
@media (min-width: 60rem) {
  [data-artifact="video-to-gif"] .v2g-bench { grid-template-columns: minmax(0, 34rem) minmax(20rem, 1fr); gap: 1.5rem; }
  [data-artifact="video-to-gif"] .v2g-plate { min-height: calc(44svh + 1.5rem); }
  [data-artifact="video-to-gif"] .v2g-plate canvas { max-height: 44svh; }
  [data-artifact="video-to-gif"] .v2g-bar { order: 0; }
  [data-artifact="video-to-gif"] #v2g-info, [data-artifact="video-to-gif"] #ge-info { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2lh; margin: 0.25rem 0; }
}

/* The preview canvas lends its font to the captions burned into the exported GIF, so it keeps the site's own sans,
   not the terminal face the rest of the artifact wears. */
[data-artifact="video-to-gif"] .v2g-preview { font-family: var(--font-sans); text-shadow: none; }