/* Scoped guest guide; host fonts and page palette stay the source of truth. */
html:has(dialog.ewm-finder[open]) {
  overflow: hidden;
}

dialog.ewm-finder {
  --finder-cream: var(--cream);
  --finder-paper: var(--paper);
  --finder-ink: var(--ink);
  --finder-coral: var(--coral);
  --finder-blue: var(--blue-stroke);
  --finder-muted: var(--muted);
  --finder-rule: var(--line);
  box-sizing: border-box;
  width: min(960px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--finder-ink);
  background: var(--finder-cream);
  border: 1px solid var(--ink-a16);
  border-radius: 22px;
  box-shadow: var(--shadow-3);
  font-family: var(--font-body, 'Manrope', sans-serif);
  text-align: left;
  color-scheme: light;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.ewm-finder::backdrop {
  background: var(--scrim);
}

.ewm-finder *,
.ewm-finder *::before,
.ewm-finder *::after {
  box-sizing: border-box;
}

.ewm-finder [hidden] {
  display: none !important;
}

.ewm-finder p,
.ewm-finder h2,
.ewm-finder h3 {
  margin: 0;
}

.ewm-finder :where(button) {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ewm-finder button:focus-visible,
.ewm-finder h2:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.ewm-finder__shell {
  padding: clamp(22px, 4.5vw, 44px);
}

.ewm-finder__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: -12px;
  margin-bottom: 28px;
  padding-block: 12px;
  background: var(--finder-cream);
}

.ewm-finder__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}

.ewm-finder__eyebrow > span {
  color: var(--finder-coral);
  font-size: var(--fs-control-glyph);
  font-weight: 400;
  line-height: 1;
}

.ewm-finder__close {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--finder-rule);
  border-radius: 50%;
  background: var(--finder-paper);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.ewm-finder__close > span {
  font-size: var(--fs-control-glyph);
  line-height: 1;
}

.ewm-finder .ewm-finder__step {
  margin-bottom: 14px;
  color: var(--finder-coral);
  text-transform: uppercase;
}

.ewm-finder .ewm-finder__title {
  max-width: 22ch;
  font-family: var(--font-display, 'Literata', Georgia, serif);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.ewm-finder .ewm-finder__description {
  max-width: 66ch;
  margin-top: 20px;
  color: var(--finder-muted);
}

.ewm-finder__choices {
  display: grid;
  gap: 0;
  margin-top: 28px;
  padding-inline: 20px;
  border-block: 1px solid var(--finder-rule);
  border-radius: 8px;
  background: var(--finder-paper);
}

.ewm-finder__choice {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 96px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 6px;
  border-radius: 0;
  background: transparent;
  text-align: left;
  scroll-margin-block: 86px 20px;
}

.ewm-finder__choice + .ewm-finder__choice {
  border-top: 1px solid var(--finder-rule);
}

.ewm-finder__choice > span:first-child {
  min-width: 0;
}

.ewm-finder__choice-title,
.ewm-finder__choice-detail {
  display: block;
  overflow-wrap: anywhere;
}

.ewm-finder__choice-detail {
  margin-top: 5px;
  color: var(--finder-muted);
}

.ewm-finder__choice[aria-current="true"] {
  background: var(--blue-wash);
  box-shadow: var(--shadow-finder-current);
}

.ewm-finder__arrow {
  flex: 0 0 auto;
  color: var(--finder-coral);
  font-size: var(--fs-arrow-glyph);
  font-weight: 400;
  line-height: 1;
  transition: color 160ms ease;
}

.ewm-finder__selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 26px;
  padding-block: 16px;
  border-block: 1px solid var(--finder-rule);
}

.ewm-finder__selection > span {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ewm-finder__selection-label {
  display: block;
  margin-bottom: 3px;
  color: var(--finder-muted);
}

.ewm-finder__text-button {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--finder-ink);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--finder-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  scroll-margin-block: 86px 20px;
}

.ewm-finder__navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 24px;
}

.ewm-finder__recommendation {
  --finder-product-ground: var(--w-listening-bg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: start;
  gap: 28px;
  margin-top: 28px;
  padding: 24px;
  border: 1px solid var(--finder-border-soft);
  border-radius: 12px;
  background: var(--finder-product-ground);
}

.ewm-finder__recommendation[data-finder-recommendation="pronunciation"] {
  --finder-product-ground: var(--w-pronunciation-bg);
}

.ewm-finder__recommendation[data-finder-recommendation="speaking"] {
  --finder-product-ground: var(--w-speaking-bg);
}

.ewm-finder__recommendation[data-finder-recommendation="steps"] {
  --finder-product-ground: var(--w-steps-bg);
}

.ewm-finder__recommendation[data-finder-recommendation="skarb"] {
  --finder-product-ground: var(--w-skarb-bg);
}

.ewm-finder__product-visual,
.ewm-finder__product-copy {
  min-width: 0;
}

.ewm-finder__poster {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 6px;
  background: var(--finder-cream);
}

.ewm-finder .ewm-finder__product-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--finder-border);
  color: var(--finder-muted);
  font-family: var(--font-display, 'Literata', Georgia, serif);
  font-style: italic;
}

