/* Bulk-import surface (M7) — the migration on-ramp.

   The /import page: a brand-led header, a warm upload panel with the
   supported-apps grid, and the preview/result fragments that swap into
   #import-result after upload and confirm.

   Reskin (SHY-79): pulled onto the new design language shared with the
   home/signin/paste reskins. The host speaks in the Fraunces display
   voice (headings + card titles); cards are soft --radius-lg surfaces
   that lean on a border + warm tint over a resting shadow (bible 1.6);
   eyebrows are mono-caps at 0.06em; the primary actions are pills with a
   trailing "go" glyph and a spring :active. The preview/result cards
   deliberately mirror the paste flow's import-status idiom (state-tinted
   surface, Fraunces title, mono eyebrow, larger action) so the two import
   paths read as one family — the pattern is mirrored here rather than
   shared so paste-form.css stays untouched.

   BEM blocks: import-page, import-source, import-form, import-preview,
   import-result. They share this file because they are one feature
   surface (the import flow), the same way paste-form + import-status
   cohabit paste-form.css.

   Cascade-layer note: components, so reset/layout never overrides it and
   utilities always do. */

@layer components {

.import-page {
  padding-block: var(--space-8);
  display: grid;
  gap: var(--space-7);
}

/* ============================================================
   HEADER — the brand moment + value prop
   ============================================================ */

.import-page__header {
  display: grid;
  gap: var(--space-3);
}

/* Brand cluster: the winking mascot + a mono "switching apps" eyebrow.
   A scaled-down echo of the home hero's brand moment so the migration
   on-ramp opens with the same warm hello rather than a bare label. */
.import-page__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.import-page__mascot {
  inline-size: 44px;
  block-size: 44px;
  display: block;
  flex-shrink: 0;
  transform-origin: 50% 60%;
}

.import-page__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-primary-text);
}

.import-page__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  font-variation-settings: 'opsz' var(--opsz-heading);
  color: var(--md-on-surface);
  text-wrap: balance;
}

.import-page__lede {
  margin: 0;
  max-width: 56ch;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-on-surface-variant);
  text-wrap: pretty;
}

/* ============================================================
   UPLOAD PANEL — the focal interactive surface
   ============================================================ */

/* The warm panel echoing the home hero's paste block: a soft --radius-lg
   surface that lifts a half-step off the page on a border, no resting
   shadow (bible 1.6). Holds the upload form + the supported-apps grid as
   one placed object. */
.import-page__panel {
  display: grid;
  gap: var(--space-7);
  padding: var(--space-7);
  border: 1px solid var(--md-border-muted);
  border-radius: var(--radius-lg);
  background: var(--md-surface-container-low);
}

.import-form {
  display: grid;
  gap: var(--space-3);
}

/* Field eyebrow — mono-caps register matching the rest of the new
   language (the paste form's reskinned label, the card eyebrows). */
.import-form__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.import-form__field {
  display: flex;
}

/* The file input itself — a full-width drop target on a soft surface
   tile. --radius-lg + the surface fill make it read as an inviting tray
   to drop a file into rather than a thin form control. The
   ::file-selector-button is the one accented affordance. */
.import-form__input {
  inline-size: 100%;
  min-width: 0;
  padding: var(--space-4);
  border: 1px dashed var(--md-border-strong);
  border-radius: var(--radius-lg);
  background: var(--md-surface);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--md-on-surface);
  cursor: pointer;
  transition:
    border-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
    background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
}

.import-form__input:hover {
  border-color: var(--md-primary-muted);
  background: color-mix(in oklch, var(--md-primary-container) 30%, var(--md-surface));
}

.import-form__input::file-selector-button {
  margin-inline-end: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--md-primary-container);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--md-on-primary-container);
  cursor: pointer;
  transition: background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
}

.import-form__input::file-selector-button:hover {
  background: color-mix(in oklch, var(--md-primary) 18%, var(--md-primary-container));
}

.import-form__input:focus-visible {
  outline: none;
  border-style: solid;
  border-color: var(--md-primary);
  background: var(--md-primary-container);
  box-shadow: var(--focus-ring);
}

