/* Video resizer — only the parts nod.css does not already provide.
   The card, upload zone, buttons, modal and bridge all come from the shared
   sheet; what follows is the ratio picker, the mode list, the crop preview and
   the progress bar. */

.rz-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rz-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 16px;
  border: 1px solid var(--nod-border);
  border-radius: var(--nod-card-radius);
  background:
    linear-gradient(45deg, var(--nod-surface-quiet) 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(-45deg, var(--nod-surface-quiet) 25%, transparent 25%) 0 8px / 16px 16px,
    var(--nod-surface-subtle);
}

/* The canvas used to be the preview surface itself and needed a black backdrop
   behind the hole its dim layer punches. It now sits on top of a playing
   <video>, so any background at all hides the picture — and the player's own
   controls with it. Kept explicitly transparent so that cannot come back. */
.rz-overlay {
  background: transparent;
}

.rz-meta {
  margin: 0;
  color: var(--nod-text-secondary);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ------------------------------------------------------------ ratio chips */

.rz-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 6px;
}

.rz-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 6px;
  border: 1px solid var(--nod-border);
  border-radius: var(--nod-control-radius);
  background: var(--nod-surface);
  color: var(--nod-text);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.rz-chip__id {
  font-size: 13.5px;
  font-weight: 640;
  letter-spacing: 0.01em;
}

.rz-chip small,
.rz-mode small {
  color: var(--nod-text-tertiary);
  font-size: 11px;
  line-height: 1.35;
}

.rz-chip:hover:not(:disabled),
.rz-mode:hover:not(:disabled) {
  border-color: var(--nod-border-strong);
}

.rz-chip.is-active {
  border-color: var(--nod-brand-border);
  background: var(--nod-brand-tint);
  color: var(--nod-brand);
}

.rz-chip.is-active small {
  color: var(--nod-brand);
  opacity: 0.78;
}

/* -------------------------------------------------------------- mode list */

.rz-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 6px;
}

.rz-mode {
  padding: 8px 6px;
  border: 1px solid var(--nod-border);
  border-radius: var(--nod-control-radius);
  background: var(--nod-surface);
  color: var(--nod-text);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 560;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.rz-mode.is-active {
  border-color: var(--nod-brand-border);
  background: var(--nod-brand-tint);
  color: var(--nod-brand);
}

/* One shared line, so five modes cost one line of height rather than five. */
.rz-mode-hint {
  margin: 6px 0 0;
  min-height: 2.4em;
  color: var(--nod-text-tertiary);
  font-size: 11.5px;
  line-height: 1.4;
}

.rz-chip:disabled,
.rz-mode:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ------------------------------------------------------- extra controls */

.rz-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block-start: 2px;
}

.rz-row > label {
  flex: none;
  color: var(--nod-text-secondary);
  font-size: 12.5px;
}

.rz-row input[type='range'] {
  flex: 1;
  accent-color: var(--nod-brand);
}

.rz-row input[type='color'] {
  width: 44px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--nod-border);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

/* ----------------------------------------------------------- progress bar */

.rz-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--nod-brand-border);
  border-radius: var(--nod-control-radius);
  background: var(--nod-brand-tint);
}

.rz-progress__track {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--nod-brand-soft);
}

.rz-progress__bar {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--nod-brand);
  transition: width 0.2s ease-out;
}

.rz-progress__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rz-progress__text {
  color: var(--nod-brand);
  font-size: 12.5px;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
}

.rz-cancel {
  padding: 0;
  border: 0;
  background: none;
  color: var(--nod-text-secondary);
  cursor: pointer;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------- result view */

.rz-result-video {
  width: 100%;
  max-height: 320px;
  margin-block: 4px 10px;
  border-radius: 10px;
  background: #000;
  object-fit: contain;
}

/* Also used under the tool card; downloader.css defines it for that tool, and
   this page does not load that sheet. */
.dl-notice {
  margin: 12px 0 0;
  color: var(--nod-text-secondary);
  font-size: 12.5px;
  line-height: 1.65;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .rz-preview {
    min-height: 180px;
    padding: 10px;
  }

  .rz-result-video {
    max-height: 240px;
  }
}

/* The download control is an <a> so the browser handles saving; without this it
   keeps the anchor underline and stops looking like the button next to it. */
a.primary-button,
a.secondary-button {
  text-decoration: none;
}

/* ---- Playable preview -----------------------------------------------------
   A single still frame cannot show what smart crop does, because the whole
   point is that the window moves. The source plays underneath and the crop
   overlay is redrawn per presented frame on top of it. ---------------------- */

.rz-frame {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.rz-frame video {
  display: block;
  max-width: 100%;
  max-height: 360px;
  height: auto;
}

.rz-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The native controls sit under this, so clicks have to pass through. */
  pointer-events: none;
}

.rz-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--nod-text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.rz-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nod-brand);
  flex: none;
}