/* ============================================================================
   section-polish.css — §4 DESIGN OVERHAUL (polish layer, non-destructive)
   ----------------------------------------------------------------------------
   Loads LAST (after style / design-tokens / premium-ui / theme-light.v2 /
   premium / enhancements). This file is ADDITIVE: it refines the existing live
   look — component consistency, hierarchy, per-section identity, empty states,
   responsiveness, RTL, motion — and never rebuilds the aesthetic. The 3D /
   premium / luxury look already shipping stays exactly as-is.

   It builds ON TOP of §1's token consolidation (design-tokens.css):
     --brand / --brand-strong ...  the primary violet brand
     --accent-gold                 the real luxury gold accent
     --section-accent*             per-section identity hue

   KEY MECHANIC — one accent variable, three behaviours:
     * On generic public pages, --section-accent === --brand (violet). So every
       accent-driven rule below reads as brand violet — i.e. NO visual change.
     * On the partner layout, §1 sets --section-accent per venue section on
       `.partner-layout` (bar→cyan, restaurant→rose, trips→amber …), so the same
       rules render in-section automatically.
     * On public section landing pages, landing.php sets --section-accent +
       [data-section] on `.landing-page`, giving /bars, /beach-clubs,
       /restaurants-cafes, /tourism-trips their own colour identity (§4.4).
   Because the default equals the brand, adopting var(--section-accent) is a
   zero-regression way to add identity where it's wanted.
   ============================================================================ */

/* ===========================================================================
   1. MOTION + ACCESSIBILITY FOUNDATION
   =========================================================================== */

/* 1a. Global reduced-motion guard (§4.7). style.css predates the newer
   guards; this net catches every animation/transition site-wide for users who
   ask for less motion, without us having to touch each keyframe individually. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* 1b. Consistent keyboard focus ring (a11y polish). The admin panel already
   ships its own focus-visible treatment (admin.css); the public + partner
   surfaces did not. Give them one, tinted by the active section accent so the
   ring belongs to whatever section you're in. Mouse users never see it —
   :focus-visible only fires for keyboard/AT navigation. */
body:not(.admin-body) a:focus-visible,
body:not(.admin-body) button:focus-visible,
body:not(.admin-body) [role="button"]:focus-visible,
body:not(.admin-body) input:focus-visible,
body:not(.admin-body) select:focus-visible,
body:not(.admin-body) textarea:focus-visible,
body:not(.admin-body) summary:focus-visible,
body:not(.admin-body) [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--section-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 6px);
}
/* Kill the legacy inner glow only where our clean ring already shows, so we
   don't stack two focus indicators on the same element. */
body:not(.admin-body) a:focus-visible,
body:not(.admin-body) button:focus-visible {
    box-shadow: none;
}

/* ===========================================================================
   2. PER-SECTION IDENTITY — shared utilities
   Accent-driven helpers any view can opt into. All read var(--section-accent),
   so they're violet on generic pages and section-tinted on partner/landing.
   =========================================================================== */

/* 2a. Section eyebrow — a small, uppercase, accent kicker above a heading.
   Gives section pages a recognisable "voice" line without new copy. */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--section-accent);
    margin-bottom: 10px;
}
.section-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--section-accent);
    opacity: 0.9;
}

/* 2b. Section chip — a compact accent pill (status / category marker). */
.sec-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--section-accent);
    background: var(--section-accent-weak);
    border: 1px solid var(--section-accent-line);
}
.sec-chip i { font-size: 0.8em; }

/* 2c. Section-scoped selection + scrollbar — small touches that make a themed
   surface feel coherent end-to-end. Scoped so the global (violet) selection is
   untouched elsewhere. */
.partner-layout ::selection,
.landing-page ::selection {
    background: var(--section-accent);
    color: #fff;
}
.partner-layout ::-webkit-scrollbar-thumb,
.landing-page ::-webkit-scrollbar-thumb {
    background: var(--section-accent-line);
}
.partner-layout ::-webkit-scrollbar-thumb:hover,
.landing-page ::-webkit-scrollbar-thumb:hover {
    background: var(--section-accent);
}

/* ===========================================================================
   3. PUBLIC SECTION LANDING IDENTITY (§4.4)
   landing.php sets --section-accent + [data-section] on .landing-page. These
   rules give each public section a distinct accent treatment while keeping the
   exact hero photograph, layout and dark gradient that ship today.
   =========================================================================== */

/* 3a. A soft accent aura behind the hero content — reads as brand violet on
   city pages, section hue on category pages. Subtle; the photo still leads. */
