/* =====================================================
   TASTEWORLD — SEARCH MODULE
   Moorish-American Craft Layer
   ===================================================== */


/* =========================
   SEARCH ROOT VARIABLES
   ========================= */
/* Local flavor, not land law */
:root {
    --neo-bg: #050510;
    --neo-border: rgba(255, 255, 255, 0.06);
    --neo-accent: #f97316;
    --neo-accent-2: #06b6d4;
}

:root[data-theme="light"] {
    --neo-bg: #ffffff;
    --neo-border: rgba(15, 23, 42, 0.08);
    --neo-accent: #c2410c;
    --neo-accent-2: #0891b2;
}


/* =========================
   SEARCH PANEL SKIN
   ========================= */
/* Ornament, not structure */
.tw-panel {
    background:
        radial-gradient(140% 220% at 0% 0%, rgba(249, 115, 22, 0.22), transparent 60%),
        radial-gradient(140% 220% at 100% 100%, rgba(56, 189, 248, 0.22), transparent 60%),
        var(--neo-bg);
    border: 1px solid var(--neo-border);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.75);
}

[data-theme="light"] .tw-panel {
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}


/* =========================
   MOORISH FRAME ACCENT
   ========================= */
/* Symbol above the doorway */
.tw-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
            radial-gradient(ellipse at 50% -20%,
                rgba(249, 115, 22, 0.35) 0%,
                rgba(56, 189, 248, 0.25) 35%,
                rgba(244, 244, 245, 0.15) 50%,
                transparent 65%);
    mask:
        radial-gradient(circle at 50% -10%, transparent 42%, black 43%) top/120% 80% no-repeat,
        linear-gradient(black, black) bottom/100% 40% no-repeat;
    opacity: 0.25;
}


/* =========================
   HEADER — SEARCH TITLE
   ========================= */
/* Name the space */
.debug-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.debug-header h1 {
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tw-hero-heading);
    /* Tokenized so JS hero swaps inherit accessible contrast */
    text-shadow: 0 1px 0 rgba(2, 6, 23, 0.65);
}

.moor-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #facc15, #f97316);
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
}


/* =========================
   HERO COPY
   ========================= */
/* Instructions before action */
.debug-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
    .debug-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .debug-hero {
        margin-bottom: 0.6rem;
        /* was 1.25rem */
    }
}

.hero-copy p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--tw-hero-subtext);
}

.hero-copy em {
    color: var(--neo-accent);
    font-style: normal;
    font-weight: 600;
}

/* Light theme readability: keep headers legible on bright gradients */
[data-theme="light"] .debug-header h1 {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.hero-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.8rem;
    text-align: right;
}

@media (max-width: 768px) {
    .hero-meta {
        text-align: left;
        align-items: flex-start;
    }
}


/* =========================
   HERO META — DETAIL LAYER
   ========================= */

.hero-meta .tagline {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tw-hero-muted);
    opacity: 1;
}

.hero-meta .cities span {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--tw-hero-subtext);
}

.hero-meta .pill {
    align-self: flex-end;
    margin-top: 0.25rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    background: var(--tw-hero-pill-bg);
    border: 1px solid var(--tw-hero-pill-border);
    color: var(--tw-hero-pill-text);
    box-shadow: var(--tw-hero-pill-shadow);
}

@media (max-width: 768px) {
    .hero-meta .pill {
        align-self: flex-start;
    }
}

/* =========================
   FILTERS
   ========================= */
/* Order before taste */
.filters-group {
    margin-bottom: 1rem;
}

.filters-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #a5b4fc;
    margin-bottom: 0.4rem;
}

/* .filters-grid {
    display: grid;
        grid-template-columns: 1fr;
    gap: 0.75rem;
} */
/* .filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
} */
 .filters-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 769px) {
    .filters-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-field label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tw-text-main);
}

#food-type-wrap,
#drink-type-wrap {
    grid-column: 1 / -1;
}

/* SURGICAL: restaurant always gets its own row */
.filters-grid>.filter-field:has(#restaurant-input) {
    grid-column: 1 / -1;
}

/* =========================
   INPUTS
   ========================= */
