/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 *
 * NOTE on @import: Propshaft does NOT rewrite @import paths to their fingerprinted
 * targets, so @import "foo.css" resolves to /assets/foo.css (404) rather than
 * /assets/foo-<hash>.css. Inline shared wizard component styles directly below
 * rather than importing them.
 */

/* ---------------------------------------------------------------- */
/* Common::WizardActionButtonComponent — pill-shaped action button  */
/* used across all niche-template wizards (content/style/generate/  */
/* preview steps). Self-contained palette; works anywhere on a      */
/* creator-kit surface.                                             */
/* ---------------------------------------------------------------- */
.wiz-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 80ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}

.wiz-btn--primary {
  background: #1F2937;
  color: #FAF7EC;
}

.wiz-btn--primary:hover,
.wiz-btn--primary:focus-visible {
  transform: translateY(-1px);
  background: #111827;
}

.wiz-btn--ghost {
  background: transparent;
  color: #6B7280;
  border-color: transparent;
}

.wiz-btn--ghost:hover,
.wiz-btn--ghost:focus-visible {
  color: #1F2937;
  background: rgba(31, 41, 55, 0.04);
}

.wiz-btn[disabled],
.wiz-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.wiz-btn__chevron {
  flex-shrink: 0;
}

/* Small variant — used by inline action buttons inside generate/preview
 * step cards (Start generation, Generate audio only, Regenerate image).
 * Tighter padding + smaller type. Ghost+small gets a subtle hairline
 * border so it reads as an outlined chip against cream paper surfaces. */
.wiz-btn--small {
  padding: 6px 12px;
  font-size: 13px;
}

.wiz-btn--small.wiz-btn--ghost {
  border-color: rgba(31, 41, 55, 0.15);
  color: #1F2937;
}

.wiz-btn--small.wiz-btn--ghost:hover,
.wiz-btn--small.wiz-btn--ghost:focus-visible {
  background: rgba(31, 41, 55, 0.06);
  border-color: rgba(31, 41, 55, 0.25);
}

/* ---------------------------------------------------------------- */
/* Common::WizardNameFieldComponent — "Name this draft" field at    */
/* the top of every niche-template wizard content step. Replaces    */
/* the standalone /new name-entry page for cohesion with the        */
/* creator-kit surface.                                             */
/* ---------------------------------------------------------------- */
.wiz-name-field {
  background: #FFFFFF;
  border: 1px solid #E9E2CF;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 18px;
}

.wiz-name-field__label {
  display: block;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 8px;
}

.wiz-name-field__input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #E9E2CF;
  border-radius: 8px;
  background: #FAF7EC;
  color: #1F2937;
  font-family: 'Lora', 'Iowan Old Style', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color 120ms ease, background 120ms ease;
}

.wiz-name-field__input:focus {
  outline: none;
  border-color: #1F2937;
  background: #FFFFFF;
}

.wiz-name-field__hint {
  margin: 6px 0 0;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 11px;
  color: #9CA3AF;
}

/* ---------------------------------------------------------------- */
/* wiz-radio-card — labeled-card radio group used by word_of_day /  */
/* vocab_quiz / multi_word_lesson style steps. Each <label>         */
/* hides its native radio (.visually-hidden) and acts as the click  */
/* target. Group lays out one column on narrow widths, two on wide. */
/* ---------------------------------------------------------------- */
.wiz-radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.wiz-radio-card {
  position: relative;
  padding: 14px 16px;
  border: 1px solid #E9E2CF;
  border-radius: 12px;
  background: #FAF7EC;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.wiz-radio-card:hover {
  border-color: #C5BAA0;
  background: #FFFFFF;
}

/* Highlight is driven by the radio's checked state only — never by a
   server-side modifier class. The previously-shipped --selected
   modifier was sticky after click (radio moved but class didn't),
   so two cards would light up simultaneously. */
.wiz-radio-card:has(input[type="radio"]:checked) {
  border-color: #1F2937;
  background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(232, 168, 56, 0.35);
}

.wiz-radio-card__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
}

.wiz-radio-card__desc {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 12px;
  color: #6B7280;
  line-height: 1.4;
}

/* Hide native radio inputs that live inside a wiz-radio-card. The
   card itself is the click target. Use .visually-hidden because the
   markup ships it as the class name. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- */
/* wiz-slider — labeled range-input row used for subject position / */
/* size sliders in SubjectTrack-driven niche templates. Pair with   */
/* .wiz-slider-row to align the slider, value readout, and ticks.   */
/* ---------------------------------------------------------------- */
.wiz-slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wiz-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #E9E2CF;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.wiz-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1F2937;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: grab;
}

.wiz-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.wiz-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1F2937;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: grab;
}

.wiz-slider-value {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1F2937;
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.wiz-slider__hint {
  margin: 6px 0 0;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 12px;
  color: #6B7280;
  line-height: 1.4;
}

.wiz-slider-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 768px) {
  .wiz-slider-group {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.wiz-slider-field__label {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 8px;
}