/* Liitetiedoston omat tyylit (pudotusalue, lataus, tauko, toisto, nauhoitus).
 * Yhteiset tokenit, fontit ja komponentit ovat alustan tiedostossa alusta.css. */

/* ---------- pudotusalue ---------- */
.drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center;
  padding: 36px var(--space-5); cursor: pointer;
  border: 1px dashed var(--line-200); border-radius: var(--radius-lg); background: var(--bg-100);
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--surface-200); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop-icon {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-1);
  border: 1px solid var(--line-200); border-radius: var(--radius-md); color: var(--accent); font-size: 22px; background: var(--surface-100);
}
.drop strong { font: 600 15px/20px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.drop .muted { font-size: 13px; line-height: 18px; }
.link { color: var(--accent); }
.compact-drop { flex-direction: row !important; justify-content: center; padding: var(--space-3) var(--space-4) !important; gap: var(--space-3) !important; }
.compact-drop .drop-icon { width: 32px; height: 32px; font-size: 16px; margin: 0; }
.compact-drop .muted { display: none; }
#pw-wrap { margin-top: var(--space-3); }
#pw-form { gap: var(--space-3); margin-top: var(--space-5); }
#up-detail, #dl-detail { font: 400 13px/18px var(--font-mono); }
/* virhenäkymä = poikkeamakortti */
#download-view:has(#dl-error:not([hidden])) { background: var(--fail-ground); border-color: var(--fail-line); }
#dl-error-msg { color: var(--fail-ink-2); }
#pause-btn .i-play { display: none; }
#pause-btn.is-paused .i-pause { display: none; }
#pause-btn.is-paused .i-play { display: inline; }
#pause-btn.is-paused { border-color: var(--accent); color: var(--accent); }
/* ---------- toisto selaimessa (0.6.0) ---------- */
.player { margin: var(--space-4) 0 0; }
.player video, .player audio { display: block; width: 100%; }
.player video {
  max-height: 70vh; background: #000;
  border: 1px solid var(--line-200); border-radius: var(--radius-md);
}
.hint.warn { color: var(--fail-ink-2, var(--fail)); }
#viewonly-wrap { display: flex; }
#play-btn + .hint + .btn.wide { margin-top: var(--space-3); }

/* ---------- nauhoitus selaimessa (0.6.0) ---------- */
.rec-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.rec-btn { width: 100%; }
/* pelkkä ääni (0.6.9): mikrofoni-ikoni ja tasomittari kuvan tilalla */
.rec-audio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); min-height: 190px; padding: var(--space-6) var(--space-4); }
.rec-mic { width: 44px; height: 44px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.rec-meter { width: min(320px, 100%); height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.rec-meter i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0); transition: transform 60ms linear; }
.rec-audio audio { width: 100%; }
.rec-btn svg { stroke: currentColor; }
.rec-stage { position: relative; margin-top: var(--space-4); background: #000; border: 1px solid var(--line-200); border-radius: var(--radius-md); overflow: hidden; }
.rec-stage video { display: block; width: 100%; max-height: 58vh; background: #000; }
.rec-badge {
  position: absolute; top: var(--space-2); left: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 2px 8px; border-radius: var(--radius-sm); background: rgba(5, 8, 13, .72);
  font: 500 12px/18px var(--font-mono); color: #fff; font-variant-numeric: tabular-nums;
}
.rec-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--fail); animation: rec-blink 1s steps(2) infinite; }
.rec-badge #rec-size::before { content: "· "; }
@keyframes rec-blink { 50% { opacity: .2; } }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fail); }
.is-recording .rec-dot { border-radius: 2px; }
.rec-dialog .hint { margin-top: var(--space-3); }
@media (prefers-reduced-motion: reduce) { .rec-badge i { animation: none; } }
#rec-flip[hidden] + #rec-toggle { grid-column: 1 / -1; }