.debug-input,
.debug-select {
    width: 100%;
    max-width: 100%;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    border: 1px solid var(--tw-input-border);
    background: var(--tw-input-bg);
    color: var(--tw-text-main);
    font-size: 16px;
    box-sizing: border-box;
    min-width: 0;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.debug-input::placeholder {
    color: var(--tw-placeholder);
}

/* .debug-input:focus,
.debug-select:focus {
    outline: none;
    border-color: var(--neo-accent);
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.6);
} */


/* =========================
   BUTTONS (SEARCH ONLY)
   ========================= */
/* Action carries weight */
.btn-orange {
    border: 1px solid var(--tw-btn-border);
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    background: var(--color-button-bg);
    color: var(--color-button-text);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    transition:
        filter 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.btn-center {
    grid-column: 1 / -1;
    /* span full row */
    display: flex;
    justify-content: center;
}

.btn-orange:hover {
    background: var(--color-button-bg-hover);
    filter: brightness(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    color: var(--color-button-text);
}

.btn-orange:active {
    transform: translateY(1px);
}

.btn-orange:focus-visible {
    outline: 2px solid var(--tw-focus-ring);
    outline-offset: 2px;
    color: var(--color-button-text);
}

.btn-orange:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* Back button on the taste step uses the same bright gradient as other CTAs */
.btn-orange.btn-secondary {
    background: var(--color-button-bg);
    color: var(--color-button-text);
    border-color: var(--tw-btn-border);
    opacity: 1;
}


/* =====================================================
   🔥 ACTION ROW — BUTTON AUTHORITY (NEW)
   ===================================================== */
/* Command before execution */
.search-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.75rem;
}

/* Desktop balance */
.search-actions .btn-orange {
    white-space: nowrap;
}

/* Mobile — honor the hand */
@media (max-width: 640px) {
    .search-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .search-actions .btn-orange {
        width: 100%;
        text-align: center;
    }
}


/* =========================
   TASTE GRID
   ========================= */
/* Rank desire */
.debug-grid--taste {
    width: 100%;
    max-width: 100%;
}






/* =========================
   TASTE SLOT
   ========================= */
/* Lock with intention */
.taste-slot {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 0;
    /* 🔑 equal width for all 5 */
    min-width: 0;
    /* 🔑 allows shrinking */
}

.taste-keyword {
    flex: 1 1 auto;
    min-width: 0;

    padding-right: 2.1rem;
    /* space for star */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* =========================
   SEAL BUTTON
   ========================= */
/* Authority mark */
.taste-lock-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.taste-lock-btn:active {
    transform: translateY(-50%) scale(0.96);
}

.taste-lock-btn .seal {
    width: 22px;
    height: 22px;
    transition: all 0.18s ease;
}


/* =========================
   LOCKED STATE
   ========================= */
/* Seal pressed */
.taste-slot.locked .taste-keyword {
    border-color: var(--neo-accent-2);
    color: var(--neo-accent-2);
    box-shadow:
        inset 0 0 0 1px rgba(56, 189, 248, 0.35),
        0 0 10px rgba(56, 189, 248, 0.35);
}


/* =========================
   MOBILE HINT
   ========================= */
/* Guidance, not clutter */
@media (max-width: 640px) {
    .taste-slot::after {
        position: absolute;
        right: 36px;
        font-size: 0.75rem;
        opacity: 0.35;
        pointer-events: none;
    }
}

/* =========================
   SEAL — STAR RESTORATION
   ========================= */
/* Sovereignty returns */

/* Outer ring — stone boundary */
.taste-lock-btn .seal circle {
    fill: rgba(255, 255, 255, 0.03);
    stroke: rgba(148, 163, 184, 0.45);
    stroke-width: 1;
}

/* Star — authority mark */
.taste-lock-btn .seal path {
    fill: rgba(148, 163, 184, 0.65);
    transition: fill 0.18s ease, filter 0.18s ease;
}

/* =========================
   SEAL — HOVER (UNLOCKED)
   ========================= */
/* Invitation to act */
.taste-slot:hover .seal circle {
    stroke: var(--neo-accent);
}

.taste-slot:hover .seal path {
    fill: var(--neo-accent);
}

/* =========================
   SEAL — LOCKED STATE
   ========================= */
/* Authority engaged */
.taste-slot.locked .seal circle {
    fill: rgba(6, 182, 212, 0.15);
    stroke: var(--neo-accent-2);
    box-shadow: inset 0 0 6px rgba(6, 182, 212, 0.6);
}

.taste-slot.locked .seal path {
    fill: var(--neo-accent-2);
    filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.8));
}

.taste-slot {
    max-width: 100%;
}


/* =========================
    Results section
   ========================= */

   .result-empty {
       font-size: 0.85rem;
        color: var(--tw-helper-text);
       padding: 1rem 0;
       text-align: center;
   }

   .results-empty-card {
       display: none;
       margin-top: 1rem;
       padding: 1.35rem 1.25rem;
       border-radius: 18px;
       border: 1px dashed var(--tw-line-soft);
       background: var(--tw-surface-muted);
       box-shadow: var(--tw-shadow-soft);
       color: var(--color-text);
   }

   .results-empty-card.is-visible {
       display: block;
   }

   .results-empty-card__eyebrow {
       text-transform: uppercase;
       letter-spacing: 0.12em;
       font-size: 0.72rem;
       color: var(--color-text-muted);
   }

   .results-empty-card__heading {
       margin: 0.35rem 0 0.4rem;
       font-size: 1.1rem;
       font-weight: 700;
       color: var(--color-text);
   }

   .results-empty-card__body {
       margin: 0;
       font-size: 0.92rem;
       color: var(--color-text);
   }

   .results-empty-card__chips {
       margin-top: 0.75rem;
       display: flex;
       flex-wrap: wrap;
       gap: 0.4rem;
   }

   .results-empty-card__chip {
       border-radius: 999px;
       padding: 0.3rem 0.85rem;
       border: 1px solid var(--tw-chip-border);
       background: var(--tw-chip-bg);
       color: var(--tw-chip-text);
       font-size: 0.78rem;
       font-weight: 600;
   }

   [data-theme="light"] .results-empty-card {
       background: rgba(255, 255, 255, 0.95);
       border-color: rgba(15, 23, 42, 0.12);
       box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
   }

  .result-card {
      position: relative;
      background: rgba(15, 23, 42, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 14px;
      padding: 1rem 1.15rem 1.05rem;
      margin-bottom: 0.85rem;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  }

   #results-meta {
       color: var(--color-text);
       font-weight: 600;
       letter-spacing: 0.04em;
       margin: 0.6rem 0 0.9rem;
   }

   [data-theme="light"] .results-shell {
       background: transparent;
       box-shadow: none;
   }

  [data-theme="light"] .result-card {
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.12);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  }

  .result-card .result-title-row {
      padding-right: 2.4rem;
  }

  .result-card .tw-favorite-toggle {
      position: absolute;
      top: 0.65rem;
      right: 0.75rem;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  }

   [data-theme="light"] .result-title {
       color: #0f172a;
   }

   [data-theme="light"] .result-restaurant {
       color: #1e293b;
   }

   [data-theme="light"] .result-location a {
       color: #0369a1;
       text-decoration-color: rgba(3, 105, 161, 0.4);
   }

   [data-theme="light"] .result-phone a {
       color: #0f172a;
   }

   [data-theme="light"] .result-desc {
       color: #1f2937;
   }

   [data-theme="light"] .result-meta-row {
       color: #334155;
   }

   [data-theme="light"] .badge-pill {
       background: rgba(15, 23, 42, 0.08);
       color: #0f172a;
   }

   .result-title-row {
       display: flex;
       justify-content: space-between;
       gap: 0.75rem;
       margin-bottom: 0.4rem;
   }

   .result-title {
       font-weight: 600;
       font-size: 0.95rem;
       color: var(--color-text);
       line-height: 1.3;
   }

   .tw-match {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       gap: 0.35rem;
       margin-top: 0.32rem;
   }

   .tw-match-badge {
       display: inline-flex;
       align-items: center;
       min-height: 1.2rem;
       padding: 0.16rem 0.45rem;
       border: 1px solid rgba(148, 163, 184, 0.28);
       border-radius: 999px;
       background: rgba(148, 163, 184, 0.14);
       color: #e5e7eb;
       font-size: 0.66rem;
       font-weight: 700;
       line-height: 1;
       letter-spacing: 0;
       white-space: nowrap;
   }

   .tw-match-badge--strong {
       background: rgba(20, 184, 166, 0.16);
       border-color: rgba(20, 184, 166, 0.34);
       color: #99f6e4;
   }

   .tw-match-badge--close {
       background: rgba(59, 130, 246, 0.15);
       border-color: rgba(59, 130, 246, 0.32);
       color: #bfdbfe;
   }

   .tw-match-badge--similar {
       background: rgba(245, 158, 11, 0.15);
       border-color: rgba(245, 158, 11, 0.34);
       color: #fde68a;
   }

   .tw-match-badge--broad {
       background: rgba(148, 163, 184, 0.14);
       border-color: rgba(148, 163, 184, 0.28);
       color: #e2e8f0;
   }

   .tw-match-reason {
       color: var(--color-text-muted);
       font-size: 0.74rem;
       line-height: 1.35;
   }

   [data-theme="light"] .tw-match-badge {
       background: rgba(248, 250, 252, 0.96);
       border-color: rgba(15, 23, 42, 0.12);
       color: #334155;
   }

   [data-theme="light"] .tw-match-badge--strong {
       background: #ccfbf1;
       border-color: #5eead4;
       color: #115e59;
   }

   [data-theme="light"] .tw-match-badge--close {
       background: #dbeafe;
       border-color: #93c5fd;
       color: #1e40af;
   }

   [data-theme="light"] .tw-match-badge--similar {
       background: #fef3c7;
       border-color: #fcd34d;
       color: #92400e;
   }

   [data-theme="light"] .tw-match-badge--broad {
       background: #f1f5f9;
       border-color: #cbd5e1;
       color: #334155;
   }

   [data-theme="light"] .tw-match-reason {
       color: #475569;
   }

   .result-restaurant {
       text-align: right;
       font-size: 0.78rem;
       color: var(--color-text-muted);
   }

   .result-restaurant-name a {
       color: var(--neo-accent);
       text-decoration: none;
   }

   .result-restaurant-name a:hover {
       text-decoration: underline;
   }

   .result-location {
       font-size: 0.78rem;
   }

   .result-location a {
       color: var(--color-link);
       font-weight: 500;
       text-decoration: underline;
       text-decoration-color: currentColor;
   }

   .result-location a:hover {
       color: var(--color-link-hover);
   }

   .result-phone a {
       color: var(--color-text-muted);
       text-decoration: none;
       font-size: 0.75rem;
   }

   .result-desc {
       font-size: 0.82rem;
       color: var(--color-text);
       margin: 0.4rem 0 0.55rem;
       line-height: 1.45;
   }

   .result-meta-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 0.78rem;
       color: var(--color-text-soft);
   }

   .result-badges {
       display: flex;
       gap: 0.35rem;
       flex-wrap: wrap;
   }

   .badge-pill {
       padding: 0.15rem 0.45rem;
       border-radius: 999px;
       font-size: 0.68rem;
       background: rgba(255, 255, 255, 0.08);
       color: #f3f4f6;
       text-transform: uppercase;
   }

   .badge-pill--offset {
       margin-left: 0.35rem;
   }

   .result-item-order {
       margin-top: 0.15rem;
   }

   .order-link {
       font-size: 0.72rem;
       color: var(--neo-accent-2);
       text-decoration: none;
       font-weight: 600;
   }

   .order-link:hover {
       text-decoration: underline;
   }

   @media (max-width: 640px) {
       .result-title-row {
           flex-direction: column;
           align-items: flex-start;
       }

       .result-restaurant {
           text-align: left;
       }
   }

   .is-hidden {
       display: none !important;
   }

   .autocomplete-list {
       position: absolute;
       top: calc(100% + 6px);
       left: 0;
       width: 100%;
       max-width: 100%;

       box-sizing: border-box;

       max-height: 260px;
       overflow-y: auto;
       overflow-x: hidden;

       background: rgba(15, 23, 42, 0.98);
       border: 1px solid rgba(148, 163, 184, 0.35);
       border-radius: 12px;

       z-index: 9999;
       box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);

       display: none;
       color: var(--tw-text-main);
   }

   .autocomplete-list.active {
       display: block;
   }

   [data-theme="light"] .autocomplete-list {
       background: var(--tw-surface);
       border-color: var(--tw-border);
       box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
   }

   .autocomplete-wrapper {
       position: relative;
       width: 100%;
   }

   .autocomplete-item {
       padding: 0.55rem 0.75rem;
       cursor: pointer;
       color: var(--neo-accent);
       font-size: 0.9rem;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .autocomplete-item:hover,
   .autocomplete-item.selected {
       background: rgba(36, 36, 50, 0.85);
       color: #fff;
   }

   [data-theme="light"] .autocomplete-item:hover,
   [data-theme="light"] .autocomplete-item.selected {
       background: rgba(226, 232, 240, 0.95);
       color: var(--tw-text-main);
    }


   /* HORIZONTAL LAYOUT */
   /* .taste-strip {
       display: flex;
       gap: 0.75rem;
       overflow-x: auto;
       padding: 0.5rem 0;
       scroll-snap-type: x mandatory;
   } */


   /* ===== Taste Slot Rail (mobile-first) ===== */
#taste-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    overflow: hidden;
    overflow-y: hidden;
    padding: 0.25rem 0;
}

