/* xpost controls: form control styles */
/* CONTRACT: uses base.css tokens only */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.field input[type="text"],
.field input[type="number"],
.field input[type="datetime-local"],
.field textarea {
  padding: 8px 12px;
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  color: var(--text);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-dim);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.field textarea {
  resize: vertical;
  min-height: 80px;
}

.field input[type="number"] {
  -moz-appearance: textfield;
}

.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.field.grow {
  flex-grow: 1;
}

/* Primary button - DOWNLOAD */
#btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 700;
  color: #0a0a0b;
  background: var(--accent);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

#btn-download:hover {
  background: var(--accent-hover);
}

#btn-download:active {
  transform: translateY(1px);
}

#btn-download:focus-visible {
  box-shadow: var(--ring);
}

#btn-download:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Contrast verification for #btn-download:
   - Background: #4d9bf7 (var(--accent))
   - Text: #0a0a0b
   - Contrast: 8.48:1 > 4.5:1 AA requirement PASS
*/

/* Segment group - pill style */
.seg-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}

.seg {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--r-pill);
  transition: background-color 0.15s ease;
}

.seg:hover {
  background: var(--accent-soft);
}

.seg input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.seg input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform 0.15s ease;
}

.seg input[type="radio"]:checked {
  border-color: var(--accent);
  color: var(--accent);
}

.seg input[type="radio"]:checked::before {
  transform: scale(1);
}

.seg input[type="radio"]:focus-visible {
  box-shadow: var(--ring);
}

/* File upload button */
.file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.file-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.file-btn:focus-visible {
  box-shadow: var(--ring);
}

/* Ghost button */
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ghost-btn:hover {
  background: var(--surface);
}

.ghost-btn:focus-visible {
  box-shadow: var(--ring);
}

/* Switch field - pill toggle */
.switch-field {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  user-select: none;
}

.switch-field input[type="checkbox"] {
  appearance: none;
  width: 40px;
  height: 20px;
  background: var(--border);
  border-radius: 9999px;
  position: relative;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.switch-field input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

.switch-field input[type="checkbox"]:checked {
  background: var(--accent);
}

.switch-field input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

.switch-field input[type="checkbox"]:focus-visible {
  box-shadow: var(--ring);
}

.switch-field span {
  font-size: 14px;
  color: var(--text);
}

/* Media drop zone */
.media-drop {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--r-card);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.media-drop:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.media-drop .file-btn {
  width: 100%;
}

.media-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: var(--sp-2);
}

.media-preview .media-item {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: var(--r-input);
  overflow: hidden;
}

.media-preview .media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-preview .media-item .remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.media-preview .media-item .remove-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Metrics grid */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.metrics legend {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding: 0 var(--sp-2);
}

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.metric span {
  font-size: 13px;
  color: var(--text-muted);
}

/* Presets grid */
.presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.preset-btn {
  flex: 1 1 auto;
  min-width: 60px;
  padding: var(--sp-2) var(--sp-3);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.preset-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.preset-btn:focus-visible {
  box-shadow: var(--ring);
}

/* Link button (circular clear button) */
.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.link-btn:hover {
  background: var(--surface-2);
}

.link-btn:focus-visible {
  box-shadow: var(--ring);
}

.link-btn svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

/* Focus visible for all interactive elements */
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .field input,
  .field textarea,
  #btn-download,
  .seg,
  .file-btn,
  .ghost-btn,
  .switch-field input[type="checkbox"]::after,
  .media-drop,
  .preset-btn,
  .link-btn {
    transition-duration: 0.001ms !important;
  }
}