.landing-page .landing-hero-content {
    position: relative;
}
.landing-page .landing-hero-content::before {
    content: '';
    position: absolute;
    inset: -10% -6%;
    z-index: -1;
    background: radial-gradient(60% 60% at 50% 40%,
        var(--section-accent-glow), transparent 70%);
    opacity: 0.55;
    pointer-events: none;
}

/* 3b. Accent the hero eyebrow / kicker and the section heading underline. */
.landing-page .section-eyebrow { color: var(--section-accent); }

.landing-page .landing-events-section h2 {
    position: relative;
    display: inline-block;
}
.landing-page .landing-events-section h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--section-accent), transparent);
}
[dir="rtl"] .landing-page .landing-events-section h2::after {
    left: auto;
    right: 0;
    background: linear-gradient(270deg, var(--section-accent), transparent);
}

/* 3c. Primary CTA in the landing hero picks up the section hue so /bars feels
   cyan and /restaurants-cafes feels rose, without redefining the button. */
.landing-page .landing-cta-row .btn-glow,
.landing-page .landing-cta-row .cta-btn-primary {
    background-image: linear-gradient(135deg,
        var(--section-accent),
        color-mix(in srgb, var(--section-accent) 78%, #000));
    border-color: var(--section-accent);
    box-shadow: 0 8px 26px var(--section-accent-glow);
}
.landing-page .landing-cta-row .btn-glow:hover,
.landing-page .landing-cta-row .cta-btn-primary:hover {
    box-shadow: 0 10px 34px var(--section-accent-glow),
                0 0 0 1px var(--section-accent-line);
    transform: translateY(-2px);
}

/* 3d. The hero "Available Now" badge + pulse dot adopt the section hue, so the
   very first element you see differs by section (cyan on /bars, rose on
   /restaurants, amber on /tourism) — an immediate, unmistakable marker. On
   plain city pages --section-accent === --brand, so they read violet. */
.landing-page .hero-live-badge {
    background: var(--section-accent-weak);
    border-color: var(--section-accent-line);
    color: var(--section-accent);
}
.landing-page .live-pulse-dot {
    background-color: var(--section-accent);
    box-shadow: 0 0 8px var(--section-accent);
}

/* ===========================================================================
   4. COMPONENT POLISH — buttons
   Surgical enhancements only: we override the timing-function and add press +
   focus feedback, never the colour/shape, so the 4 existing button systems
   feel consistent without being rebuilt.
   =========================================================================== */
.btn-glow,
.btn-solid,
.btn-outline,
.cta-btn-primary,
.p-btn,
.p-btn-sm,
button.btn,
a.btn {
    transition-timing-function: var(--ease-out);
    will-change: transform;
}
/* Tactile press — a tiny settle on click reads as responsiveness. */
.btn-glow:active,
.btn-solid:active,
.btn-outline:active,
.cta-btn-primary:active,
.p-btn:active,
.p-btn-sm:active,
button.btn:active,
a.btn:active {
    transform: translateY(1px) scale(0.988);
}
/* Disabled buttons should read as disabled everywhere. */
.btn-glow[disabled], .btn-solid[disabled], .cta-btn-primary[disabled],
.p-btn[disabled], button.btn[disabled], button.btn:disabled,
.p-btn.is-loading {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(0.15);
}

/* ===========================================================================
   5. COMPONENT POLISH — cards
   Match hover elevation on keyboard focus (focus-within) and unify easing, so
   cards respond identically to mouse and keyboard. Values mirror existing
   hover states; nothing new visually for mouse users.
   =========================================================================== */
.event-card,
.p-card,
.p-stat-card,
.glass-card {
    transition-timing-function: var(--ease-out);
}
.event-card:focus-within,
.glass-card:focus-within {
    transform: translateY(-4px);
    border-color: var(--section-accent-line);
}
.p-card:focus-within,
.p-stat-card:focus-within {
    border-color: var(--section-accent-line);
    box-shadow: 0 15px 30px var(--section-accent-weak);
}
/* Event-card meta icons follow the section accent (violet by default). */
.partner-layout .event-card-meta i,
.landing-page .event-card-meta i {
    color: var(--section-accent);
}

/* ===========================================================================
   6. COMPONENT POLISH — accent badge + form focus consistency
   =========================================================================== */
/* An accent-driven badge variant that tracks the section (the existing
   .badge-info is hardcoded violet; this one themes per section). */
.badge-section {
    background: var(--section-accent-weak);
    color: var(--section-accent);
    border: 1px solid var(--section-accent-line);
}

/* Public form controls gain the same accent focus ring the partner controls
   already have (§1), so focus feels the same on both sides of the app. */
body:not(.admin-body) input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.admin-body) select:focus,
body:not(.admin-body) textarea:focus {
    outline: none;
    border-color: var(--section-accent);
    box-shadow: 0 0 0 3px var(--section-accent-weak);
}

/* ===========================================================================
   7. EMPTY STATES — harmonize the 4 forks (§4.5)
   We don't delete .no-results / .ec-empty / .empty-state; we give them ONE set
   of shared manners: centred, comfortable max width, calm floating icon, and a
   CTA that follows the section accent. Colour handling from premium.css /
   enhancements.css is left intact.
   =========================================================================== */
.empty-state,
.no-results > div,
.ec-empty {
    max-width: 460px;
    margin-inline: auto;
    text-align: center;
}
/* Section-accent the empty-state CTA + icon (violet on public, section hue on
   partner). Only touches colour of the call-to-action, not the copy. */
.partner-layout .empty-state .empty-state-icon,
.partner-layout .empty-state > i,
.partner-layout .no-results > div > i {
    color: var(--section-accent);
}
.empty-state .empty-state-cta:not([class*="btn"]) {
    background: var(--section-accent);
    border-color: var(--section-accent);
    box-shadow: 0 8px 24px var(--section-accent-glow);
}
.empty-state .empty-state-cta:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* ===========================================================================
   8. TYPOGRAPHY & HIERARCHY RHYTHM
   Small, safe global refinements that tighten hierarchy without restyling.
   =========================================================================== */
/* Balanced, non-orphaned headings where supported. */
h1, h2, h3,
.section-title,
.landing-hero-content h1 {
    text-wrap: balance;
}
/* Long body copy reads better with pretty wrapping (progressive enhancement). */
p, .section-subtitle, .lead {
    text-wrap: pretty;
}
/* Media never overflows its container (defensive; helps mobile + RTL). */
img, svg, video, canvas {
    max-width: 100%;
}

/* ===========================================================================
   9. RESPONSIVE REFINEMENTS — standardized breakpoints 480 / 768 / 1024 (§4.7)
   Additive touch-target + spacing fixes for the key public components. We do
   not restructure any grid; we just make small screens comfortable.
   =========================================================================== */
@media (max-width: 768px) {
    /* Comfortable hero padding on tablets/phones. */
    .landing-page .landing-hero-content { padding-inline: 20px; }
    /* Section heading underline sits a touch closer on small screens. */
    .landing-page .landing-events-section h2::after { bottom: -8px; }
}
@media (max-width: 480px) {
    /* WCAG-friendly tap targets: primary actions ≥ 44px tall on phones. */
    .btn-glow,
    .btn-solid,
    .cta-btn-primary,
    .p-btn,
    a.btn,
    button.btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Full-bleed CTAs in the landing hero on the smallest screens. */
    .landing-page .landing-cta-row { flex-wrap: wrap; }
    .landing-page .landing-cta-row .btn-glow,
    .landing-page .landing-cta-row .cta-btn-primary { width: 100%; }
    /* Section eyebrow a hair smaller so it never wraps awkwardly. */
    .section-eyebrow { font-size: 0.66rem; letter-spacing: 0.12em; }
}

/* ===========================================================================
   10. RTL POLISH (§4.7)
   style.css predates logical properties; mirror the known physical-offset
   offenders so Arabic layouts read correctly. Additive [dir=rtl] overrides —
   the LTR rules are untouched.
   =========================================================================== */
[dir="rtl"] .hero-mute-btn {
    right: auto;
    left: 40px;
}
[dir="rtl"] .reel-actions-sidebar {
    right: auto;
    left: 16px;
}
[dir="rtl"] .nav-pill-menu a.active::after {
    left: auto;
    right: 15%;
}
[dir="rtl"] .mock-ticket-details {
    text-align: right;
}
/* Generic helper: any element opting into logical mirroring. */
[dir="rtl"] .rtl-mirror {
    transform: scaleX(-1);
}

/* ===========================================================================
   11. §IDENTITY — SECTION-CONSISTENT EVENT CARDS (cross-page)
   ---------------------------------------------------------------------------
   Any event card that declares its section wears its section's colour +
   icon, so a card looks the SAME whether it's on the home grid, a /search
   result, a section landing page or the "similar events" rail. The card only
   sets one inline var: style="--section-accent:<hex>". All the alpha tints are
   derived here with color-mix(), so the markup stays a single attribute and
   every surface stays in lock-step. On plain violet (disco/club) the accent IS
   the brand, so those cards look exactly as they do today (zero regression).
   =========================================================================== */
.event-card[data-section] {
    transition: transform var(--dur-base, 240ms) var(--ease-out, ease),
                border-color var(--dur-base, 240ms) var(--ease-out, ease),
                box-shadow var(--dur-base, 240ms) var(--ease-out, ease);
}
/* The category badge becomes the section's signature chip (tint + section icon
   supplied by the view). Kept legible with a dark scrim behind the hue. */
.event-card[data-section] .event-category-badge,
.event-card[data-section] .category-badge {
    background: color-mix(in srgb, var(--section-accent) 32%, rgba(0,0,0,0.55));
    border: 1px solid color-mix(in srgb, var(--section-accent) 60%, transparent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.event-card[data-section] .event-category-badge i,
.event-card[data-section] .category-badge i { font-size: 0.85em; color: #fff; }
/* Hover/focus lifts the card with an accent-tinted edge + glow (mouse & kbd). */
.event-card[data-section]:hover,
.event-card[data-section]:focus-visible,
.event-card[data-section]:focus-within {
    border-color: color-mix(in srgb, var(--section-accent) 45%, transparent);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--section-accent) 22%, transparent);
}
/* The "Book →" affordance + the date-badge month adopt the accent. */
.event-card[data-section] .event-btn-go,
.event-card[data-section] .edb-month { color: var(--section-accent); }

/* ===========================================================================
   12. §IDENTITY — HOMEPAGE "CHOOSE YOUR VIBE" TILES
   Each category tile is tinted by its OWN real accent (set inline as
   --section-accent), so the homepage previews every section's colour exactly
   as its landing page + cards render it. Additive: colour + hover only.
   =========================================================================== */
.category-card[data-section] {
    transition: transform var(--dur-base, 240ms) var(--ease-out, ease),
                border-color var(--dur-base, 240ms) var(--ease-out, ease),
                box-shadow var(--dur-base, 240ms) var(--ease-out, ease);
}
.category-card[data-section] .category-icon-3d {
    color: var(--section-accent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--section-accent) 26%, transparent),
        color-mix(in srgb, var(--section-accent) 8%, transparent));
    border-color: color-mix(in srgb, var(--section-accent) 34%, transparent);
}
.category-card[data-section]:hover {
    border-color: color-mix(in srgb, var(--section-accent) 45%, transparent);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--section-accent) 20%, transparent);
}
.category-card[data-section] .cat-explore { color: var(--section-accent); }