#taste-section {
    margin-top: 0.75rem;
}

.taste-rail {
    border-radius: var(--tw-card-radius-lg, 22px);
    border: 1px solid var(--tw-line-soft);
    background:
        linear-gradient(135deg, rgba(249, 115, 22, 0.08), transparent 45%),
        linear-gradient(315deg, rgba(56, 189, 248, 0.08), transparent 55%),
        var(--tw-surface-muted);
    box-shadow: var(--tw-shadow-soft);
    padding: 1rem 1.15rem 1.3rem;
    backdrop-filter: blur(14px);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="light"] .taste-rail {
    background:
        linear-gradient(135deg, rgba(251, 191, 36, 0.12), transparent 40%),
        linear-gradient(315deg, rgba(59, 130, 246, 0.12), transparent 60%),
        rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 26px 55px rgba(15, 23, 42, 0.16);
}

.taste-inspo {
    margin-top: 1rem;
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    border: 1px dashed var(--tw-line-soft);
    background: var(--tw-surface-muted);
    background: color-mix(in srgb, var(--tw-surface) 72%, transparent);
    color: var(--color-text);
}

[data-theme="light"] .taste-inspo {
    background: rgba(255, 255, 255, 0.96);
    background: color-mix(in srgb, #ffffff 92%, rgba(148, 163, 184, 0.12));
    border-color: rgba(15, 23, 42, 0.15);
}

.taste-inspo__eyebrow {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tw-text-muted);
    margin-bottom: 0.35rem;
}

.taste-inspo__copy {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--color-text);
}

.taste-inspo__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.taste-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    border: 1px solid var(--tw-chip-border);
    background: var(--tw-chip-bg);
    color: var(--tw-chip-text);
    padding: 0.35rem 0.95rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: var(--tw-chip-shadow);
}

.taste-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.taste-chip:focus-visible {
    outline: 2px solid var(--tw-focus-ring);
    outline-offset: 2px;
}

[data-theme="light"] .taste-chip {
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

   /* #taste-row {
       display: flex;
       flex-direction: column;
       gap: 0.6rem;
       width: 100%;
       padding: 0.25rem 0;
   } */


   #taste-row::-webkit-scrollbar {
       display: none;
   }

   #taste-row {
       scrollbar-width: none;
       /* Firefox */
   }


   /* .taste-slot.dragging {
       outline: 2px dashed var(--neo-accent);
       outline-offset: 3px;
   } */

   /* =========================
   MOBILE — VERTICAL STACK
   ========================= */
   @media (max-width: 640px) {
       #taste-row {
           flex-direction: column;
           gap: 0.6rem;
       }

       .taste-slot {
           flex: none;
           width: 100%;
       }
   }

   @media (max-width: 640px) {
       .taste-slot::after {
           content: "⇅";
           position: absolute;
           right: 34px;
           font-size: 0.7rem;
           opacity: 0.25;
           pointer-events: none;
       }
   }


   .search-actions .btn-orange {
       flex: 1 1 0;
       /* 🔑 allow equal expansion */
       text-align: center;
   }


   .tw-panel {
       position: relative;
       z-index: 1;
   }

   .tw-panel {
       overflow-x: hidden;
       overflow-y: visible;
   }

   .debug-header {
       display: grid;
       grid-template-columns: 1fr auto;
       align-items: center;
       gap: 1rem;
   }

   @media (max-width: 768px) {
       .debug-header {
           grid-template-columns: 1fr;
       }
   }

/* National pick card consumes theme tokens so both modes stay legible */
.featured--national {
    max-width: 360px;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: var(--tw-surface-muted);
    border: 1px solid var(--tw-line-soft);
    font-size: 0.78rem;
    text-align: right;
    color: var(--color-text);
}

/* Light theme version keeps the highlight without washing out text */
[data-theme="light"] .featured--national {
    background: var(--tw-surface);
    border-color: var(--tw-border);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    text-align: right;
}

   @media (max-width: 768px) {
       .featured--national {
           text-align: left;
           max-width: 100%;
       }
   }

   .featured-label {
       font-size: 0.65rem;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       color: var(--color-text-muted);
       margin-bottom: 0.2rem;
   }

   .featured-name {
       font-weight: 600;
       color: var(--color-text);
   }

   .featured-desc {
       font-size: 0.75rem;
       color: var(--color-text-soft);
       margin: 0.2rem 0;
   }

   .featured-meta {
       font-size: 0.7rem;
       color: var(--color-text-soft);
   }