/* Submit pill — the new primary-action shape (--radius-lg, 600 weight, a
   trailing "go" glyph, a spring :active). Mirrors the paste form's
   reskinned submit so the two import entry points feel identical. */
.import-form__submit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
    transform var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial);
}

.import-form__submit.state-layer::after {
  background: var(--md-on-surface);
}

.import-form__submit:active {
  transform: scale(0.98);
}

.import-form__submit:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.import-form__submit[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.import-form__submit-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.import-form__hint {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--md-on-surface-variant);
}

/* ============================================================
   SOURCES — the supported recipe apps
   ============================================================ */

.import-page__sources-block {
  display: grid;
  gap: var(--space-3);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--md-border-muted);
}

.import-page__sources-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

/* Informational grid (not interactive in this slice — the detector sniffs
   the format from the uploaded bytes, so the user does not pick a source
   by hand). Soft tiles in the new card vocabulary; Paprika gets the warm
   primary-container tint as the proven primary path. */
.import-page__sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.import-source {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--md-border-muted);
  background: var(--md-surface);
}

.import-source--primary {
  border-color: var(--md-primary-muted);
  background: var(--md-primary-container);
}

.import-source__name {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-snug);
  font-variation-settings: 'opsz' var(--opsz-title);
  color: var(--md-on-surface);
}

.import-source__file {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--md-primary-text);
}

.import-source__hint {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--md-on-surface-variant);
}

/* ============================================================
   RESULT SLOT — empty until a fragment swaps in
   ============================================================ */

.import-result-slot:empty {
  display: none;
}

/* The preview + result + expired fragments are content cards the host
   places after the upload — they fade up when htmx swaps them in so the
   answer arrives, it doesn't snap. */
.import-result-slot:not(:empty) {
  animation: var(--animate-fade-up);
}

/* ============================================================
   PREVIEW CARD — count, titles, parse warnings, confirm
   ============================================================ */

.import-preview {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--md-primary) 22%, var(--md-border-muted));
  background: color-mix(in oklch, var(--md-primary-container) 40%, var(--md-surface-container-low));
}

.import-preview__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.import-preview__heading-group {
  display: grid;
  gap: var(--space-1);
}

.import-preview__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-primary-text);
}

/* Title moves to the Fraunces display face — the "ready to import N from
   Paprika" line is the host speaking, so it gets the editorial voice the
   rest of the new language carries. */
.import-preview__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  font-variation-settings: 'opsz' var(--opsz-heading);
  color: var(--md-on-surface);
  text-wrap: balance;
}

.import-preview__file {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--md-on-surface-variant);
  overflow-wrap: anywhere;
}

.import-preview__badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklch, var(--md-on-surface) 8%, transparent);
  background: color-mix(in oklch, var(--md-surface) 70%, transparent);
  color: var(--md-on-surface-variant);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.import-preview__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

.import-preview__stat {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklch, var(--md-on-surface) 6%, transparent);
  background: color-mix(in oklch, var(--md-surface) 75%, transparent);
  min-width: 96px;
}

.import-preview__stat dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.import-preview__stat dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variation-settings: 'opsz' var(--opsz-title);
  color: var(--md-on-surface);
  font-variant-numeric: tabular-nums;
}

.import-preview__stat--ok dd {
  color: var(--md-success);
}

.import-preview__stat--skip dd {
  color: var(--md-on-surface-variant);
}

.import-preview__list-label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.import-preview__list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
}

.import-preview__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklch, var(--md-on-surface) 6%, transparent);
  background: color-mix(in oklch, var(--md-surface) 75%, transparent);
}

.import-preview__item-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--md-on-surface);
}

.import-preview__item-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--md-on-surface-variant);
}

.import-preview__more {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--md-on-surface-variant);
}

.import-preview__warnings {
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklch, var(--md-warning) 24%, transparent);
  background: color-mix(in oklch, var(--md-warning-soft) 70%, var(--md-surface));
  padding: var(--space-3) var(--space-4);
}

.import-preview__warnings summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--md-on-surface);
}

.import-preview__warning-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: var(--space-3) 0 0;
  margin: 0;
}

.import-preview__warning {
  display: grid;
  gap: var(--space-1);
}