/* ===========================================================================
   13. §IDENTITY — HOMEPAGE "EXPLORE BY SECTION" band + shared feature helpers
   The section band (home.php) and other new homepage modules read these shared
   day/night-safe tokens. Kept here so night/day parity lives in one place.
   =========================================================================== */
.yt-band { padding: 56px 24px; }
.yt-band-inner { max-width: 1200px; margin: 0 auto; }
.yt-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-full, 999px);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-primary, #f5f5f5);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
.yt-trust-chip i { color: var(--brand, #7c3aed); }
html:not(.night) .yt-trust-chip {
    color: #1c1c2e;
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
}

/* ===========================================================================
   14. §PREMIUM CREATIVE PASS — bespoke per-section signatures, cinematic card
   polish, glass + soft-shadow language. All motion is transform/opacity only
   and inherits the global prefers-reduced-motion guard (§1a), so it never
   costs layout/scroll perf. Everything reads var(--section-accent), so each
   section expresses the SAME motif in its OWN hue automatically.
   =========================================================================== */

/* 14.1 — SECTION LANDING: a living accent aura + a faint section motif behind
   the hero content. The hero photo + dark scrim still lead; this only adds a
   premium tinted depth that unmistakably belongs to the section. */
.landing-page .landing-hero { isolation: isolate; }
.landing-page .landing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(42% 55% at 18% 22%, color-mix(in srgb, var(--section-accent) 30%, transparent) 0%, transparent 60%),
        radial-gradient(48% 60% at 84% 78%, color-mix(in srgb, var(--section-accent) 22%, transparent) 0%, transparent 62%);
    background-size: 160% 160%;
    animation: sigAuraDrift 22s ease-in-out infinite;
    mix-blend-mode: screen;
    opacity: 0.9;
}
/* A whisper-fine section texture (dots) tinted by the accent — adds craft. */
.landing-page .landing-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(color-mix(in srgb, var(--section-accent) 55%, transparent) 0.9px, transparent 0.9px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 70%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 70%);
}
.landing-page .landing-hero-content { z-index: 2; }
@keyframes sigAuraDrift {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* 14.2 — Per-vertical MOTIF: one extra flavour per product group so nightlife,
   tourism and dining don't feel identical-with-a-hue-swap. Subtle overlays,
   all still accent-tinted. */
/* Nightlife → vertical neon light streaks. */
.landing-page[data-section="nightlife"] .landing-hero::after {
    background-image:
        radial-gradient(color-mix(in srgb, var(--section-accent) 55%, transparent) 0.9px, transparent 0.9px),
        repeating-linear-gradient(90deg,
            transparent 0 46px,
            color-mix(in srgb, var(--section-accent) 26%, transparent) 46px 47px,
            transparent 47px 94px);
    background-size: 22px 22px, auto;
}
/* Tourism → soft diagonal sun-rays sweeping from a corner. */
.landing-page[data-section="tourism"] .landing-hero::after {
    background-image:
        radial-gradient(color-mix(in srgb, var(--section-accent) 50%, transparent) 0.9px, transparent 0.9px),
        repeating-linear-gradient(125deg,
            transparent 0 60px,
            color-mix(in srgb, var(--section-accent) 16%, transparent) 60px 62px,
            transparent 62px 130px);
    background-size: 24px 24px, auto;
}
/* Dining → a warm centred bloom instead of a pattern. */
.landing-page[data-section="restaurant"] .landing-hero::after {
    background-image:
        radial-gradient(color-mix(in srgb, var(--section-accent) 50%, transparent) 0.9px, transparent 0.9px),
        radial-gradient(60% 80% at 50% 30%, color-mix(in srgb, var(--section-accent) 20%, transparent), transparent 70%);
    background-size: 26px 26px, auto;
}

/* 14.3 — The section emblem gains a slow, premium breathing halo. */
.landing-section-emblem { position: relative; }
.landing-section-emblem::after {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: inherit;
    background: radial-gradient(circle, var(--section-accent-glow, rgba(124,58,237,0.25)), transparent 70%);
    z-index: -1;
    animation: emblemHalo 3.6s ease-in-out infinite;
}
@keyframes emblemHalo {
    0%, 100% { transform: scale(0.92); opacity: 0.55; }
    50%      { transform: scale(1.12); opacity: 0.95; }
}

/* 14.4 — CINEMATIC EVENT CARDS. A precise accent hairline that draws in on the
   image top, plus an accent sheen that sweeps once on hover. Uses spring easing
   and never touches the card's own transform (so any existing 3-D tilt stays). */
.event-card[data-section] .event-img-wrap,
.event-card[data-section] > a[style*="height:200px"] { position: relative; }
.event-card[data-section] .event-img-wrap::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    transform: scaleX(0);
    transform-origin: var(--_o, left);
    background: linear-gradient(90deg, var(--section-accent), transparent);
    transition: transform var(--dur-base, 240ms) var(--ease-spring, ease);
    z-index: 3;
}
[dir="rtl"] .event-card[data-section] .event-img-wrap::after { --_o: right; }
.event-card[data-section]:hover .event-img-wrap::after,
.event-card[data-section]:focus-within .event-img-wrap::after { transform: scaleX(1); }
/* One-shot accent sheen across the poster on hover. */
.event-card[data-section] .event-img-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--section-accent) 22%, rgba(255,255,255,0.10)) 48%, transparent 62%);
    transform: translateX(-120%);
    opacity: 0;
    transition: none;
}
.event-card[data-section]:hover .event-img-wrap::before {
    opacity: 1;
    transform: translateX(120%);
    transition: transform 0.75s var(--ease-out, ease), opacity 0.2s ease;
}

/* 14.5 — PREMIUM CHIP / GLASS language: a hairline top highlight + soft depth,
   applied to the section & trust chips we introduced. */
.yt-trust-chip, .home-city-chip, .footer-sec-chip, .sec-chip {
    position: relative;
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 6px 18px rgba(0,0,0,0.14);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    transition: transform var(--dur-fast, 140ms) var(--ease-spring, ease),
                background var(--dur-fast, 140ms) ease,
                border-color var(--dur-fast, 140ms) ease,
                box-shadow var(--dur-fast, 140ms) ease;
}
.yt-trust-chip:hover, .home-city-chip:hover, .footer-sec-chip:hover {
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 10px 26px rgba(0,0,0,0.20);
}
html:not(.night) .yt-trust-chip,
html:not(.night) .home-city-chip,
html:not(.night) .footer-sec-chip { box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 16px rgba(0,0,0,0.06); }

/* 14.6 — Soft, tactile press for pressable primitives (works with [data-press]). */
[data-press] { transition: transform var(--dur-fast, 140ms) var(--ease-spring, ease); will-change: transform; }
[data-press]:active { transform: scale(0.96); }