/* theme_bridge.css — 2026-10-17. Maps the LIVE environment markup (nav, artist-page chrome, home genre pills, claim form) onto the
   theme.css tokens (--ai-*), so the existing pages follow light (steel grey) / dark (warm black) without re-templating.
   Environment only: no selector here matches .card, .card-wrap, .ac-* or anything inside them. Loaded after theme.css. */
/* nav (site_polish shared nav) */
html[data-theme] .dream-nav{background:var(--ai-hdr);border-bottom-color:var(--ai-line)}
html[data-theme] .dream-nav .dn-logo .a{color:var(--ai-gold)}
html[data-theme] .dream-nav .dn-logo .i{color:var(--ai-text)}
html[data-theme] .dream-nav .dn-tag{color:var(--ai-text-3)}
html[data-theme] .dream-nav a.dn-link{color:var(--ai-i-rest);background:transparent}
html[data-theme] .dream-nav a.dn-link:hover{color:var(--ai-i-hover-tx);background:rgba(var(--ai-i-neutral-rgb),.06)}
html[data-theme] .dream-nav a.dn-link.active,html[data-theme] .dream-nav a.dn-link:active{color:var(--ai-gold);background:rgba(var(--ai-gold-rgb),.12)}
html[data-theme] .dream-nav .dn-search input{background:var(--ai-i-field);color:var(--ai-text);border-color:rgba(var(--ai-gold-rgb),var(--ai-b-rest))}
html[data-theme] .dream-nav .dn-search input:hover{border-color:rgba(var(--ai-gold-rgb),var(--ai-b-hover))}
html[data-theme] .dream-nav .dn-search input::placeholder{color:var(--ai-i-placeholder)}
html[data-theme] .dream-nav :is(.theme-btn,.fs-btn){color:var(--ai-i-rest);background:transparent;border-color:var(--ai-line-2)}
html[data-theme] .dream-nav :is(.theme-btn,.fs-btn):hover{color:var(--ai-i-hover-tx);background:rgba(var(--ai-i-neutral-rgb),.06)}
html[data-theme] .dream-nav .dn-burger{border-color:var(--ai-line-2)}
html[data-theme] .dream-nav .dn-burger span{background:var(--ai-text)}
html[data-theme] .dream-nav :is(a,button,input):focus-visible{outline:2px solid var(--ai-gold);outline-offset:2px}
/* artist pages: chrome AROUND the card (arrows + labels, bottom branding, counter, heart) keeps its minimal design, tones follow the mode */
html[data-theme] body.ai-area-artist .swipe-hint{background:rgba(var(--ai-i-neutral-rgb),.04);border-color:rgba(var(--ai-gold-rgb),.24);color:var(--ai-i-rest)}
html[data-theme] body.ai-area-artist .swipe-hint::after{color:var(--ai-text-3)}
html[data-theme] body.ai-area-artist .swipe-hint:is(:hover,:focus-visible){color:var(--ai-i-hover-tx);border-color:rgba(var(--ai-gold-rgb),.6);background:rgba(var(--ai-gold-rgb),.08)}
html[data-theme] body.ai-area-artist .swipe-hint:is(:hover,:focus-visible)::after{color:var(--ai-text-2)}
html[data-theme] body.ai-area-artist .swipe-hint:focus-visible{outline:2px solid var(--ai-gold)}
html[data-theme] body.ai-area-artist :is(.nav-home,.nav-counter,.nav-fav){background:rgba(var(--ai-i-neutral-rgb),.04);border-color:var(--ai-line)}
html[data-theme] body.ai-area-artist :is(.nav-home,.nav-fav):hover{background:rgba(var(--ai-i-neutral-rgb),.08)}
html[data-theme] body.ai-area-artist .nav-home{color:var(--ai-text)}
html[data-theme] body.ai-area-artist .nav-home .ai-art{color:var(--ai-gold)}
html[data-theme] body.ai-area-artist .nav-home .ai-intel{color:var(--ai-text)}
html[data-theme] body.ai-area-artist .nav-counter{color:var(--ai-text-2)}
html[data-theme] body.ai-area-artist .nav-fav{color:var(--ai-text)}
/* hearts-20261017: gold active state replaced by the heart block at the end of this file */
html[data-theme] body.ai-area-artist :is(.nav-home,.nav-fav):focus-visible{outline:2px solid var(--ai-gold);outline-offset:2px}
/* home genre pills = filter chips (tide accent) */
html[data-theme] .pills-row-wrap{background:transparent}
html[data-theme] .gp{color:var(--ai-i-rest);background:transparent;border-color:rgba(var(--ai-tide-rgb),.38)}
html[data-theme] .gp:hover{color:var(--ai-tide);background:rgba(var(--ai-tide-rgb),var(--ai-a-hover));border-color:rgba(var(--ai-tide-rgb),.6)}
html[data-theme] .gp.active{color:var(--ai-tide);background:rgba(var(--ai-tide-rgb),.12);border-color:rgba(var(--ai-tide-rgb),.72)}
html[data-theme] .gp:focus-visible{outline:2px solid var(--ai-tide);outline-offset:2px}
/* claim form (/claim.html) */
html[data-theme] body.ai-claim-page a{color:var(--ai-gold)}
html[data-theme] body.ai-claim-page :is(.lede,.hint){color:var(--ai-text-2)}
html[data-theme] body.ai-claim-page :is(label,.lab,legend){color:var(--ai-gold)}
html[data-theme] body.ai-claim-page .chk{color:var(--ai-text)}
html[data-theme] body.ai-claim-page fieldset{border-color:var(--ai-line-2)}
html[data-theme] body.ai-claim-page :is(input:not([type=checkbox]):not([type=radio]),textarea,select){background:var(--ai-i-field);color:var(--ai-text);border-color:rgba(var(--ai-gold-rgb),var(--ai-b-rest))}
html[data-theme] body.ai-claim-page :is(input,textarea,select):hover{border-color:rgba(var(--ai-gold-rgb),var(--ai-b-hover))}
html[data-theme] body.ai-claim-page :is(input,textarea,select)::placeholder{color:var(--ai-i-placeholder)}
html[data-theme] body.ai-claim-page :is(input,textarea,select,button,a):focus-visible{outline:2px solid var(--ai-gold);outline-offset:2px}
html[data-theme] body.ai-claim-page button{background:var(--ai-gold);color:var(--ai-bg)}
html[data-theme] body.ai-claim-page button:hover{filter:brightness(1.06)}
html[data-theme] body.ai-claim-page button:active{filter:brightness(.94)}
html[data-theme] body.ai-claim-page .ok{color:var(--ai-sage)}
html[data-theme] body.ai-claim-page .err{color:var(--ai-rose)}
html[data-theme] body.ai-area-artist .bottom-nav{background:var(--ai-hdr);border-top-color:var(--ai-line)}