.featured-link {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--color-link);
    text-decoration: none;
    font-weight: 600;
}

.featured-link:hover {
    text-decoration: underline;
    color: var(--color-link-hover);
}


   /* =========================
   MENU FOCUS — PRIMARY FILTER
   ========================= */

   .filter-field--focus {
       position: relative;
       padding: 0.55rem 0.65rem 0.75rem;
       border-radius: 14px;
       background:
           radial-gradient(120% 160% at 0% 0%, rgba(249, 115, 22, 0.18), transparent 55%),
           radial-gradient(120% 160% at 100% 100%, rgba(56, 189, 248, 0.18), transparent 55%),
           rgba(15, 23, 42, 0.85);
       border: 1px solid rgba(255, 255, 255, 0.08);
       box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
   }

   .filter-field--focus label {
       font-size: 0.7rem;
       letter-spacing: 0.18em;
       text-transform: uppercase;
       color: #facc15;
       margin-bottom: 0.35rem;
       display: inline-flex;
       align-items: center;
       gap: 0.4rem;
   }

   .filter-field--focus label::before {
       content: "";
       width: 6px;
       height: 6px;
       border-radius: 999px;
       background: radial-gradient(circle at 30% 30%, #facc15, #f97316);
       box-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
   }


   .filter-field--focus select,filter-field--focus input.debug-input {
       width: 100%;
       padding: 0.55rem 0.75rem;
       border-radius: 12px;
       border: 1px solid rgba(148, 163, 184, 0.35);
       background: rgba(2, 6, 23, 0.85);
       color: var(--color-input-text);
       font-size: 0.9rem;
       appearance: none;
       cursor: pointer;
   }

   .filter-field--focus select:focus, .filter-field--focus input.debug-input:focus {
       outline: none;
       border-color: var(--neo-accent);
       box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.6);
   }

   .filter-field--focus::after {
       content: "▾";
       position: absolute;
       right: 14px;
       top: 58%;
       transform: translateY(-50%);
       font-size: 0.7rem;
       color: #94a3b8;
       pointer-events: none;
   }

   /* Light theme tokens keep the focus card legible on white surfaces */
   [data-theme="light"] .filter-field--focus {
       background:
           radial-gradient(120% 160% at 0% 0%, rgba(217, 119, 6, 0.12), transparent 55%),
           radial-gradient(120% 160% at 100% 100%, rgba(37, 99, 235, 0.12), transparent 55%),
           var(--tw-surface-muted);
       border-color: var(--tw-border);
       box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
   }

   [data-theme="light"] .filter-field--focus select,
   [data-theme="light"] .filter-field--focus input.debug-input {
       background: var(--tw-surface);
       color: var(--tw-text-main);
       border-color: var(--tw-border);
   }


   .result-address {
       font-size: 0.78rem;
        color: var(--color-text-soft);
       margin-top: 2px;
   }

   .result-location {
       font-size: 0.75rem;
        color: var(--color-text-soft);
   }


   .filter-actions {
       display: grid;
       gap: 1rem;
       margin-top: 1.25rem;
   }

   .filter-action {
       text-align: center;
   }

   .action-helper {
       margin-top: 0.35rem;
       font-size: 0.75rem;
       color: var(--tw-helper-text);
   }

   .search-status {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 0;
       font-size: 14px;
       color: var(--tw-helper-text);
   }

   .search-status.hidden {
       display: none;
   }

   .spinner {
       width: 16px;
       height: 16px;
       border: 2px solid rgba(255, 255, 255, 0.35);
       border-top-color: var(--tw-link);
       border-radius: 50%;
       animation: spin 0.9s linear infinite;
   }

   [data-theme="light"] .spinner {
       border-color: rgba(15, 23, 42, 0.25);
   }

   @keyframes spin {
       to {
           transform: rotate(360deg);
       }
   }

   /* =========================
   MOBILE — RESTORE VERTICAL FLOW
   ========================= */
   @media (max-width: 640px) {

       /* Filters stack vertically */
       .filters-grid {
           grid-template-columns: 1fr;
       }

       /* Remove desktop spanning behavior */
       #food-type-wrap,
       #drink-type-wrap,
       .filters-grid>.filter-field,
       .filters-grid>.filter-actions {
           grid-column: auto;
       }
       

       /* Buttons fill width naturally */
       .btn-center {
           justify-content: stretch;
       }

       .btn-center .btn-orange {
           width: 100%;
       }
   }



@media (max-width: 768px) {
    .filters-grid {
        grid-template-columns: 1fr;
        /* CRITICAL for mobile */
        gap: 0.55rem;
        /* slightly tighter */
    }
}
/* =========================
   FLOATING RESTAURANT LOCK
   ========================= */

/* Token surfaces ensure lock banner stays legible when JS toggles restaurant mode */
.restaurant-lock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 14px;
    background:
        radial-gradient(120% 160% at 0% 0%,
            rgba(249, 115, 22, 0.18),
            transparent 55%),
        radial-gradient(120% 160% at 100% 100%,
            rgba(56, 189, 248, 0.18),
            transparent 55%),
        var(--tw-surface-muted);
    border: 1px solid var(--tw-line-soft);
    box-shadow: var(--tw-shadow-soft);
    backdrop-filter: blur(8px);
}

[data-theme="light"] .restaurant-lock {
    background:
        radial-gradient(120% 160% at 0% 0%,
            rgba(217, 119, 6, 0.12),
            transparent 55%),
        radial-gradient(120% 160% at 100% 100%,
            rgba(37, 99, 235, 0.12),
            transparent 55%),
        var(--tw-surface-muted);
    border-color: var(--tw-border);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.restaurant-lock-text {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tw-helper-text);
}

.restaurant-lock-text strong {
    color: var(--neo-accent);
    font-weight: 600;
}

.btn-exit-restaurant {
    padding: 0.45rem 1.1rem;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.4);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .restaurant-lock {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .btn-exit-restaurant {
        width: 100%;
    }
}

.restaurant-page-link {
    font-weight: 600;
    text-decoration: none;
    color: var(--tw-link);
}

