/* ============================================================================
   VidCompiler — demo interface
   Same palette and rhythm as danielrotkopf.com, so the demo and the portfolio
   read as one piece of work. Surfaces are separated by tone and space rather
   than by drawn boxes; borders appear only where an edge needs defining.
   ========================================================================== */

:root {
  --bg:        #131110;
  --surface:   #1c1917;
  --surface-2: #242020;
  --edge:      rgba(255, 244, 235, .07);

  --fg:        #f4f1ed;
  --fg-2:      #b3aaa2;
  --fg-3:      #8f867e;

  --acc:       #ff8a4c;
  --acc-ink:   #2a1206;
  --acc-soft:  rgba(255, 138, 76, .12);

  /* Model output keeps its own colour, blue, the way it does on the site. */
  --ml:        #60a5fa;
  --ml-deep:   #3b82f6;
  --ml-soft:   rgba(96, 165, 250, .12);

  --pos:       #4ade80;
  --neu:       #a8a29e;
  --neg:       #f87171;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-h1:   clamp(1.9rem, 3.4vw, 2.6rem);
  --t-h2:   clamp(1.3rem, 2.1vw, 1.6rem);
  --t-body: 1.0625rem;
  --t-sm:   .9375rem;
  --t-xs:   .8125rem;

  --col:   960px;
  --pad:   clamp(1.25rem, 5vw, 2.5rem);
  --block: clamp(2.25rem, 4.5vw, 3.5rem);
  --r:     16px;
  --r-sm:  10px;

  --ease: cubic-bezier(.25, .6, .3, 1);
  --fast: .18s;
  --mid:  .3s;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* One soft warm glow, low enough to read as room light. */
body::before {
  content: '';
  position: fixed; inset: -25% -20% auto -20%; height: 55vh;
  background: radial-gradient(50% 60% at 30% 25%, rgba(255, 138, 76, .07), transparent 72%);
  filter: blur(30px);
  pointer-events: none; z-index: 0;
}

h1, h2, h3 { color: var(--fg); margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

::selection { background: var(--acc); color: var(--acc-ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; background: var(--acc); color: var(--acc-ink); padding: .65rem 1.1rem; z-index: 200; border-radius: var(--r-sm); font-weight: 600; }
.skip:focus { left: 1rem; top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- header --- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem var(--pad);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: baseline; gap: .55rem; color: var(--fg); text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.brand .tag { color: var(--fg-3); font-size: var(--t-xs); font-weight: 400; }
.topbar nav { display: flex; gap: .25rem; align-items: center; }
.topbar nav a {
  font-size: var(--t-sm); color: var(--fg-2); text-decoration: none;
  padding: .4rem .8rem; border-radius: 999px;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.topbar nav a:hover { color: var(--fg); background: var(--surface); }
.topbar nav a.active { color: var(--fg); background: var(--surface); }

/* ---------------------------------------------------------------- layout --- */
main { position: relative; z-index: 1; max-width: var(--col); margin: 0 auto; padding: 0 var(--pad) var(--block); }
.band { padding-block: var(--block); }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--fg-2); max-width: 56ch; }
.hd { margin-bottom: 1.5rem; }
.hd p { margin-top: .6rem; }

.foot {
  border-top: 1px solid var(--edge); margin-top: var(--block);
  padding: 1.5rem var(--pad); display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; font-size: var(--t-sm); color: var(--fg-3);
  max-width: var(--col); margin-inline: auto;
}
.foot a { color: var(--fg-2); text-decoration: none; }
.foot a:hover { color: var(--fg); }

/* --------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: var(--t-sm); font-weight: 500;
  color: var(--fg); background: var(--surface);
  border: none; border-radius: 999px; padding: .7rem 1.3rem;
  text-decoration: none; cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { background: var(--surface-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--acc); color: var(--acc-ink); font-weight: 600; }
.btn-primary:hover { background: #ff9a63; }

/* ----------------------------------------------------------------- forms --- */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: var(--t-sm); color: var(--fg); margin-bottom: .45rem; }
.field .hint { font-size: var(--t-xs); color: var(--fg-3); margin: .35rem 0 0; }

textarea, input[type="text"], input[type="number"], select {
  width: 100%; font: inherit; font-size: var(--t-sm); color: var(--fg);
  background: var(--surface); border: 1px solid transparent; border-radius: var(--r-sm);
  padding: .8rem .9rem; resize: vertical;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--acc); background: var(--surface-2); }
textarea::placeholder, input::placeholder { color: var(--fg-3); }
textarea { min-height: 8.5rem; line-height: 1.6; }

.row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .row.two { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------- cards --- */
.card { background: var(--surface); border-radius: var(--r); padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.card + .card { margin-top: 1rem; }

/* ---------------------------------------------------------------- result --- */
.verdict { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.verdict .label { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; }
.verdict .conf { font-size: var(--t-sm); color: var(--fg-3); font-family: var(--mono); }
.is-positive { color: var(--pos); }
.is-neutral  { color: var(--neu); }
.is-negative { color: var(--neg); }

.scores { display: grid; gap: .55rem; }
.score { display: grid; grid-template-columns: 5.5rem 1fr 3.2rem; align-items: center; gap: .75rem; font-size: var(--t-sm); }
.score .k { color: var(--fg-2); }
.score .v { font-family: var(--mono); font-size: var(--t-xs); color: var(--fg-3); text-align: right; }
.meter { height: 8px; background: rgba(255, 244, 235, .06); border-radius: 999px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 999px; width: 0; transition: width .5s var(--ease); }
.meter .fill-positive { background: var(--pos); }
.meter .fill-neutral  { background: var(--neu); }
.meter .fill-negative { background: var(--neg); }

.meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--edge); font-size: var(--t-xs); color: var(--fg-3); }
.meta b { color: var(--fg-2); font-weight: 500; font-family: var(--mono); }

/* -------------------------------------------------------------- examples --- */
.examples { display: grid; gap: .6rem; }
.example {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid transparent; border-radius: var(--r-sm);
  padding: .85rem 1rem;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.example:hover { background: var(--surface-2); border-color: var(--edge); }
.example .q { color: var(--fg-2); font-size: var(--t-sm); line-height: 1.55; margin: 0; }
.example .tags { display: flex; gap: .5rem; align-items: center; margin-top: .55rem; font-size: var(--t-xs); color: var(--fg-3); }
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(255, 244, 235, .06); }
.pill.miss { color: var(--acc); background: var(--acc-soft); }

/* -------------------------------------------------------------- pipeline --- */
.pipeline { display: grid; gap: .75rem; counter-reset: step; }
@media (min-width: 760px) { .pipeline { grid-template-columns: repeat(5, 1fr); } }
.stage { background: var(--surface); border-radius: var(--r-sm); padding: .9rem 1rem; }
.stage .n { font-family: var(--mono); font-size: var(--t-xs); color: var(--acc); }
.stage h3 { font-size: .95rem; margin: .2rem 0 .3rem; }
.stage p { font-size: var(--t-xs); color: var(--fg-3); line-height: 1.5; margin: 0; }

/* ----------------------------------------------------------------- notes --- */
.note { background: var(--surface); border-left: 2px solid var(--acc); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: .9rem 1.1rem; font-size: var(--t-sm); color: var(--fg-2); }
.note b { color: var(--fg); font-weight: 600; }

.facts { display: grid; gap: .75rem; margin-top: 1.25rem; }
@media (min-width: 560px) { .facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.fact { background: var(--surface); border-radius: var(--r-sm); padding: .8rem 1rem; }
.fact .k { display: block; font-size: var(--t-xs); color: var(--fg-3); }
.fact .v { color: var(--fg); font-size: var(--t-sm); font-family: var(--mono); }

/* --------------------------------------------------------------- spinner --- */
.working { display: flex; align-items: center; gap: .8rem; font-size: var(--t-sm); color: var(--fg-2); }
.dots { display: inline-flex; gap: .3rem; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); animation: pulse 1.2s var(--ease) infinite; }
.dots i:nth-child(2) { animation-delay: .16s; }
.dots i:nth-child(3) { animation-delay: .32s; }
@keyframes pulse { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 560px) {
  /* The title and three nav items will not share a line at this width. Two
     rows beats a title that wraps around the nav. */
  .topbar { flex-wrap: wrap; row-gap: .35rem; padding-block: .8rem; }
  .brand { width: 100%; white-space: nowrap; }
  .brand .tag { display: none; }
  .topbar nav { margin-left: -.6rem; }
  .topbar nav a { padding: .35rem .6rem; }
  .score { grid-template-columns: 4.75rem 1fr 3rem; }
}


/* ------------------------------------------------------------------ drop --- */
.drop {
  border: 1px dashed rgba(255, 244, 235, .14); border-radius: var(--r);
  padding: clamp(1.4rem, 4vw, 2.4rem); text-align: center;
  background: var(--surface);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.drop.over { border-color: var(--acc); background: var(--surface-2); }
.drop h2 { font-size: var(--t-h2); margin-bottom: .4rem; }
.drop p { color: var(--fg-3); font-size: var(--t-sm); }
.drop .actions { justify-content: center; margin-top: 1rem; }
input[type="file"] { display: none; }

/* ---------------------------------------------------------------- frames --- */
.frames {
  display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .4rem;
  scrollbar-width: thin;
}
.frames figure { margin: 0; flex: 0 0 auto; }
.frames img {
  display: block; width: clamp(150px, 26vw, 260px); height: auto;
  border-radius: var(--r-sm); background: #000;
  /* One image pixel is one 4x4 block. Smoothing would blur the very thing
     the picture is of. */
  image-rendering: pixelated;
}
.frames figcaption {
  font-size: var(--t-xs); color: var(--fg-3); margin-top: .4rem;
  font-family: var(--mono);
}

/* --------------------------------------------------------------- verdict --- */
.check { display: flex; align-items: center; gap: .6rem; font-size: var(--t-sm); }
.check .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); }
.check.bad .dot { background: var(--neg); }
.check b { color: var(--fg); font-weight: 600; }

.grid-facts { display: grid; gap: .75rem; margin-top: 1.2rem; }
@media (min-width: 560px) { .grid-facts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }