/* imagetovideo.dev - layered over site.css, never replacing it.
 *
 * A GRADING SUITE, not a launch page. Every site about AI video is a dark
 * gradient, a glow, a looping hero reel and a "Try it free" button; this one
 * sells nothing and its content is comparison tables and dated capability
 * claims, so it takes the other half of the reference: the dark neutral of an
 * editing application, where the only saturated colour on screen is the
 * footage itself.
 *
 * The dark set is the base and the light set is the override, which is the
 * reverse of every other theme here: the subject is moving images, the reader
 * is comparing frames, and a white page beside a video thumbnail destroys the
 * thumbnail. But the reader's own preference still wins - a system asking for
 * light gets light, because overriding that is not a design decision, it is
 * ignoring someone. Both sets are measured against WCAG, not just the one the
 * author happened to look at.
 *
 * Cyan for the accent because it is the colour a timeline playhead has been in
 * every editor for thirty years, and because it clears contrast on this ground
 * at a size where a blue would not.
 *
 * The date stamp is a first-class design element here. Everything on this site
 * rots - a model's limits change monthly - so "checked in September 2026" is
 * not a footnote, it is the most useful thing on the page, and it is styled as
 * such rather than hidden in grey six-point type.
 */

:root[data-site="imagetovideo"] {
  --paper: #0d1117;
  --paper-alt: #161c26;

  --ink: #e8edf5;                /* 14.9:1 on the ground */
  --ink-soft: #b7c0cf;
  --ink-faint: #8b96a8;          /* 6.6:1 - still readable on a phone outdoors */

  --accent: #56c7e8;             /* playhead cyan */
  --accent-ink: #56c7e8;         /* site.css spends this on TEXT */
  --on-accent: #08131a;          /* and this is what sits ON the accent */
  --accent-soft: #102a35;

  --line: #26303d;
  --radius: 6px;
  --measure: 38rem;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --header-bg: #0d1117;
  --header-line: #26303d;
  --brand-word-ink: #e8edf5;
  --subbar-bg: #161c26;
  --subbar-line: #26303d;
  --subbar-ink: #e8edf5;
  --subbar-label: #56c7e8;

  --hero-bg: #141a24;
  --rail-surface: #161c26;
  --rail-line: #26303d;
  --rail-head: #1d2633;
  --rail-head-ink: #e8edf5;
  --tile-ink: #08131a;
  --drawer-bg: #0d1117;
  --drawer-line: #26303d;
  --drawer-field: #161c26;
  --share-bg: #161c26;
  --warn-bg: #2a2413;
  --warn-line: #4a3f1c;
}

/* The reader whose system asks for light gets light, and it is a real theme
   rather than an inversion: paper, ink, and the cyan darkened until it carries
   text on white. */
@media (prefers-color-scheme: light) {
  :root[data-site="imagetovideo"]:not([data-theme="dark"]) {
    --paper: #ffffff;
    --paper-alt: #f2f5f8;
    --ink: #10151c;
    --ink-soft: #3d4756;
    --ink-faint: #5b6674;
    --accent: #0b6d8c;           /* 5.6:1 on white */
    --accent-ink: #0b6d8c;
    --on-accent: #ffffff;
    --accent-soft: #e2f1f7;
    --line: #d9e0e8;
    --header-bg: #ffffff;
    --header-line: #d9e0e8;
    --brand-word-ink: #10151c;
    --subbar-bg: #10151c;
    --subbar-ink: #ffffff;
    --subbar-line: #0a0e14;
    --subbar-label: #7fd6ee;
    --hero-bg: #f2f5f8;
    --rail-surface: #ffffff;
    --rail-line: #d9e0e8;
    --rail-head: #10151c;
    --rail-head-ink: #ffffff;
    --drawer-bg: #ffffff;
    --drawer-line: #d9e0e8;
    --drawer-field: #f2f5f8;
    --share-bg: #f2f5f8;
    --warn-bg: #fdf6e7;
    --warn-line: #e8d9ab;
  }
}

:root[data-site="imagetovideo"] body { background: var(--paper); color: var(--ink); }

/* Model names, resolutions, clip lengths and VRAM figures are all short
   alphanumeric tokens that must not be confused with prose. */
:root[data-site="imagetovideo"] code,
:root[data-site="imagetovideo"] .spec-table td,
:root[data-site="imagetovideo"] .key-facts {
  font-family: var(--mono);
  font-size: .92em;
  font-variant-numeric: tabular-nums;
}
:root[data-site="imagetovideo"] code {
  background: var(--accent-soft);
  padding: .1em .35em;
  border-radius: 3px;
}

/* A comparison table is the point of half this site, so it gets a sticky head
   and its own surface rather than sitting flush in the prose. */
:root[data-site="imagetovideo"] .spec-table,
:root[data-site="imagetovideo"] table {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
:root[data-site="imagetovideo"] th {
  background: var(--rail-head);
  color: var(--rail-head-ink);
  position: sticky; top: 0;
}

/* The date a claim was checked. Loud on purpose: on this subject a page with
   no date is worse than no page, because the reader cannot tell whether they
   are reading about this month's model or last year's. */
:root[data-site="imagetovideo"] .checked-on,
:root[data-site="imagetovideo"] .spec-source,
:root[data-site="imagetovideo"] .article-updated {
  display: inline-block;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--accent-ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  padding: .2em .5em;
}

/* Prose links: underlined and tinted, so no surface change can hide them. */
:root[data-site="imagetovideo"] .prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* A wide model-comparison table scrolls inside its own box on a phone rather
   than pushing the page sideways. */
:root[data-site="imagetovideo"] .table-wrap,
:root[data-site="imagetovideo"] .spec-table-wrap { overflow-x: auto; }

/* --- the prompt builder --------------------------------------------------- */

:root[data-site="imagetovideo"] .tool {
  background: var(--paper-alt);
  border: 1px solid var(--line);
}
.pb-wide { flex: 1 1 100%; }
.pb-output-wrap { position: relative; margin: 1.2rem 0 .4rem; }
.pb-label {
  display: block; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-faint); margin-bottom: .35rem;
}
.pb-output {
  width: 100%; font: inherit; font-family: var(--mono); font-size: .92rem;
  line-height: 1.5; padding: .8rem 5.2rem .8rem .8rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); resize: vertical;
}
.pb-copy {
  position: absolute; right: .5rem; bottom: .6rem;
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .35rem .75rem; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: 4px;
}
.pb-copy:hover { filter: brightness(1.08); }
.pb-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pb-note {
  font-size: .84rem; color: var(--ink-soft);
  margin: .4rem 0 1rem; max-width: 52ch;
}
.pb-note:empty { display: none; }
.pb-why { font-size: .9rem; margin-top: .6rem; }
.pb-why p { max-width: 58ch; }