.restaurant-page-link:hover {
    text-decoration: underline;
    color: var(--tw-link-hover);
}

  .restaurant-page-link {
      color: var(--neo-accent);
      font-weight: 600;
      text-decoration: none;
  }

  .restaurant-page-link:hover {
      text-decoration: underline;
  }

  /* =====================================================
   FIX: SINGLE SCROLL AUTHORITY (STEP 1 AUTOCOMPLETE)
   ===================================================== */

  /* 1) Ensure Step 1 never becomes a scroll island */
  .filters-group,
  .filters-grid,
  .filter-field {
      overflow: visible;
  }

  @media (max-width: 768px) {
      .filter-field {
          gap: 0.18rem;
      }
  }

  @media (max-width: 768px) {
      .filter-field--focus {
          padding: 0.45rem 0.6rem 0.6rem;
      }
  }
  

  /* 2) Make autocomplete participate in normal flow */
  .autocomplete-wrapper {
      position: relative;
      /* keep anchor */
  }

  /* CHANGE from absolute → static */
  .autocomplete-list {
      position: static;
      width: 100%;
      margin-top: 0.4rem;

      max-height: 260px;
      /* still bounded */
      overflow-y: auto;
      /* list scrolls, page does not split */
      overflow-x: hidden;

      display: none;
      /* JS still controls visibility */
  }

  /* Active state remains the same */
  .autocomplete-list.active {
      display: block;
  }

  /* 3) Calm visual separation so Step 2 clearly waits */
  .autocomplete-list.active {
      margin-bottom: 1rem;
  }

  /* 4) Mobile safety: no accidental scroll traps */
  @media (max-width: 640px) {
      .autocomplete-list {
          max-height: 220px;
      }
  }

  .step-one {
      position: relative;
      z-index: 1;
  }

  @media (max-width: 768px) {
      .step-one>.filters-group {
          margin-bottom: 0.4rem;
      }
  }


  .restaurant-actions-row {
      display: flex;
      gap: 14px;
      margin-top: 12px;
  }

  /* Desktop: side by side, same width */
  .restaurant-actions-row .filter-action {
      flex: 1;
  }

  .restaurant-actions-row .btn-orange {
      width: 100%;
  }

  /* Light theme: make action buttons feel like the rest of the UI */
  [data-theme="light"] .restaurant-actions-row .filter-action {
      background: transparent;
      border: none;
      padding: 0;
      color: var(--color-text);
  }

  /* Mobile: stack, still same width */
  @media (max-width: 640px) {
      .restaurant-actions-row {
          flex-direction: column;
      }
  }

  /* =========================================================
   HERO MOBILE SWIPE CAROUSEL (Paste into search_v1_copy.css)
   Only affects the hero strip + dots. Desktop stays normal.
   ========================================================= */

  /* Dots hidden by default (desktop) */
  .hero-dots {
      display: none;
  }

  /* Mobile: hero becomes a swipe carousel */
  @media (max-width: 768px) {

      /* Make the hero container swipeable */
      .debug-hero {
          display: flex;
          gap: 12px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          padding-bottom: 6px;
          scrollbar-width: none;
          /* Firefox */
      }

      .debug-hero::-webkit-scrollbar {
          display: none;
          /* Chrome/Safari */
      }

      /* Each slide takes most of the width */
      .debug-hero .hero-slide {
          flex: 0 0 88%;
          scroll-snap-align: start;
          scroll-snap-stop: always;
      }

      /* Dots visible on mobile */
      .hero-dots {
          display: flex;
          justify-content: center;
          gap: 10px;
          margin-top: 8px;
      }

      .hero-dots .dot {
          width: 7px;
          height: 7px;
          border-radius: 999px;
          border: 0;
          opacity: 0.55;
          background: var(--tw-text-soft);
      }

      .hero-dots .dot.is-active {
          opacity: 1;
          background: var(--tw-text-main);
      }
  }

  /* If hero-copy is gone, make the remaining hero block fill nicely */
  .debug-hero {
      display: block;
      width: 100%;
  }

  .hero-meta--solo {
      width: 100%;
  }

  /* Optional: center the hero meta (desktop) */
  .hero-meta--solo {
      text-align: center;
  }

  /* Make pill centered */
  .hero-meta--solo .pill {
      margin: 10px auto 0;
  }

  /* Mobile polish */
  @media (max-width: 768px) {
      .hero-meta--solo {
          text-align: left;
          /* feels more natural on mobile */
      }

      .hero-meta--solo .pill {
          margin-left: 0;
      }
  }

  .filters-label,
  .debug-label {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;

      padding: 0.45rem 0.75rem;
      border-radius: 999px;

      display: inline-block;

      background: var(--tw-chip-bg);
      border: 1px solid var(--tw-chip-border);
      color: var(--tw-chip-text);
      box-shadow:
          var(--tw-chip-shadow),
          0 0 10px rgba(249, 115, 22, 0.25);

      margin-bottom: 0.75rem;
  }

  .debug-label {
      background: linear-gradient(135deg,
              rgba(212, 175, 55, 0.35),
              rgba(249, 115, 22, 0.35));
  }

  /* Token-driven helper text so async filter hints stay legible */
  .filters-helper {
      font-size: 0.85rem;
      margin: 0.35rem 0 0.85rem;
      color: var(--tw-helper-text);
  }

  @media (max-width: 768px) {
      .taste-header-row {
          margin-top: 0.6rem;
          /* was visually ~1.5rem+ */
      }
  }

  @media (max-width: 768px) {
      #taste-row {
          gap: 0.45rem;
      }

      .taste-slot {
          padding: 0.35rem 0.5rem;
      }
  }

  @media (max-width: 768px) {
      .search-actions {
          margin-top: 0.5rem;
          gap: 0.6rem;
      }
  }

.guest-greeting {
    margin-top: 14px;
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--tw-hero-subtext);
}

/* .taste-slot[data-slot-index="0"] {
    border: 2px solid var(--tw-accent-gold);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
    padding-top: 4px;
    padding-bottom: 4px;
} */

.taste-example {
    margin-top: 4px;
    text-align: left;
    line-height: 1.2;
}

.taste-example-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
    font-size: 0.82rem;
    color: var(--tw-text-soft);
}

.taste-example-stack strong:first-child {
    color: var(--tw-accent-gold);
}

.taste-example-stack span {
    display: block;
    color: var(--tw-helper-text);
    font-weight: 600;
}

.taste-weight-note {
    display: block;
    margin-top: 4px;
    margin-bottom: 2px;
    font-size: 0.78rem;
    letter-spacing: 0.3px;
    opacity: 1;
    font-weight: 500;
    color: var(--tw-accent-gold);
}

[data-theme="light"] .taste-weight-note {
    color: var(--tw-text-main);
}

/* Use focus-visible so JS-rendered inputs always show WCAG-compliant rings */
.debug-input:focus-visible,
.debug-select:focus-visible {
    border-color: var(--tw-focus-ring);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.35);
}

[data-theme="light"] .debug-input:focus-visible,
[data-theme="light"] .debug-select:focus-visible {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.2);
}

/* =====================================================
   Phase 1 polish layer: active TasteWorld discover flow
   ===================================================== */
.tw-panel {
    max-width: 1040px;
    padding: clamp(1.2rem, 2vw, 2rem);
    border-radius: var(--tw-radius-lg, 18px);
    background:
        linear-gradient(145deg, rgba(249, 115, 22, 0.09), transparent 34%),
        linear-gradient(315deg, rgba(34, 211, 238, 0.08), transparent 38%),
        var(--tw-premium-surface, rgba(15, 23, 42, 0.82));
    border-color: var(--tw-premium-border, rgba(226, 232, 240, 0.13));
    box-shadow: var(--tw-premium-shadow, 0 18px 46px rgba(0, 0, 0, 0.42));
}

.tw-panel::before {
    opacity: 0.12;
}

.debug-header {
    align-items: start;
    margin-bottom: 1rem;
}

.debug-header h1 {
    max-width: 680px;
    margin: 0;
    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: 0;
    text-transform: none;
}

.moor-dot {
    width: 0.72rem;
    height: 0.72rem;
    margin-top: 0.38rem;
}

.featured--national,
.featured--city,
.debug-hero,
.discover-progress,
.taste-rail,
.results-shell,
.step-summary {
    border-radius: var(--tw-radius-lg, 18px);
    border: 1px solid var(--tw-premium-border, rgba(226, 232, 240, 0.13));
    background: var(--tw-premium-surface, rgba(15, 23, 42, 0.82));
    box-shadow: var(--tw-premium-shadow-soft, 0 12px 28px rgba(0, 0, 0, 0.26));
}

