/*
 * V3 Wizard — refined per Figma (61:656, 64:1311, 65:1562, 68:1954).
 * Pixel-perfect to the Figma frames.
 * Built entirely on Airtime Design System tokens.
 */

/* ════════════════════════════════
   CARD
════════════════════════════════ */
.v3-wizard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 480px;
  height: 460px;
  background: var(--color-background-secondary);
  border: var(--border-width-thin) solid var(--color-highlight-primary);
  border-radius: var(--radius-45);                     /* 18px */
  box-shadow: 0 16px 32px 0 var(--color-shadow-large);
  overflow: hidden;
  box-sizing: border-box;
}

/* Body region — flex children stack with --space-60 (24px) gap */
.v3-body {
  flex: 1 0 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-60);                                /* 24px */
  padding: var(--space-80);                            /* 32px */
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

/* ════════════════════════════════
   PROGRESS DOTS
════════════════════════════════ */
.v3-progress {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);                                /* 4px */
  flex-shrink: 0;
}
.v3-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-9999);
  background: var(--color-highlight-primary);
  transition:
    width var(--duration-normal) var(--easing-default),
    background var(--duration-fast) var(--easing-default);
}
.v3-dot-active {
  width: 24px;
  background: var(--color-accent-teal);
}

/* ════════════════════════════════
   STEP VIEWPORT
════════════════════════════════ */
.v3-viewport {
  position: relative;
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
}
.v3-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);                                /* 16px */
  /* opacity / transform / pointer-events controlled by JS */
}

/* Step heading + sub */
.v3-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);                                /* 8px */
  flex-shrink: 0;
}
.v3-title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-heading-large);           /* 16px */
  line-height: var(--line-height-heading-large);       /* 24px */
  font-weight: var(--font-weight-heading-large);       /* 700 */
  color: var(--color-content-primary);
  margin: 0;
}
.v3-sub {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-medium);             /* 12px */
  line-height: var(--line-height-body-medium);         /* 16px */
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);
  margin: 0;
}

/* ════════════════════════════════
   STEP 0 — DOMAIN INPUT
════════════════════════════════ */
.v3-input-row {
  position: relative;
  width: 100%;
}

/* Override DS .input-wrapper background so it matches Figma --background/primary */
.v3-input-wrapper {
  background: var(--color-background-primary);
}

/* Suppress browser autofill yellow/white highlight on the domain input */
.v3-input-wrapper .input-bare:-webkit-autofill,
.v3-input-wrapper .input-bare:-webkit-autofill:hover,
.v3-input-wrapper .input-bare:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-content-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--color-background-primary) inset;
  caret-color: var(--color-modeless-teal);
  transition: background-color 9999s ease-in-out 0s;
}

/* Suggestion dropdown */
.v3-suggest {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-10));
  left: 0;
  right: 0;
  background: var(--color-background-tertiary);
  border: var(--border-width-thin) solid var(--color-highlight-secondary);
  border-radius: var(--radius-25);                     /* 10px */
  overflow: hidden;
  box-shadow: 0 8px 16px 0 var(--color-shadow-medium);
  z-index: 10;
}
.v3-suggest.open { display: block; }
.v3-suggest-item {
  display: flex;
  align-items: center;
  gap: var(--space-20);                                /* 8px */
  width: 100%;
  padding: var(--space-15) var(--space-20);            /* 6px 8px */
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-primary);
  text-align: left;
  color: var(--color-content-primary);
  transition: background var(--duration-fast) var(--easing-default);
}
.v3-suggest-item:hover,
.v3-suggest-item.hi { background: var(--color-highlight-primary); }
.v3-suggest-icon,
.v3-suggest-icon-blank {
  width: var(--size-50);                               /* 20px */
  height: var(--size-50);
  border-radius: var(--radius-10);
  background: var(--color-highlight-primary);
  flex-shrink: 0;
  object-fit: contain;
}
.v3-suggest-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v3-suggest-name {
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-content-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v3-suggest-domain {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-content-tertiary);
}

/* ════════════════════════════════
   STEPS 1–2 — TILE GRID
════════════════════════════════ */
.v3-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);                                /* 4px */
  width: 100%;
  align-content: flex-start;
  /* overflow stays visible so tooltips above hover-actions are not clipped */
}
.v3-tile {
  background: transparent;
  border: none;
  border-radius: var(--radius-30);                     /* 12px */
  padding: var(--space-10);                            /* 4px */
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--easing-default);
  font-family: var(--font-family-primary);
  min-width: 0;                                        /* allow shrink within grid */
}

/* Inset selection ring (Airtime convention — never outer borders) */
.v3-tile.is-selected {
  box-shadow: inset 0 0 0 var(--border-width-medium) var(--color-content-primary);
}

.v3-tile-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);                                /* 8px */
  padding: var(--space-10);                            /* 4px */
  background: var(--color-highlight-primary);
  border: var(--border-width-thin) solid var(--color-highlight-primary);
  border-radius: var(--radius-20);                     /* 8px */
  opacity: 0.8;                                        /* matches Figma opacity-80 */
  transition: opacity var(--duration-fast) var(--easing-default);
}
.v3-tile.is-selected .v3-tile-inner,
.v3-tile:hover .v3-tile-inner {
  opacity: var(--opacity-100);
}

/* Color fill (16:9 swatch) */
.v3-color-fill {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-10);                     /* 4px */
  border: var(--border-width-thin) solid var(--color-highlight-secondary);
  box-sizing: border-box;
}
/* Add-tile fill (no color, hosts the + icon) */
.v3-add-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
}
.v3-add-fill img {
  width: 24px;
  height: 24px;
  display: block;
  filter: brightness(0) invert(1);                     /* ensure white */
}