/* ---------- hearts-20261017 (Mark 14:36): favourite heart, unmistakable selected state, light + dark ----------
   One heart everywhere: artist page #favBtn (.nav-fav), deck tiles (.dk-save) and My Collection (.col-heart).
   Markup is an inline <svg class="ai-heart"> so stroke/fill are controlled exactly (the old ♥ glyph only changed colour).
   Off  = outline only, 1.5px stroke (non-scaling), --ai-text at 65% opacity  (>=4.6:1 light, >=7:1 dark on page bg).
   On   = solid crimson fill + slightly brighter stroke, full opacity, soft glow + 1.5px ring on the button.
   State is aria-pressed (kept in sync with .active/.on by the page JS). Pop on toggle; none under reduced motion. */
:root,html[data-theme="light"]{--ai-heart-fill:#D81B55;--ai-heart-stroke:#EE2A64;--ai-heart-glow:rgba(216,27,85,.30);--ai-heart-ring:rgba(216,27,85,.55);--ai-heart-tint:rgba(216,27,85,.10);--ai-heart-chip:rgba(255,252,250,.94)}
html[data-theme="dark"]{--ai-heart-fill:#E0245E;--ai-heart-stroke:#FF5C8A;--ai-heart-glow:rgba(255,72,120,.42);--ai-heart-ring:rgba(255,92,138,.60);--ai-heart-tint:rgba(224,36,94,.16);--ai-heart-chip:rgba(255,250,247,.94)}
.ai-heart{display:block;width:18px;height:18px;flex:0 0 auto;overflow:visible;fill:transparent;stroke:currentColor;stroke-width:1.5;
 stroke-linejoin:round;opacity:.65;transition:fill .15s ease,stroke .15s ease,opacity .15s ease,filter .15s ease}
.ai-heart path{vector-effect:non-scaling-stroke}
.ai-heart-inline{display:inline-block;vertical-align:-3px;width:15px;height:15px;opacity:.8}
:is(.nav-fav,.dk-save,.col-heart)[aria-pressed="true"] .ai-heart{fill:var(--ai-heart-fill);stroke:var(--ai-heart-stroke);opacity:1;
 filter:drop-shadow(0 0 3px var(--ai-heart-glow))}

/* artist page (bottom nav) */
html[data-theme] .nav-fav{color:var(--ai-text);font-size:0;line-height:0}
html[data-theme] body .nav-fav[aria-pressed="true"],html[data-theme] body.ai-area-artist .nav-fav[aria-pressed="true"]{background:var(--ai-heart-tint);border-color:var(--ai-heart-ring);color:var(--ai-text);
 box-shadow:0 0 0 1px var(--ai-heart-ring),0 0 10px var(--ai-heart-glow)}
html[data-theme] .nav-fav:focus-visible{outline:2px solid var(--ai-gold);outline-offset:2px}

/* deck tiles: the heart sits on a chip over the art; the chip carries the contrast on busy art */
html[data-theme] .dk-save{background:rgba(8,14,24,.74);color:#f2f4f7;border-color:rgba(255,255,255,.22)}
html[data-theme] .dk-save .ai-heart{width:16px;height:16px;opacity:.7}
html[data-theme] .dk-save:hover{background:rgba(8,14,24,.86)}
html[data-theme] .dk-save[aria-pressed="true"],html[data-theme] .dk-save.on{background:var(--ai-heart-chip);border-color:var(--ai-heart-fill);color:var(--ai-heart-fill);
 box-shadow:0 0 0 1.5px var(--ai-heart-ring),0 0 12px var(--ai-heart-glow)}
html[data-theme] .dk-save[aria-pressed="true"] .ai-heart{opacity:1}
html[data-theme] .dk-save:focus-visible{outline:2px solid #f2f4f7;outline-offset:2px}
/* light mode: the page is light, so the resting chip is ivory with dark ink (>=3:1 vs page, chip and art underneath) */
html[data-theme="light"] .dk-save{background:rgba(255,252,250,.9);color:var(--ai-text);border-color:rgba(27,40,56,.16)}
html[data-theme="light"] .dk-save:hover{background:rgba(255,252,250,.98)}
html[data-theme="light"] .dk-save:focus-visible{outline-color:var(--ai-text)}

/* My Collection: every saved artist shows its (selected) heart; tapping it un-hearts */
.collection-panel .col-card .col-heart{float:right;display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:-6px -8px 0 4px;
 padding:0;border:none;border-radius:50%;background:transparent;color:var(--ai-text);cursor:pointer}
.collection-panel .col-card .col-heart .ai-heart{width:16px;height:16px}
.collection-panel .col-card .col-heart:hover{background:var(--ai-heart-tint)}
.collection-panel .col-card .col-heart:focus-visible{outline:2px solid var(--ai-gold);outline-offset:1px}

/* pop on toggle (JS adds .ai-heart-pop); reduced motion: no animation, no press scale */
@keyframes aiHeartPop{0%{transform:scale(1)}35%{transform:scale(1.28)}65%{transform:scale(.94)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){.ai-heart-pop .ai-heart{animation:aiHeartPop .34s cubic-bezier(.3,1.5,.5,1)}}
@media (prefers-reduced-motion:reduce){
 .ai-heart,.nav-fav,.dk-save,.col-heart{transition:none!important;animation:none!important}
 .nav-fav:active,.dk-save:active,.col-heart:active{transform:none!important}
}