.ewm-finder .ewm-finder__product-caption > span {
  color: var(--finder-coral);
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: var(--icon-m);
  font-style: normal;
}

.ewm-finder .ewm-finder__product-purpose {
  margin-bottom: 10px;
  color: var(--finder-muted);
}

.ewm-finder .ewm-finder__product-name {
  font-family: var(--font-display, 'Literata', Georgia, serif);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.ewm-finder .ewm-finder__product-format {
  margin-top: 18px;
}

.ewm-finder .ewm-finder__product-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--finder-border);
  color: var(--finder-muted);
}

.ewm-finder__primary {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid var(--finder-coral);
  border-radius: 6px;
  background: var(--finder-coral);
  color: var(--on-dark);
  text-align: left;
  scroll-margin-block: 86px 20px;
}

.ewm-finder__primary > span {
  flex: 0 0 auto;
  font-size: var(--fs-arrow-glyph);
  font-weight: 400;
  line-height: 1;
}

.ewm-finder__recommendation--conversation {
  display: block;
  --finder-product-ground: var(--blue-wash);
  padding: clamp(20px, 4vw, 32px);
}

.ewm-finder__recommendation--conversation .ewm-finder__product-format {
  margin-top: 0;
  max-width: 62ch;
}

.ewm-finder__recommendation--conversation .ewm-finder__primary {
  width: fit-content;
  max-width: 100%;
}

.ewm-finder__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--finder-rule);
}

.ewm-finder__footer > p {
  color: var(--finder-muted);
}

@media (hover: hover) {
  .ewm-finder__choice:hover {
    background: var(--finder-choice-hover);
  }

  .ewm-finder__choice:hover .ewm-finder__arrow {
    color: var(--finder-blue);
  }

  .ewm-finder__close:hover {
    border-color: var(--finder-coral);
    background: var(--finder-close-hover);
  }

  .ewm-finder__text-button:hover {
    text-decoration-thickness: 2px;
  }

  .ewm-finder__primary:hover {
    border-color: var(--coral-press);
    background: var(--coral-press);
  }
}