.import-preview__warning-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--md-on-surface);
}

.import-preview__warning-reason {
  font-size: var(--text-xs);
  color: var(--md-on-surface-variant);
}

.import-preview__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.import-preview__confirm {
  margin: 0;
}

.import-preview__confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
    transform var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial);
}

.import-preview__confirm-btn.state-layer::after {
  background: var(--md-on-surface);
}

.import-preview__confirm-btn:active {
  transform: scale(0.98);
}

.import-preview__confirm-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.import-preview__confirm-btn[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.import-preview__confirm-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.import-preview__cancel {
  height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid var(--md-border);
  border-radius: var(--radius-lg);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
    transform var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial);
}

.import-preview__cancel:hover {
  border-color: var(--md-on-surface-variant);
}

.import-preview__cancel:active {
  transform: scale(0.98);
}

.import-preview__cancel:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================================================
   RESULT CARD — the post-confirm summary
   ============================================================ */

/* State-tinted like the paste flow's import-status: success warms to the
   success-soft tint, the empty/expired states warm to error-soft, so the
   outcome reads at a glance without a saturated accent slab (bible 1.12). */
.import-result {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--md-border-muted);
  background: var(--md-surface-container-low);
}

.import-result--done {
  border-color: color-mix(in oklch, var(--md-success) 22%, var(--md-border-muted));
  background: color-mix(in oklch, var(--md-success-soft) 60%, var(--md-surface-container-low));
}

.import-result--empty,
.import-result--expired {
  border-color: color-mix(in oklch, var(--md-error) 20%, var(--md-border-muted));
  background: color-mix(in oklch, var(--md-error-soft) 55%, var(--md-surface-container-low));
}

.import-result__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.import-result__heading-group {
  display: grid;
  gap: var(--space-1);
}

.import-result__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-primary-text);
}

.import-result--done .import-result__eyebrow {
  color: var(--md-success);
}

.import-result--empty .import-result__eyebrow,
.import-result--expired .import-result__eyebrow {
  color: var(--md-error);
}

.import-result__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  font-variation-settings: 'opsz' var(--opsz-heading);
  color: var(--md-on-surface);
  text-wrap: balance;
}

.import-result__badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--md-success-soft);
  color: var(--md-success);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.import-result--done .import-result__badge {
  background: color-mix(in oklch, var(--md-success) 14%, var(--md-surface));
}

.import-result__badge--empty {
  background: color-mix(in oklch, var(--md-surface) 70%, transparent);
  color: var(--md-on-surface-variant);
}

.import-result__body {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--md-on-surface-variant);
}

.import-result__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.import-result__action {
  min-height: var(--control-h);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial);
}

.import-result__action.state-layer::after {
  background: var(--md-on-surface);
}

.import-result__action:active {
  transform: scale(0.98);
}

.import-result__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.import-result__action-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.import-result__again {
  height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid var(--md-border);
  border-radius: var(--radius-lg);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
    transform var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial);
}

.import-result__again:hover {
  border-color: var(--md-on-surface-variant);
}

.import-result__again:active {
  transform: scale(0.98);
}

.import-result__again:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================================================
   RESPONSIVE — mobile tightening
   ============================================================ */

@media (max-width: 640px) {
  .import-page {
    padding-block: var(--space-5);
    gap: var(--space-6);
  }

  .import-page__heading {
    font-size: var(--text-3xl);
  }

  .import-page__panel {
    padding: var(--space-5);
    gap: var(--space-6);
  }

  .import-preview,
  .import-result {
    padding: var(--space-5);
  }

  .import-preview__title,
  .import-result__title {
    font-size: var(--text-xl);
  }

  .import-form__submit,
  .import-preview__confirm-btn,
  .import-result__action {
    justify-self: stretch;
    inline-size: 100%;
  }
}

/* ============================================================
   REDUCED MOTION — fragments arrive present, no fade
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .import-result-slot:not(:empty) {
    animation: none;
  }

  .import-form__submit,
  .import-preview__confirm-btn,
  .import-preview__cancel,
  .import-result__action,
  .import-result__again {
    transition: none;
  }
}

}