.debug-hero {
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.hero-meta .tagline {
    color: var(--tw-accent-gold);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hero-meta .cities span {
    display: block;
    max-width: 720px;
    margin-inline: auto;
    font-size: 1rem;
    color: var(--color-text);
}

.hero-meta .pill {
    padding: 0.42rem 0.85rem;
    letter-spacing: 0.05em;
    box-shadow: none;
}

.featured--national,
.featured--city {
    color: var(--color-text);
}

.featured-name {
    font-size: 0.92rem;
}

.featured-desc,
.featured-meta {
    line-height: 1.45;
}

.filters-label,
.debug-label {
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.24);
    box-shadow: none;
    color: var(--tw-accent-gold);
    font-size: 0.78rem;
    letter-spacing: 0.09em;
}

.filters-helper,
.taste-helper,
.action-helper,
.tw-match-reason {
    line-height: 1.55;
}

.filters-helper {
    max-width: 760px;
    margin-bottom: 1rem;
    color: var(--tw-helper-text);
}

.filters-grid {
    gap: 1rem;
    align-items: start;
}

.filter-field,
.filter-action {
    min-width: 0;
}

.filter-field {
    padding: 0.85rem;
    border-radius: var(--tw-radius-md, 14px);
    border: 1px solid var(--tw-premium-border, rgba(226, 232, 240, 0.13));
    background: var(--tw-premium-surface, rgba(15, 23, 42, 0.82));
}

.filter-field--focus {
    padding: 0.9rem;
    border-radius: var(--tw-radius-md, 14px);
    background:
        linear-gradient(145deg, rgba(249, 115, 22, 0.11), transparent 42%),
        var(--tw-premium-surface-strong, rgba(15, 23, 42, 0.94));
    border-color: rgba(249, 115, 22, 0.22);
    box-shadow: var(--tw-premium-shadow-soft, 0 12px 28px rgba(0, 0, 0, 0.26));
}

.filter-field--focus::after {
    display: none;
}

#food-type-wrap::after,
#drink-type-wrap::after {
    display: block;
}

.filter-field label,
.filter-field--focus label {
    color: var(--color-text);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
}

.debug-input,
.debug-select {
    min-height: 46px;
    border-radius: var(--tw-radius-sm, 10px);
    border-color: var(--tw-premium-border, rgba(226, 232, 240, 0.13));
    background: var(--tw-premium-surface-strong, rgba(15, 23, 42, 0.94));
}

.debug-input:hover,
.debug-select:hover {
    border-color: rgba(249, 115, 22, 0.35);
}

.btn-orange {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.72rem 1.1rem;
    border-radius: 999px;
    letter-spacing: 0.035em;
    text-transform: none;
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.18);
}

.btn-orange--primary,
#continue-to-taste,
#continue-to-results,
.inline-continue-btn {
    background: linear-gradient(135deg, #f97316, #facc15);
    color: #111827;
    border-color: rgba(250, 204, 21, 0.34);
}

.btn-orange.btn-secondary,
#clear-tastes,
#cancel-search-btn,
#start-over-link {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--tw-premium-border, rgba(226, 232, 240, 0.13));
    color: var(--color-text);
    box-shadow: none;
}

#shuffle-tastes,
#show-synth-results {
    background: rgba(34, 211, 238, 0.12);
    border-color: rgba(34, 211, 238, 0.28);
    color: var(--color-text);
}

.search-actions {
    gap: 0.7rem;
}

.taste-header-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: 1rem;
    align-items: start;
}

.taste-helper {
    padding: 0.95rem 1rem;
    border-radius: var(--tw-radius-md, 14px);
    border: 1px solid var(--tw-premium-border, rgba(226, 232, 240, 0.13));
    background: var(--tw-premium-surface, rgba(15, 23, 42, 0.82));
    color: var(--tw-helper-text);
}

.taste-helper p {
    margin: 0;
}

.taste-helper-lede {
    color: var(--color-text);
    font-size: 0.98rem;
    line-height: 1.45;
}

.taste-helper-lede strong {
    color: var(--tw-accent-gold);
    font-weight: 800;
}

.taste-weight-note {
    margin-top: 0.35rem;
    margin-bottom: 0;
    color: var(--tw-helper-text);
    font-size: 0.88rem;
    letter-spacing: 0;
    line-height: 1.45;
}

.taste-helper-note {
    margin-top: 0.75rem;
}

.taste-example {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--tw-premium-border, rgba(226, 232, 240, 0.13));
}

.taste-rail {
    padding: clamp(1rem, 2vw, 1.35rem);
}

.taste-rail__intro {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
}

.taste-rail__intro span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--tw-premium-border, rgba(226, 232, 240, 0.13));
    background: rgba(255, 255, 255, 0.055);
    color: var(--tw-helper-text);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.taste-rail__intro span:first-child {
    border-color: rgba(250, 204, 21, 0.32);
    background: rgba(250, 204, 21, 0.11);
    color: var(--tw-accent-gold);
}

#taste-row {
    gap: 0.72rem;
    overflow: visible;
}

.taste-slot {
    display: grid;
    grid-template-columns: 2.4rem minmax(92px, 0.35fr) minmax(0, 1fr);
    gap: 0.75rem;
    min-height: 58px;
    padding: 0.7rem 0.85rem;
    border-radius: var(--tw-radius-md, 14px);
    border: 1px solid var(--tw-premium-border, rgba(226, 232, 240, 0.13));
    background: var(--tw-premium-surface-strong, rgba(15, 23, 42, 0.94));
    box-shadow: none;
}

#taste-row .taste-slot:first-child {
    grid-template-columns: 2.8rem minmax(120px, 0.38fr) minmax(0, 1fr);
    min-height: 72px;
    padding: 0.95rem 1rem;
    border-color: rgba(250, 204, 21, 0.52);
    background:
        linear-gradient(135deg, rgba(250, 204, 21, 0.13), transparent 44%),
        var(--tw-premium-surface-strong, rgba(15, 23, 42, 0.94));
    box-shadow: 0 12px 30px rgba(250, 204, 21, 0.12);
}

#taste-row .taste-slot:not(:first-child) {
    background:
        linear-gradient(135deg, rgba(148, 163, 184, 0.06), transparent 48%),
        var(--tw-premium-surface-strong, rgba(15, 23, 42, 0.94));
}

#taste-row .taste-slot:nth-child(2) {
    margin-top: 1.55rem;
}

#taste-row .taste-slot:nth-child(2)::before {
    content: "Extra TasteBuds";
    position: absolute;
    top: -1.18rem;
    left: 0.1rem;
    color: var(--tw-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.taste-label {
    align-self: center;
    color: var(--tw-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.taste-priority {
    align-self: center;
    justify-self: center;
    display: inline-flex;
    width: 2.15rem;
    height: 2.15rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(148, 163, 184, 0.13);
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1;
}

#taste-row .taste-slot:first-child .taste-priority {
    width: 2.45rem;
    height: 2.45rem;
    border-color: rgba(250, 204, 21, 0.54);
    background: rgba(250, 204, 21, 0.16);
    color: var(--tw-accent-gold);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.08);
}

#taste-row .taste-slot:first-child .taste-label {
    color: var(--tw-accent-gold);
}

#taste-row .taste-slot:first-child .taste-label::after {
    content: "TasteBud 1";
    display: inline-flex;
    margin-left: 0.45rem;
    padding: 0.12rem 0.38rem;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.13);
    color: var(--tw-accent-gold);
    font-size: 0.62rem;
}