/* Logo media (16:9) — 6px inner padding, image maximized to fill */
.v3-logo-media {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-10);                     /* 4px */
  background: var(--color-highlight-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-15);                            /* 6px */
  box-sizing: border-box;
}
.v3-logo-media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
/* When media itself is the +Add affordance, hold + icon at fixed size */
.v3-logo-media.v3-add-fill {
  background: transparent;
  padding: 0;
}
.v3-logo-media.v3-add-fill img {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
}

/* Tile label (hex / format / Add) */
.v3-tile-label {
  width: 100%;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body-small);              /* 11px */
  line-height: var(--line-height-body-small);          /* 16px */
  font-weight: var(--font-weight-regular);
  color: var(--color-content-tertiary);                /* #B0B1B2 */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════════════════════════
   STEP 3 — FONT LIST
════════════════════════════════ */
.v3-font-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);                                /* 4px */
  width: 100%;
  overflow-y: auto;
  flex: 1 0 0;
  min-height: 0;
}
.v3-font-row {
  display: flex;
  width: 100%;
  padding: var(--space-10);                            /* 4px outer */
  background: transparent;
  border: none;
  border-radius: var(--radius-25);                     /* 10px */
  cursor: pointer;
  font-family: var(--font-family-primary);
  text-align: center;
  transition: box-shadow var(--duration-fast) var(--easing-default);
}
.v3-font-row.is-selected {
  box-shadow: inset 0 0 0 var(--border-width-medium) var(--color-content-primary);
}
.v3-font-row > .v3-font-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  width: 100%;
  min-width: 160px;
  padding: var(--space-15) var(--space-20);            /* 6px 8px */
  background: var(--color-highlight-primary);
  border: var(--border-width-thin) solid var(--color-highlight-primary);
  border-radius: var(--radius-15);                     /* 6px */
  backdrop-filter: blur(var(--blur-small));
  -webkit-backdrop-filter: blur(var(--blur-small));
  font-size: var(--font-size-button-default);         /* 12px */
  line-height: var(--line-height-button-default);
  font-weight: var(--font-weight-button-default);     /* 510 */
  color: var(--color-content-primary);
  white-space: nowrap;
}
/* Per-font typeface application — name renders in its own face */
.v3-font-row.ff-neue  > .v3-font-name { font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', sans-serif; font-weight: 500; }
.v3-font-row.ff-henju > .v3-font-name { font-family: 'Henju', 'SF Pro', sans-serif; font-weight: 500; }
.v3-font-row.ff-sfpro > .v3-font-name { font-family: 'SF Pro', -apple-system, sans-serif; font-weight: 510; font-variation-settings: 'wdth' 100; }

.v3-font-add > .v3-font-name img {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) invert(1);
}

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
.v3-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-30);                                /* 12px */
  padding: var(--space-30);                            /* 12px */
  border-top: var(--border-width-thin) solid var(--color-highlight-primary);
  flex-shrink: 0;
}
/* Pin Next/Save button to 64px wide per Figma */
.v3-next-btn {
  width: var(--size-160);                              /* 64px */
}

/* Card-enter animation matches V2's feel */
@keyframes v3-card-enter {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}
.v3-wizard {
  animation: v3-card-enter 0.28s cubic-bezier(0.34, 1.1, 0.64, 1);
}

/* ════════════════════════════════
   TILE HOVER ACTIONS (color / logo)
════════════════════════════════ */
.v3-color-fill,
.v3-logo-media {
  position: relative;
}

/* Action overlay (Trash / Sliders) — centered on the preview area */
.v3-tile-actions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: var(--space-10);                                /* 4px */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--easing-default);
  z-index: 2;
}
.v3-tile:hover .v3-tile-actions,
.v3-tile:focus-within .v3-tile-actions {
  opacity: 1;
  pointer-events: auto;
}
/* Each action button is wrapped so its tooltip can be positioned relative */
.v3-action-wrap {
  position: relative;
  display: inline-flex;
}
/* DS .thumbnail-action defaults to absolute positioning. We use it inline,
   so override to static layout. The corner positioner classes (-tl/-tr) are
   not applied. */
.v3-action-wrap > .thumbnail-action {
  position: static;
}
/* Tooltip stays hidden until the button is hovered */
.v3-action-wrap > .v3-tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-15));                /* 6px gap above button */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--easing-default);
  z-index: 3;
}
.v3-action-wrap > .thumbnail-action:hover + .v3-tooltip,
.v3-action-wrap > .thumbnail-action:focus-visible + .v3-tooltip {
  opacity: 1;
}

/* Selectable tiles use div role=button — restore button-y affordances */
.v3-color-tile,
.v3-logo-tile {
  text-align: inherit;
  background: transparent;
}
.v3-color-tile:focus-visible,
.v3-logo-tile:focus-visible {
  outline: var(--border-width-medium) solid var(--color-accent-teal);
  outline-offset: var(--border-width-medium);
}

/* ════════════════════════════════
   PICKER MODAL (Add / Edit color)
════════════════════════════════ */
.v3-picker-modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: v3-card-enter 0.18s ease-out;
}
.v3-picker-modal[hidden] { display: none; }

.v3-picker-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-modeless-overlay);            /* #00000080 */
  backdrop-filter: blur(var(--blur-small));
  -webkit-backdrop-filter: blur(var(--blur-small));
}

.v3-picker-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-30);                                 /* 12px */
  z-index: 1;
}

.v3-picker-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-20);                                 /* 8px */
  width: 280px;                                         /* match picker width */
}