/* ============================================================
   Esse Werks — Use-case capture (capture-v2)

   Shared stylesheet for the use-case tap-cards + the global modal.
   Used by:
     - sections/livery-capture.liquid (inline on the homepage)
     - snippets/use-case-modal.liquid (sitewide modal, rendered once
       per page from layout/theme.liquid)

   Design tokens used:
     --accent          telemetry green #c2ff00 (livery-aware)
     --accent-warm     signal orange   #ff6a3d (Drift one-tap)
     --ew-white, --ew-paper, --ew-aluminum, --ew-steel, --ew-graphite,
     --ew-carbon, --ew-black

   Three legible card states per LP review:
     default     — restrained outlined tile, white label, dim sub
     recommended — pre-guess pinned: subtle green border + small
                   "Recommended for your car" badge top-right (no fill)
     selected    — green-filled left edge bar + inset accent ring;
                   reads as the latched switch position. Does not
                   conflict visually with "recommended" — selected
                   tiles drop the badge.

   Reduced-motion safe.
   ============================================================ */

/* ============================================================
   Tap-card row
   ============================================================ */
.ew-uc-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 720px) {
  .ew-uc-row { grid-template-columns: repeat(6, 1fr); gap: 12px; }
}

.ew-uc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: var(--ew-graphite);
  /* Phase 1 Follow-up G — border resting state is subdued (steel);
     the livery-accent border is a HOVER effect, not the default. */
  border: 1px solid var(--ew-steel);
  padding: 14px 16px 16px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  min-height: 102px;
  padding-left: 18px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.ew-uc-card:hover,
.ew-uc-card:focus-visible {
  outline: none;
  border-color: var(--ew-uc-livery-accent, var(--accent));
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .ew-uc-card { transition: none; }
  .ew-uc-card:hover, .ew-uc-card:focus-visible { transform: none; }
}

/* Card head — label + badge sit on one row so the badge does not
   intrude on the sub copy below. Badge is invisible by default;
   recommended state turns it on. Selected state hides it. */
.ew-uc-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.ew-uc-card__label {
  color: var(--ew-white);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.ew-uc-card__badge {
  display: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Phase 1 Follow-up G — badge color + border match the tile's
     livery accent (same color as the hover arrow on that tile). */
  color: var(--ew-uc-livery-accent, var(--accent-text));
  border: 1px solid var(--ew-uc-livery-accent, var(--accent));
  padding: 2px 6px;
  white-space: nowrap;
}
.ew-uc-card__sub {
  color: var(--ew-aluminum);
  font-size: 11.5px;
  line-height: 1.45;
}

/* RECOMMENDED state (chassis pre-guess) — Phase 1 Follow-up B:
   the top-edge color bar was removed per LP. The recommended signal
   is now just the small uppercase "RECOMMENDED FOR YOUR CAR" badge
   inside the card body. Border stays default (steel) per
   capture-v3 #9 — border is reserved for the SELECTED state. */
.ew-uc-card[data-pre-guess="true"] .ew-uc-card__badge { display: inline-flex; }

/* HOVER / FOCUS-VISIBLE — per-livery color treatment (Phase 1
   Follow-up D). Each tile's data-livery resolves to a local
   --ew-uc-livery-accent custom property; the hover bar (::after) and
   the hover arrow (.ew-uc-card__label::after) read that variable. No
   persistent rendering — both are hidden until the tile is hovered or
   keyboard-focused. The prior data-drift-prominent persistent
   treatment is removed; the JS attribute may still be painted by
   ew-use-case-prompt.js but is now a CSS no-op (kept in JS so any
   downstream listener that reads the flag for non-visual purposes
   continues to work). */
.ew-uc-card[data-livery="performance"] { --ew-uc-livery-accent: var(--livery-performance); }
.ew-uc-card[data-livery="drifter"]     { --ew-uc-livery-accent: var(--livery-drifter); }
.ew-uc-card[data-livery="oemplus"]     { --ew-uc-livery-accent: var(--livery-oemplus); }

/* Hover bar — slides in from the top, 180ms. transform-origin top so
   scaleY(0) collapses upward, scaleY(1) lands flush. */
.ew-uc-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ew-uc-livery-accent, var(--accent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.18s ease;
  pointer-events: none;
}
.ew-uc-card:hover::after,
.ew-uc-card:focus-visible::after { transform: scaleY(1); }

/* Hover arrow — opacity + translateX, ~180ms. The ' →' glyph is
   reserved with a fixed slot so the label doesn't jump on hover. */
.ew-uc-card__label::after {
  content: ' →';
  color: var(--ew-uc-livery-accent, var(--accent-text));
  font-weight: 800;
  opacity: 0;
  display: inline-block;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ew-uc-card:hover .ew-uc-card__label::after,
.ew-uc-card:focus-visible .ew-uc-card__label::after {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .ew-uc-card::after,
  .ew-uc-card__label::after { transition: none; }
}

/* SELECTED (latched) — Phase 1 Follow-up E:
   - Left-edge accent bar removed; thick-bar treatment now lives in
     ONE position (top) across both hover + selected states.
   - Top bar (::after) is made persistent on selected tiles via
     scaleY(1) so the latched tile reads as committed even when not
     hovered. Same per-livery color as hover.
   - Fill tint stays (carbon vs graphite) as a secondary signal.
   - Border stays at its per-livery resting color; no override.
   - Badge stays hidden on selected (no recommended-marker over a
     latched tile). */
.ew-uc-card[aria-checked="true"] {
  background: var(--ew-carbon);
  border-color: var(--ew-uc-livery-accent, var(--accent));
}
.ew-uc-card[aria-checked="true"]::after { transform: scaleY(1); }
.ew-uc-card[aria-checked="true"] .ew-uc-card__badge { display: none; }

/* Microcopy + skip ----------------------------------------- */
.ew-uc-microcopy {
  color: var(--ew-aluminum);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 14px 0 0;
}
.ew-uc-skip {
  margin: 8px 0 0;
}
.ew-uc-skip-btn {
  background: transparent;
  border: none;
  color: var(--ew-aluminum);
  font: inherit;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 6px 0;
}
.ew-uc-skip-btn:hover { color: var(--ew-white); }

/* ============================================================
   The modal wrapper (snippets/use-case-modal.liquid)
   ============================================================ */
.ew-uc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ew-uc-modal[hidden] { display: none; }
.ew-uc-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, 0.74);
  backdrop-filter: blur(2px);
}
.ew-uc-modal__dialog {
  position: relative;
  width: min(960px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--ew-black);
  border: 1px solid var(--ew-steel);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.ew-uc-modal__head {
  position: relative;
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--ew-steel);
}
.ew-uc-modal__veh-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-right: 56px; /* leave room for the absolute-positioned close button */
}
.ew-uc-modal__veh-change {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ew-paper);
  background: transparent;
  border: 1px solid var(--ew-steel);
  padding: 5px 11px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ew-uc-modal__veh-change:hover { color: var(--ew-white); border-color: var(--accent); }
.ew-uc-modal__title {
  color: var(--ew-white);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 6px 0 0;
}
.ew-uc-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--ew-steel);
  color: var(--ew-paper);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ew-uc-modal__close:hover { color: var(--ew-white); border-color: var(--accent); }
.ew-uc-modal__body { padding: 18px 28px 24px; }

body.ew-uc-modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .ew-uc-modal__dialog { max-height: 100vh; width: 100vw; }
  .ew-uc-modal__head { padding: 18px 18px 12px; }
  .ew-uc-modal__body { padding: 14px 18px 20px; }
}