.taste-keyword {
    min-height: 42px;
    padding-right: 3.35rem;
}

#taste-row .taste-slot:first-child .taste-keyword {
    min-height: 48px;
    font-weight: 700;
}

.taste-lock-btn {
    right: 0.45rem;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
}

.taste-lock-btn .seal {
    width: 24px;
    height: 24px;
}

.taste-slot.dragging {
    border-color: rgba(34, 211, 238, 0.48);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.16);
}

.taste-inspo {
    border-style: solid;
}

.search-actions--primary {
    justify-content: flex-end;
    margin-top: 0.65rem;
}

.search-actions--primary #continue-to-results {
    flex: 0 1 280px;
    min-height: 52px;
    font-size: 0.96rem;
    box-shadow: 0 16px 34px rgba(249, 115, 22, 0.26);
}

.results-shell {
    margin-top: 1rem;
    padding: clamp(1rem, 2vw, 1.25rem);
}

.search-status {
    padding: 0.9rem 1rem;
    border-radius: var(--tw-radius-md, 14px);
    border: 1px solid var(--tw-premium-border, rgba(226, 232, 240, 0.13));
    background: var(--tw-premium-surface-strong, rgba(15, 23, 42, 0.94));
}

#results-meta {
    margin: 0.75rem 0 1rem;
    color: var(--color-text);
    letter-spacing: 0;
}

.result-card {
    border-radius: var(--tw-radius-lg, 18px);
    padding: 1.05rem 1.15rem;
    margin-bottom: 0.9rem;
    background:
        linear-gradient(145deg, rgba(249, 115, 22, 0.08), transparent 34%),
        var(--tw-premium-surface-strong, rgba(15, 23, 42, 0.94));
    border-color: var(--tw-premium-border, rgba(226, 232, 240, 0.13));
    box-shadow: var(--tw-premium-shadow-soft, 0 12px 28px rgba(0, 0, 0, 0.26));
}

.result-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--color-text);
}

.result-restaurant {
    color: var(--color-text-muted);
    line-height: 1.45;
}

.result-restaurant-name {
    font-weight: 700;
}

.result-restaurant-name span {
    display: inline-block;
    margin-left: 0.15rem;
    color: var(--color-text-soft);
    font-size: 0.7rem;
    font-weight: 500;
}

.tw-match {
    width: fit-content;
    max-width: 100%;
    margin-top: 0.5rem;
    padding: 0.42rem 0.5rem;
    border-radius: var(--tw-radius-sm, 10px);
    border: 1px solid rgba(34, 211, 238, 0.18);
    background: rgba(34, 211, 238, 0.07);
}

.tw-match-badge {
    min-height: 1.35rem;
    padding: 0.22rem 0.5rem;
}

.tw-match-reason {
    font-size: 0.78rem;
    color: var(--color-text);
}

.result-desc {
    margin-top: 0.65rem;
    font-size: 0.9rem;
    line-height: 1.55;
}

.result-meta-row {
    margin-top: 0.75rem;
    padding-top: 0.72rem;
    border-top: 1px solid var(--tw-premium-border, rgba(226, 232, 240, 0.13));
}

.result-price {
    font-weight: 700;
}

.badge-pill {
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.18);
    color: var(--color-text);
    letter-spacing: 0.04em;
}

.order-link {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0.25rem 0.68rem;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.22);
}

.result-card--section-divider {
    border-style: dashed;
    background: rgba(34, 211, 238, 0.08);
}

.results-empty-card {
    border-radius: var(--tw-radius-lg, 18px);
    border-style: solid;
    background: var(--tw-premium-surface-strong, rgba(15, 23, 42, 0.94));
}

#national-featured:empty {
    display: none;
}

@supports selector(:has(*)) {
    #national-featured:not(:has(*)) {
        display: none;
    }
}

@media (max-width: 768px) {
    .debug-header {
        gap: 0.8rem;
    }

    .debug-header h1 {
        font-size: 1.45rem;
    }

    .featured--national {
        max-width: none;
    }

    .taste-header-row {
        grid-template-columns: 1fr;
    }

    .taste-slot {
        grid-template-columns: minmax(2.2rem, auto) minmax(0, 1fr);
        gap: 0.45rem;
        padding-right: 3.75rem;
    }

    .taste-keyword {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .tw-panel {
        padding: 1rem;
        border-radius: 16px;
    }

    .filter-field,
    .filter-field--focus {
        padding: 0.78rem;
    }

    .debug-input,
    .debug-select,
    .btn-orange {
        min-height: 48px;
    }

    .result-card {
        padding: 1rem;
    }

    .taste-rail__intro {
        gap: 0.38rem;
        margin-bottom: 0.8rem;
    }

    .taste-rail__intro span {
        width: 100%;
        justify-content: flex-start;
    }

    #taste-row .taste-slot:nth-child(2) {
        margin-top: 1.45rem;
    }

    .search-actions--primary {
        margin-top: 0.55rem;
    }

    .search-actions--primary #continue-to-results {
        flex: 1 1 auto;
        width: 100%;
        min-height: 52px;
    }

    .result-card .result-title-row {
        padding-right: 3.35rem;
    }

    .result-meta-row {
        align-items: flex-start;
        gap: 0.65rem;
        flex-direction: column;
    }
}

/* =========================
   Phase 2A clarity helpers
   ========================= */
.tw-guidance-card,
.results-explainer,
.filter-section-intro {
    border: 1px solid var(--tw-premium-border, rgba(226, 232, 240, 0.13));
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.08), transparent 44%),
        var(--tw-premium-surface, rgba(15, 23, 42, 0.82));
    border-radius: var(--tw-radius-lg, 18px);
    box-shadow: var(--tw-premium-shadow-soft, 0 12px 28px rgba(0, 0, 0, 0.26));
}

.tw-guidance-card {
    margin: 0.85rem 0 1rem;
    padding: 0.95rem 1rem;
}

.tw-guidance-card--taste {
    margin: 0.7rem 0;
    padding: 0.78rem 0.85rem;
}

.tw-guidance-card__eyebrow,
.results-explainer__eyebrow,
.filter-section-intro span {
    display: block;
    margin: 0 0 0.32rem;
    color: var(--tw-accent-gold, #facc15);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.tw-guidance-card__eyebrow--secondary {
    margin-top: 0.8rem;
}

.tw-guidance-card__body,
.filter-field__hint,
.filter-section-intro p {
    margin: 0;
    color: var(--tw-helper-text, rgba(226, 232, 240, 0.78));
    font-size: 0.9rem;
    line-height: 1.5;
}

.tw-guidance-card__body + .tw-guidance-card__body {
    margin-top: 0.55rem;
}

.filter-field__hint {
    margin-top: 0.55rem;
    font-size: 0.82rem;
}

.filter-section-intro {
    grid-column: 1 / -1;
    padding: 0.9rem 1rem;
}

.results-explainer {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
}

.results-explainer__title {
    margin: 0 0 0.75rem;
    color: var(--color-text, #f8fafc);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.25;
    letter-spacing: 0;
}

.results-explainer__copy,
.results-explainer__note {
    margin: 0;
    color: var(--tw-helper-text, rgba(226, 232, 240, 0.78));
    font-size: 0.92rem;
    line-height: 1.5;
}

.results-explainer__note {
    margin-top: 0.4rem;
    color: var(--color-text, #f8fafc);
    font-weight: 700;
}

.results-explainer__list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding-left: 1.1rem;
    color: var(--tw-helper-text, rgba(226, 232, 240, 0.78));
    font-size: 0.92rem;
    line-height: 1.5;
}

[data-theme="light"] .tw-guidance-card,
[data-theme="light"] .results-explainer,
[data-theme="light"] .filter-section-intro {
    background:
        linear-gradient(135deg, rgba(217, 119, 6, 0.08), transparent 44%),
        #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

@media (max-width: 640px) {
    .tw-guidance-card,
    .results-explainer,
    .filter-section-intro {
        border-radius: 16px;
        padding: 0.85rem;
    }

    .results-explainer__list {
        padding-left: 1rem;
        font-size: 0.88rem;
    }
}

/* =========================
   Phase 2B results clarity
   ========================= */
.result-section-heading {
    margin: 0.95rem 0 0.7rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--tw-premium-border, rgba(226, 232, 240, 0.13));
    border-radius: var(--tw-radius-md, 14px);
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.1), transparent 48%),
        var(--tw-premium-surface, rgba(15, 23, 42, 0.82));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.result-section-heading--best {
    border-color: rgba(20, 184, 166, 0.24);
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.12), transparent 48%),
        var(--tw-premium-surface, rgba(15, 23, 42, 0.82));
}

