/* Photo and signature resizer (/tools/photo-signature-resizer). Design tokens only (tokens.css): dark mode follows. */

.rz-head {
  padding-bottom: var(--space-6);
}

.rz-privacy {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--success-soft);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 550;
}

.rz-privacy .icon {
  margin-top: 0.2em;
  color: var(--success);
}

.rz-notice {
  margin-bottom: var(--space-5);
}

/* Layout: photo, settings, result stacked; two columns on wide screens (settings on the right). */
.rz {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "photo" "settings" "result";
}

.rz-photo {
  grid-area: photo;
}

.rz-settings {
  grid-area: settings;
}

.rz-result {
  grid-area: result;
}

@media (min-width: 960px) {
  .rz {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr; /* a tall settings card leaves its extra height below the result, not between */
    grid-template-areas: "photo settings" "result settings";
    align-items: start;
  }
}

.rz-card .card-body {
  padding: var(--space-4);
}

@media (min-width: 600px) {
  .rz-card .card-body {
    padding: var(--space-6);
  }
}

.rz-title {
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
}

.rz .field + .field {
  margin-top: 0;
}

.rz-options > * + *,
.rz-block > * + * {
  margin-top: var(--space-3);
}

.rz-options {
  margin-top: var(--space-4);
}

/* Choosing a photo */
.rz-drop {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  text-align: center;
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}

.rz-drop.is-over {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.rz-drop .btn {
  white-space: normal;
}

/* The file input is visually hidden but focusable; its label is the button. */
.rz-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.rz-file-input:focus-visible + label {
  box-shadow: var(--ring-offset), var(--ring);
}

.rz-alert {
  margin-top: var(--space-4);
}

/* The crop stage */
.rz-editor {
  margin-top: var(--space-5);
}

.rz-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--bg-muted);
  background-image: conic-gradient(var(--border) 25%, transparent 0 50%, var(--border) 0 75%, transparent 0);
  background-size: 20px 20px;
}

.rz-stage:focus-visible {
  outline: none;
  box-shadow: var(--ring-offset), var(--ring);
}

.rz-stage canvas {
  display: block;
  width: 100%;
  height: 240px;
  touch-action: none;
  cursor: grab;
}

.rz-stage canvas:active {
  cursor: grabbing;
}

.rz-editor > .hint {
  margin-top: var(--space-2);
}

.rz-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.rz-zoom {
  display: flex;
  flex: 1 1 11rem;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.rz-zoom .range {
  flex: 1;
  min-width: 4rem;
}

.rz-guide {
  margin-top: var(--space-3);
}

/* Settings */
.rz-summary {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.rz-summary:empty {
  display: none;
}

.rz-group {
  min-width: 0;
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.rz-group > legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-3);
  padding: 0;
  font-size: var(--text-base);
}

.rz-group > legend + * {
  clear: both;
}

.rz-subgroup {
  min-width: 0;
  margin: var(--space-4) 0 0;
  padding: 0;
  border: 0;
}

.rz-subgroup > legend {
  margin-bottom: var(--space-2);
  padding: 0;
}

.rz-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: var(--space-2);
}

.rz-between {
  padding-bottom: 0.6rem;
  color: var(--text-subtle);
  font-weight: 600;
}

.rz-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); /* side by side, stacked below ~340 px */
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.rz-equals {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.rz-equals:empty {
  display: none;
}

.rz-group .hint,
.rz-group .field-error {
  margin-top: var(--space-2);
}

.rz-group .switch {
  align-items: flex-start;
}

.rz-group .switch-track {
  margin-top: 1px;
}

/* Result */
.rz-output {
  display: grid;
  gap: var(--space-4);
}

.rz-preview {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: var(--space-4);
  overflow: auto;
  border-radius: var(--radius);
  background-color: var(--bg-muted);
  background-image: conic-gradient(var(--border) 25%, transparent 0 50%, var(--border) 0 75%, transparent 0);
  background-size: 20px 20px;
}

.rz-preview img {
  max-width: 100%;
  height: auto;
  box-shadow: var(--shadow-md);
}

.rz-facts {
  gap: var(--space-2) var(--space-4);
  font-variant-numeric: tabular-nums;
}

.rz-status {
  margin: var(--space-4) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.rz-status:empty {
  display: none;
}

.rz-result .rz-alert {
  margin: 0 0 var(--space-4);
}

.rz[aria-busy="true"] .rz-preview img {
  opacity: 0.6;
}

/* How it works, tips */
.rz-help {
  display: grid;
  gap: var(--space-8);
  margin-block: var(--space-12) var(--space-16);
}

@media (min-width: 760px) {
  .rz-help {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rz-help h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
}

.rz-list {
  display: grid;
  gap: var(--space-3);
  padding-left: 1.25rem;
  color: var(--text-muted);
}