/*
 * base64-converter.css — per-tool styles for the direction radios, native file
 * picker, and image preview surface. Tokens only; no inline styles (CSP: style-src 'self').
 */

/* Direction radios — inline row, wraps on narrow screens. */
.b64-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.b64-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font: 500 14px/1.4 var(--font-sans);
  color: var(--text-primary);
}
.b64-radio input {
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--blue-600);
  cursor: pointer;
}

/* Native file input with a button styled to match .btn-secondary. */
.b64-file-input {
  display: block;
  width: 100%;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--text-primary);
}
.b64-file-input::file-selector-button {
  margin-right: var(--space-3);
  padding: 8px 14px;
  font: 500 14px var(--font-sans);
  color: var(--text-primary);
  background: var(--neutral-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.b64-file-input::file-selector-button:hover { background: var(--neutral-100); }

/* Image preview surface — checkered so transparent PNGs read clearly. */
.b64-preview {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--neutral-50);
  background-image:
    linear-gradient(45deg, var(--neutral-100) 25%, transparent 25%),
    linear-gradient(-45deg, var(--neutral-100) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--neutral-100) 75%),
    linear-gradient(-45deg, transparent 75%, var(--neutral-100) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.b64-preview img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  height: auto;
  border-radius: var(--radius-sm);
}