.result-section-heading--close-alternative {
    border-color: rgba(245, 158, 11, 0.28);
    background:
        linear-gradient(135deg, rgba(245, 158, 11, 0.13), transparent 48%),
        var(--tw-premium-surface, rgba(15, 23, 42, 0.82));
}

.result-section-heading__label {
    margin: 0 0 0.28rem;
    color: var(--tw-accent-gold, #facc15);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.result-section-heading__body,
.result-section-heading__note {
    margin: 0;
    color: var(--tw-helper-text, rgba(226, 232, 240, 0.78));
    font-size: 0.9rem;
    line-height: 1.5;
}

.result-section-heading__note {
    margin-top: 0.48rem;
    color: var(--color-text, #f8fafc);
    font-weight: 700;
}

.result-card--best-match,
.result-card--strong {
    border-left: 3px solid rgba(20, 184, 166, 0.7);
}

.result-card--close {
    border-left: 3px solid rgba(59, 130, 246, 0.62);
}

.result-card--similar,
.result-card--broad,
.result-card--close-alternative {
    border-left: 3px solid rgba(245, 158, 11, 0.72);
}

.result-card .result-title-row > div:first-child {
    min-width: 0;
}

.result-card .result-title {
    overflow-wrap: anywhere;
}

.result-card .tw-match {
    display: block;
    width: 100%;
    max-width: min(100%, 720px);
    margin-top: 0.68rem;
    padding: 0.72rem 0.78rem;
    border-color: rgba(34, 211, 238, 0.22);
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.11), transparent 58%),
        rgba(15, 23, 42, 0.42);
}

.tw-match__top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.38rem;
}

.tw-match__heading {
    color: var(--color-text-soft, rgba(226, 232, 240, 0.66));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.tw-match-reason {
    display: block;
    color: var(--color-text, #f8fafc);
    font-size: 0.88rem;
    line-height: 1.48;
}

.result-restaurant-name {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.34rem;
}

.result-restaurant-name span {
    margin-left: 0;
    padding: 0.12rem 0.45rem;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 999px;
    color: var(--color-text, #f8fafc);
    background: rgba(34, 211, 238, 0.08);
    font-size: 0.68rem;
    font-weight: 700;
}

.result-meta-row {
    gap: 0.75rem;
}

.result-meta-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    min-width: 0;
}

.result-card-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}

.result-card .result-item-order {
    display: flex;
    margin-top: 0;
}

.result-card .order-link {
    min-height: 38px;
    justify-content: center;
    padding: 0.38rem 0.82rem;
    color: var(--color-text, #f8fafc);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.result-card .order-link--secondary {
    border-color: rgba(34, 211, 238, 0.28);
    background: rgba(34, 211, 238, 0.08);
}

[data-theme="light"] .result-section-heading {
    background:
        linear-gradient(135deg, rgba(217, 119, 6, 0.08), transparent 48%),
        #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .result-section-heading--best {
    border-color: rgba(13, 148, 136, 0.24);
}

[data-theme="light"] .result-section-heading--close-alternative {
    border-color: rgba(217, 119, 6, 0.26);
}

[data-theme="light"] .result-section-heading__body {
    color: #475569;
}

[data-theme="light"] .result-section-heading__note,
[data-theme="light"] .tw-match-reason {
    color: #0f172a;
}

[data-theme="light"] .result-card .tw-match {
    border-color: rgba(3, 105, 161, 0.18);
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.08), transparent 58%),
        rgba(248, 250, 252, 0.94);
}

[data-theme="light"] .tw-match__heading {
    color: #64748b;
}

[data-theme="light"] .result-restaurant-name span {
    border-color: rgba(3, 105, 161, 0.18);
    background: rgba(14, 165, 233, 0.08);
    color: #0f172a;
}

@media (max-width: 640px) {
    .result-section-heading {
        margin-top: 0.8rem;
        padding: 0.82rem;
        border-radius: 14px;
    }

    .result-section-heading__body,
    .result-section-heading__note {
        font-size: 0.86rem;
    }

    .result-card .result-title-row {
        padding-right: 0;
    }

    .result-card .result-title {
        padding-right: 2.7rem;
        font-size: 1.04rem;
        line-height: 1.28;
    }

    .result-card .tw-match {
        padding: 0.68rem;
    }

    .tw-match__top {
        align-items: flex-start;
        gap: 0.38rem;
    }

    .tw-match-reason {
        font-size: 0.84rem;
    }

    .result-restaurant {
        width: 100%;
    }

    .result-restaurant-name {
        justify-content: flex-start;
    }

    .result-meta-main,
    .result-card-actions {
        width: 100%;
    }

    .result-card-actions {
        justify-content: flex-start;
    }

    .result-card .order-link {
        width: 100%;
        min-height: 44px;
    }
}

/* =====================================================
   Phase 1 mobile-first cleanup: shared search/discover
   ===================================================== */
#app-shell,
#step-container,
.filters-group,
.filters-grid,
.filter-field,
.filter-actions,
.taste-rail,
.results-shell,
.result-card {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 768px) {
    .debug-header {
        flex-direction: column;
        align-items: stretch;
    }

    .debug-header h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .featured--national {
        width: 100%;
    }

    .filters-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #food-type-wrap,
    #drink-type-wrap,
    .filters-grid > .filter-field,
    .filters-grid > .filter-actions {
        grid-column: auto;
    }

    .filter-actions,
    .restaurant-actions-row {
        width: 100%;
    }

    .search-actions {
        align-items: stretch;
    }

    .search-actions .btn-orange,
    .search-actions a.btn-orange {
        width: 100%;
        min-width: 0;
        white-space: normal;
        text-align: center;
    }

    .taste-inspo__chips {
        align-items: stretch;
    }

    .taste-chip {
        flex: 1 1 min(100%, 11rem);
        justify-content: center;
        min-width: 0;
        text-align: center;
        white-space: normal;
    }

    .result-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .result-restaurant {
        width: 100%;
        text-align: left;
    }

    .result-meta-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .result-meta-main,
    .result-card-actions,
    .result-card .result-item-order,
    .result-card .order-link {
        width: 100%;
    }

    .result-card .order-link {
        min-height: 44px;
    }
}