/* ==========================================================================
   Video Compressor — client-side transcode surface
   Hallmark · macrostructure: Workbench · genre: modern-minimal
   anchor hue 70 (warm clay) · one accent · no gradients, no eyebrows
   Every colour, font, duration and easing below is a token. No inline values.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* -- colour: paper → ink, tinted toward the anchor hue -------------------- */
  --color-paper:      oklch(97.5% 0.007 70);
  --color-paper-2:    oklch(94.5% 0.010 70);
  --color-paper-3:    oklch(91.5% 0.012 70);
  --color-rule:       oklch(86%   0.012 70);
  /* rule-firm draws control boundaries → must clear 3:1 against paper.
     neutral carries helper text → must clear 4.5:1. Both are measured. */
  --color-rule-firm:  oklch(60%   0.014 70);
  --color-neutral:    oklch(49%   0.012 68);
  --color-muted:      oklch(43%   0.012 66);
  --color-ink:        oklch(21%   0.014 62);
  --color-accent:     oklch(52%   0.162 48);
  --color-accent-dim: oklch(52%   0.162 48 / 0.10);
  --color-accent-ink: oklch(98%   0.010 70);
  --color-focus:      oklch(52%   0.162 48);
  --color-danger:     oklch(46%   0.175 25);
  --color-good:       oklch(45%   0.105 150);

  /* -- type ---------------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "Menlo", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.375rem;
  --text-xl:   2rem;
  --text-2xl:  2.75rem;

  /* -- space (4px base) ---------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* -- motion -------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* -- z scale ------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:      oklch(15%   0.010 70);
    --color-paper-2:    oklch(18.5% 0.012 70);
    --color-paper-3:    oklch(22%   0.013 70);
    --color-rule:       oklch(29%   0.013 70);
    --color-rule-firm:  oklch(49%   0.014 70);
    --color-neutral:    oklch(64%   0.011 70);
    --color-muted:      oklch(74%   0.009 70);
    --color-ink:        oklch(94%   0.008 75);
    --color-accent:     oklch(72%   0.135 54);
    --color-accent-dim: oklch(72%   0.135 54 / 0.14);
    --color-accent-ink: oklch(17%   0.020 60);
    --color-focus:      oklch(72%   0.135 54);
    --color-danger:     oklch(70%   0.150 27);
    --color-good:       oklch(72%   0.105 152);
  }
  body { font-weight: 350; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

/* `hidden` must beat the display rules further down — .field is a flex box and
   would otherwise render right through it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--color-ink);
  text-decoration-color: var(--color-rule-firm);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Shell — Workbench: compact masthead, tool takes the page
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: 63rem;
  margin: 0 auto;
  padding: 0 var(--s-5) var(--s-8);
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-5) 0 var(--s-4);
}

.mark {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.mark::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: translateY(-1px);
}

.masthead .support {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.support[data-tone="warn"] { color: var(--color-danger); }

/* --------------------------------------------------------------------------
   Lede — content-height, left-biased. No 100vh hero.
   -------------------------------------------------------------------------- */

.lede {
  border-top: 1px solid var(--color-rule);
  padding: var(--s-6) 0 var(--s-6);
  max-width: 44rem;
}

.lede h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--s-3);
}

.lede p {
  font-size: var(--text-md);
  color: var(--color-muted);
  max-width: 36rem;
}

@media (max-width: 40rem) {
  .lede h1 { font-size: var(--text-xl); }
  .lede { padding: var(--s-5) 0; }
}

/* --------------------------------------------------------------------------
   Drop zone
   -------------------------------------------------------------------------- */

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-6);
  border: 1px dashed var(--color-rule-firm);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  transition: border-color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}

.dropzone[data-drag="on"] {
  border-color: var(--color-accent);
  border-style: solid;
  background: var(--color-accent-dim);
}

.dropzone-copy {
  font-size: var(--text-md);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.dropzone-hint {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  padding: var(--s-5) 0 var(--s-3);
}

@media (max-width: 52rem) {
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 26rem) {
  .controls { grid-template-columns: minmax(0, 1fr); }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.field > label {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral);
}

select,
input[type="number"] {
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s-6) 0 var(--s-3);
  border: 1px solid var(--color-rule-firm);
  border-radius: var(--radius-md);
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur-micro) var(--ease-out);
}

select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

input[type="number"] {
  padding-right: var(--s-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

select:hover,
input[type="number"]:hover { border-color: var(--color-ink); }

.field-note {
  font-size: var(--text-xs);
  color: var(--color-neutral);
  min-height: 1.2em;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--color-rule-firm);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}

.btn:hover:not(:disabled) {
  border-color: var(--color-ink);
  transform: translateY(-1px);
}
.btn:active:not(:disabled) { transform: translateY(0); }

.btn:disabled {
  cursor: not-allowed;
  color: var(--color-neutral);
  border-color: var(--color-rule);
}

.btn-primary {
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { border-color: var(--color-accent); }

.btn-quiet {
  border-color: transparent;
  color: var(--color-muted);
  padding: 0 var(--s-2);
}
.btn-quiet:hover:not(:disabled) { color: var(--color-ink); border-color: transparent; }

.btn-sm { min-height: 36px; font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   Queue — rows separated by rules, not nested cards
   -------------------------------------------------------------------------- */

.queue-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-6);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--color-rule-firm);
}

.queue-head h2 {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-neutral);
  font-family: var(--font-body);
}

.queue-head .spacer { margin-left: auto; }

.queue { list-style: none; margin: 0; padding: 0; }

.job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--color-rule);
}

.job:last-child { border-bottom: none; }

.job-name {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.job-meta {
  grid-column: 1;
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.job-meta .sep { color: var(--color-rule-firm); padding: 0 var(--s-1); }
.job-meta .to { color: var(--color-accent); font-weight: 600; padding: 0 var(--s-1); }

.job-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.job-status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.job[data-state="error"] .job-status { color: var(--color-danger); }
.job[data-state="done"] .saved { color: var(--color-good); font-weight: 600; }

.bar {
  flex: 1 1 auto;
  min-width: 4rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-paper-3);
  overflow: hidden;
}

.bar > i {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-short) linear;
}

.job[data-state="probing"] .bar > i,
.job[data-state="queued"] .bar > i {
  transform: scaleX(1);
  background: var(--color-rule-firm);
  animation: drift 1.4s var(--ease-out) infinite;
}

@keyframes drift {
  0%   { transform: scaleX(0.08) translateX(0); }
  50%  { transform: scaleX(0.35) translateX(200%); }
  100% { transform: scaleX(0.08) translateX(1150%); }
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.notice {
  padding: var(--s-4);
  border: 1px solid var(--color-rule-firm);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.notice[data-tone="warn"] {
  border-color: var(--color-danger);
  color: var(--color-ink);
}

.notice strong { color: var(--color-ink); }

/* --------------------------------------------------------------------------
   Footer — single line colophon
   -------------------------------------------------------------------------- */

.colophon {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

/* --------------------------------------------------------------------------
   One orchestrated entrance
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(6px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes reveal {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
  .job[data-state="probing"] .bar > i,
  .job[data-state="queued"] .bar > i { animation: none; transform: scaleX(1); }
}