/*
 * Look Stealer – im Design der Website (nicolasdrum-site, Design-Probe
 * Runde 4, src/styles/probe.css). Szene „Kaminzimmer": Kupfer am Tag,
 * Whisky am Abend. Tag und Abend folgen dem Gerät, ohne Schalter.
 * Keine Pillen, keine Punkte, keine Schatten; Kacheln ohne Rand.
 */
@font-face { font-family: 'Prompt'; src: url('/fonts/prompt-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Prompt'; src: url('/fonts/prompt-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url('/fonts/ubuntu-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url('/fonts/ubuntu-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* Tag: weißer Grund, Leinen-Kacheln, Kupfer führt (6,6:1 auf Weiß). */
:root {
  color-scheme: light;
  --bg: #ffffff; --tile: #f0f3ef; --line: #e2e7e1; --field: #ffffff;
  --ink: #0f1614; --quiet: #55605a;
  --lead: #8a4e25; --lead-text: #8a4e25; --on-lead: #ffffff;
  --spark: #8e1b1e; --warn: #8e1b1e;
  --link: var(--lead-text); --accent: var(--lead); --accent-ink: var(--on-lead);
  --r-tile: 1.25rem; --r-control: .3rem; --gap: 1rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-body: 'Ubuntu', system-ui, sans-serif; --font-heading: 'Prompt', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
/* Abend: Holzschwarz, Eiche, Creme; Whisky hell führt. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #100c0a; --tile: #1c1512; --line: #30261f; --field: #100c0a;
    --ink: #f1e9dc; --quiet: #b9aa95;
    --lead: #e5a262; --lead-text: #e5a262; --on-lead: #100c0a;
    --spark: #d0544d; --warn: #d0544d;
  }
}

* { box-sizing: border-box; }
/* author display rules (.row, .button) would otherwise beat the hidden attribute */
[hidden] { display: none !important; }
html { background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--font-body); -webkit-text-size-adjust: 100%; }
body { margin: 0; }
#app { max-width: 64rem; margin: 0 auto; padding: clamp(1.5rem, 1rem + 2vw, 3rem) 1rem 4rem; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.1; margin: 0 0 .5rem; text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); letter-spacing: -0.04em; }
h2 { font-weight: 700; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); letter-spacing: -0.025em; }
h3 { font-weight: 500; font-size: 1.1rem; margin-top: 1rem; letter-spacing: -0.01em; }
/* Abschnitts-Label: ein Wort in der führenden Farbe. */
h4 { font-weight: 500; font-size: .875rem; margin: 1.25rem 0 .5rem; color: var(--lead-text); }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: .25rem 0 .75rem; }
.quiet { color: var(--quiet); }
.small { font-size: .875rem; }
.warn { color: var(--warn); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1.5rem; }
.lead { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); max-width: 46rem; color: var(--quiet); }
/* Hinweis mit harter Kante statt Punkt: die rote Linie wie vor der Szenen-Zeile. */
.privacy { color: var(--quiet); display: flex; gap: .7rem; align-items: baseline; }
.privacy::before { content: ''; flex: none; inline-size: 1.5rem; block-size: 1px; background: var(--spark); align-self: center; }
.lang { white-space: nowrap; }

/* Eine Kachel für alles: gleicher Radius, kein Rand, kein Schatten. */
.card { background: var(--tile); border: 0; border-radius: var(--r-tile); padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem); margin-bottom: 1rem; }
fieldset { border: 0; padding: 0; margin: 0 0 .75rem; min-inline-size: 0; }
legend { font: 500 .875rem var(--font-heading); color: var(--lead-text); margin-bottom: .4rem; padding: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .45rem 0; }
.row label { min-width: 12rem; }
.row input[type=range] { flex: 1 1 10rem; accent-color: var(--lead); }
.row output { min-width: 3ch; font: .875rem var(--font-mono); font-variant-numeric: tabular-nums; color: var(--quiet); }
.radio { display: flex; gap: .5rem; align-items: baseline; margin: .3rem 0; }
.radio input, .row input[type=checkbox] { accent-color: var(--lead); }
.sub { margin-left: 1.6rem; }
input[type=text], input[type=number], select {
  font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: var(--r-control); padding: .4rem .6rem; min-height: 2.5rem;
}
input[type=text]:hover, input[type=number]:hover, select:hover { border-color: var(--quiet); }
input:focus-visible, select:focus-visible, .button:focus-visible, button:focus-visible, a:focus-visible, label:has(> input:focus-visible) { outline: 3px solid var(--lead); outline-offset: 2px; }

/*
 * Knöpfe wie auf der Website: rechteckig mit kleinem Radius, keine Pille.
 * Hauptknopf Tinte auf Grund; beim Zeigen wischt die führende Farbe hinein.
 */
.button { position: relative; isolation: isolate; overflow: clip; display: inline-flex; align-items: center; min-height: 2.75rem;
  font: 500 1rem/1.2 var(--font-heading); padding: .6rem 1.2rem; border-radius: var(--r-control); border: 1px solid var(--ink);
  background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; transition: color 420ms var(--ease-out), border-color 420ms var(--ease-out); }
.button::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--lead); transform: scaleX(0); transform-origin: right; transition: transform 520ms var(--ease-out); }
.button:hover::after, .button:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.button:hover, .button:focus-visible { color: var(--on-lead); border-color: var(--lead); }
.button.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.button.primary:hover, .button.primary:focus-visible { color: var(--on-lead); border-color: var(--lead); }
.button.ghost { border-color: var(--line); }
.button:disabled { opacity: .5; cursor: progress; }
.button:disabled::after { transform: scaleX(0); }

.drop { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; border: 1px dashed color-mix(in srgb, var(--quiet) 60%, transparent); border-radius: var(--r-control); padding: 1.1rem; margin: .5rem 0; background: var(--bg); }
.drop.over { border-color: var(--lead); border-style: solid; background: color-mix(in srgb, var(--lead) 10%, var(--bg)); }

.thumbs { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .9rem; }
.thumbs li { position: relative; display: flex; flex-direction: column; gap: .15rem; font-size: .8rem; }
.thumbs canvas { width: 100%; height: auto; border-radius: var(--r-control); background: var(--bg); }
.thumbs .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumbs .quiet { font-family: var(--font-mono); font-size: .75rem; }
.remove { position: absolute; top: .3rem; right: .3rem; width: 1.75rem; height: 1.75rem; border-radius: var(--r-control); border: 0; background: var(--bg); color: var(--ink); cursor: pointer; font: 500 1rem/1 var(--font-heading); }
.remove:hover { background: var(--ink); color: var(--bg); }

.actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin: 1.25rem 0; }
.actions progress { flex: 1 1 12rem; accent-color: var(--lead); }
.status { margin: 0; min-height: 1.6em; }

.compare { margin: .75rem 0; }
.compare .stack { display: grid; border-radius: var(--r-control); overflow: clip; }
.compare .stack canvas { grid-area: 1 / 1; width: 100%; height: auto; }
.compare input[type=range] { width: 100%; accent-color: var(--lead); margin: .5rem 0 0; }
/* Beschriftung unter dem Bild in der Schrift der Aufnahmedaten. */
.compare figcaption { display: flex; justify-content: space-between; color: var(--quiet); font: .75rem var(--font-mono); }

footer { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1rem; color: var(--quiet); font-size: .875rem; }
@media (max-width: 40rem) { .row label { min-width: 100%; } .top { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; vertical-align: top; padding: .5rem; border-bottom: 1px solid var(--line); }
th { font: 500 .875rem var(--font-heading); color: var(--quiet); }