@media (max-width: 720px) {
  .ewm-finder__recommendation {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .ewm-finder__product-visual {
    max-width: 100%;
    grid-row: 2;
  }

  .ewm-finder__product-copy {
    grid-row: 1;
    display: flex;
    flex-direction: column;
  }

  .ewm-finder__product-purpose { order: 0; }
  .ewm-finder__product-name { order: 1; }
  .ewm-finder__product-copy > .ewm-finder__primary { order: 2; }
  .ewm-finder__product-format { order: 3; }
  .ewm-finder__product-note { order: 4; }

  .ewm-finder__header {
    margin-bottom: 20px;
  }
}

@media (max-width: 420px) {
  dialog.ewm-finder {
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }

  .ewm-finder__shell {
    padding: 20px;
  }

  .ewm-finder__choices {
    padding-inline: 10px;
    margin-top: 24px;
  }

  .ewm-finder__choice {
    min-height: 100px;
    padding: 18px 4px;
    gap: 12px;
  }

  .ewm-finder__recommendation {
    padding: 16px;
    gap: 20px;
  }

  .ewm-finder__primary {
    padding-inline: 14px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .ewm-finder *,
  .ewm-finder *::before,
  .ewm-finder *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .ewm-finder button:focus-visible,
  .ewm-finder h2:focus-visible {
    outline-color: Highlight;
  }

  .ewm-finder__choice[aria-current="true"] {
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }

  .ewm-finder__primary,
  .ewm-finder__close {
    border-color: ButtonText;
  }
}

/* ── lane:L-GATE ── */
/* lane:L-GATE:end */

/* ── lane:L-VIS ── */
/* VISUAL-03 · Finder shell shares dialog shape, scrim and readable focus · gates: design:dialog-type, design-tokens */
dialog.ewm-finder { border-radius: var(--r-card); box-shadow: var(--shadow-3); }
.ewm-finder::backdrop { backdrop-filter: blur(6px); }
/* VISUAL-06 · Preserve the finder glyph fallback while its icon spans receive masks · gates: design:icons, forced-colors */
@supports ((mask-image:linear-gradient(currentColor,currentColor)) or (-webkit-mask-image:linear-gradient(currentColor,currentColor))) {
  .ewm-finder__eyebrow > .i,.ewm-finder__close > .i,.ewm-finder__arrow.i,
  .ewm-finder .ewm-finder__product-caption > .i,.ewm-finder__primary > .i { font-size: 0; line-height: 0; }
}
@media (forced-colors:active) {
  .ewm-finder__eyebrow > .i,.ewm-finder__close > .i,.ewm-finder__arrow.i,
  .ewm-finder .ewm-finder__product-caption > .i,.ewm-finder__primary > .i { font-size: inherit; line-height: inherit; }
}
/* A11Y-11 · Programmatic finder heading focus uses the shared heading ring · gates: focus */
.ewm-finder h2[tabindex="-1"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
/* lane:L-VIS:end */

/* ── lane:L-ROUTE ── */
/* UX-02 · статус рекомендации вместо кнопки · gates: no motion */
.ewm-finder .ewm-finder__primary[data-route-state="unavailable"] {
  width: fit-content;
  min-height: 49px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 600;
  justify-content: flex-start;
}
/* UX-07 · тихий второй путь после статуса и в ветке разговора · gates: route:contact */
.ewm-finder .route-contact.is-outline {
  width: fit-content;
  margin-top: var(--space-3);
  color: var(--finder-ink);
}
.ewm-finder__recommendation--conversation .route-contact {
  margin-top: var(--space-4);
}
/* UX-06 · порядок рекомендации на телефоне · gates: no motion */
@media (max-width: 720px) {
  .ewm-finder__product-copy > .route-contact { order: 2; }
  .ewm-finder__product-copy > .text-link { order: 3; }
  .ewm-finder__product-copy > .ewm-finder__product-format { order: 4; }
  .ewm-finder__product-copy > .ewm-finder__product-note { order: 5; }
}
/* lane:L-ROUTE:end */

/* ── lane:L-NAV ── */
/* lane:L-NAV:end */

/* ── lane:L-DLG ── */
/* INNOVATION-05 · вход и выход подбора с тихой заменой шага · gates: innovation.overlay, A11Y-12:R1,R2,R3,R8 */
@media (prefers-reduced-motion: no-preference) {
  dialog.ewm-finder { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-overlay) var(--ease-out), transform var(--dur-overlay) var(--ease-out), overlay var(--dur-overlay) allow-discrete, display var(--dur-overlay) allow-discrete; }
  dialog.ewm-finder[open] { opacity: 1; transform: none; }
  @starting-style { dialog.ewm-finder[open] { opacity: 0; transform: translateY(var(--rise)); } }
  dialog.ewm-finder::backdrop { opacity: 0; transition: opacity var(--dur-overlay) var(--ease-out); }
  dialog.ewm-finder[open]::backdrop { opacity: 1; }
  @starting-style { dialog.ewm-finder[open]::backdrop { opacity: 0; } }
  dialog.ewm-finder[data-instant], dialog.ewm-finder[data-instant]::backdrop { transition: none !important; }
}
/* INNOVATION-06 · типизированное перелистывание существующего подбора · gates: innovation.vt, A11Y-12:R1,R2,R3,R5,R8 */
dialog.ewm-finder[open] { view-transition-name: finder; }
dialog.ewm-finder[open] .ewm-finder__content { view-transition-name: finder-step; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.ewm-finder[open], .product-dialog[open], .product-viewer[open], [data-peek-flight]) { view-transition-name: none; }
  ::view-transition-group(finder) { animation-duration: var(--dur-overlay); animation-timing-function: var(--ease-out); }
  ::view-transition-group(finder-step) { animation: none; }
  ::view-transition-old(finder) { animation: none; opacity: 0; }
  ::view-transition-new(finder) { animation: none; opacity: 1; }
  @keyframes finder-step-old-forward { 30%, 100% { opacity: 0; transform: translateX(-12px); } }
  @keyframes finder-step-new-forward { from { opacity: 0; transform: translateX(12px); } 20% { opacity: 0; } }
  @keyframes finder-step-old-back { 30%, 100% { opacity: 0; transform: translateX(12px); } }
  @keyframes finder-step-new-back { from { opacity: 0; transform: translateX(-12px); } 20% { opacity: 0; } }
  html:active-view-transition-type(forward)::view-transition-old(finder-step) { animation: finder-step-old-forward var(--dur-hover) var(--ease-out) both; }
  html:active-view-transition-type(forward)::view-transition-new(finder-step) { animation: finder-step-new-forward var(--dur-ui) var(--ease-out) both; }
  html:active-view-transition-type(back)::view-transition-old(finder-step) { animation: finder-step-old-back var(--dur-hover) var(--ease-out) both; }
  html:active-view-transition-type(back)::view-transition-new(finder-step) { animation: finder-step-new-back var(--dur-ui) var(--ease-out) both; }
}
/* lane:L-DLG:end */

/* ── lane:L-FILM ── */
/* lane:L-FILM:end */

/* ── lane:L-MOT ── */
/* lane:L-MOT:end */

/* ── lane:L-PERF ── */
/* lane:L-PERF:end */