/*
 * Chashni conceptual recipe artwork
 *
 * Markup contract:
 *   .recipe-card-media.is-conceptual > .recipe-concept-art
 *   .detail-hero.is-conceptual > .recipe-concept-art
 *
 * The artwork renderer owns the SVG geometry. This stylesheet owns the
 * editorial surface, depth, responsive composition and interaction states.
 * It is intentionally loaded after recipe-app.css so the old photographic
 * treatment is disabled only for a media block that opts into this system.
 */

.recipe-concept-art{
  --art-bg-1:#fff1e7;
  --art-bg-2:#f9c7ad;
  --art-bg-3:#e95b35;
  --art-halo:rgba(255,255,255,.56);
  --art-ring:rgba(133,53,37,.105);
  --art-grain:rgba(83,40,29,.17);
  --art-ink:#5d3026;
  --art-line:#6c3a2e;
  --art-shadow:rgba(92,42,29,.18);
  --art-vessel:#fffaf4;
  --art-vessel-inner:#f7dfd3;
  --art-vessel-edge:#d6aa97;
  --art-food:#e8a332;
  --art-food-deep:#bd572f;
  --art-food-light:#ffe1a0;
  --art-accent:#d9412c;
  --art-accent-2:#62814c;
  --art-highlight:#fff9dd;
  --art-shift-x:0px;
  --art-shift-y:0px;
  --art-tilt:0deg;
  --art-scale:1;
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  overflow:hidden;
  isolation:isolate;
  contain:layout paint;
  color:var(--art-ink);
  background:
    radial-gradient(ellipse 48% 64% at 16% 7%,var(--art-halo) 0 54%,transparent 55%),
    radial-gradient(circle at 84% 90%,rgba(255,255,255,.22) 0 17%,transparent 17.5%),
    linear-gradient(145deg,var(--art-bg-1) 0%,var(--art-bg-2) 67%,var(--art-bg-3) 145%);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  pointer-events:none;
}

/* An offset ring keeps the visual language related to Chashni without
   competing with the food silhouette. */
.recipe-concept-art::before{
  content:"";
  position:absolute;
  z-index:0;
  width:min(58%,210px);
  aspect-ratio:1;
  inset:auto -8% -48% auto;
  border:clamp(18px,8cqi,34px) solid var(--art-ring);
  border-radius:44% 56% 48% 52% / 52% 43% 57% 48%;
  transform:rotate(-16deg);
  transition:transform .45s cubic-bezier(.2,.75,.25,1);
}

/* Tiny regular dots read as matte paper grain at card size. No bitmap or
   network asset is involved. */
.recipe-concept-art::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  opacity:.16;
  background-image:
    radial-gradient(circle,var(--art-grain) .55px,transparent .7px),
    radial-gradient(circle,rgba(255,255,255,.34) .45px,transparent .6px);
  background-position:0 0,2px 2px;
  background-size:5px 5px,6px 6px;
  mix-blend-mode:soft-light;
  pointer-events:none;
}

.recipe-concept-art > svg,
.recipe-concept-art .concept-svg,
.recipe-concept-art .concept-art__svg{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  overflow:visible;
  fill:none;
  stroke:none;
  transform:
    translate3d(var(--art-shift-x),var(--art-shift-y),0)
    rotate(var(--art-tilt))
    scale(var(--art-scale));
  transform-origin:50% 54%;
  transition:transform .48s cubic-bezier(.2,.75,.25,1),filter .35s ease;
  filter:drop-shadow(0 8px 7px rgba(80,36,26,.05));
}

/* SVG semantic paint tokens. Explicit inline fills from an exact dish preset
   still win, while these classes provide safe family-level fallbacks. */
.recipe-concept-art .art-shadow{
  fill:var(--art-shadow);
  stroke:none;
  opacity:.72;
  filter:blur(3px);
  transform-box:fill-box;
  transform-origin:center;
}
.recipe-concept-art .art-vessel,
.recipe-concept-art .art-plate{fill:var(--art-vessel);stroke:var(--art-vessel-edge);stroke-width:1.25}
.recipe-concept-art .art-vessel-inner,
.recipe-concept-art .art-plate-inner{fill:var(--art-vessel-inner);stroke:none}
.recipe-concept-art .art-rim{fill:none;stroke:var(--art-vessel-edge);stroke-width:1.5;opacity:.78}
.recipe-concept-art .art-food,
.recipe-concept-art .art-food-main{fill:var(--art-food);stroke:none}
.recipe-concept-art .art-food-deep{fill:var(--art-food-deep);stroke:none}
.recipe-concept-art .art-food-light{fill:var(--art-food-light);stroke:none}
.recipe-concept-art .art-accent{fill:var(--art-accent);stroke:none}
.recipe-concept-art .art-accent-2{fill:var(--art-accent-2);stroke:none}
.recipe-concept-art .art-highlight{fill:var(--art-highlight);stroke:none;opacity:.88}
.recipe-concept-art .art-line,
.recipe-concept-art .art-detail-line{
  fill:none;
  stroke:var(--art-line);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.72;
  vector-effect:non-scaling-stroke;
}
.recipe-concept-art .art-line.is-soft{opacity:.36;stroke-width:1.4}
.recipe-concept-art .art-speck{fill:var(--art-accent);stroke:none;opacity:.78}
.recipe-concept-art .art-leaf{fill:var(--art-accent-2);stroke:none}
.recipe-concept-art .art-steam{
  fill:none;
  stroke:rgba(255,255,255,.82);
  stroke-width:2.2;
  stroke-linecap:round;
  opacity:.72;
  vector-effect:non-scaling-stroke;
  transform-box:fill-box;
  transform-origin:center bottom;
  animation:chashni-art-steam 3.2s ease-in-out infinite;
}
.recipe-concept-art .art-steam:nth-of-type(2n){animation-delay:-1.05s;animation-duration:3.7s}
.recipe-concept-art .art-steam:nth-of-type(3n){animation-delay:-2.1s;animation-duration:4.1s}
.recipe-concept-art .art-spark{
  fill:var(--art-highlight);
  transform-box:fill-box;
  transform-origin:center;
  animation:chashni-art-spark 3.8s ease-in-out infinite;
}
.recipe-concept-art .art-spark:nth-of-type(2n){animation-delay:-1.8s}

@keyframes chashni-art-steam{
  0%,100%{opacity:.42;transform:translateY(2px) scaleY(.92)}
  50%{opacity:.82;transform:translateY(-3px) scaleY(1.06)}
}
@keyframes chashni-art-spark{
  0%,100%{opacity:.42;transform:scale(.88) rotate(0)}
  50%{opacity:.95;transform:scale(1.08) rotate(8deg)}
}

/* Stable visual variants diversify repeated recipe editions while preserving
   the exact dish geometry and recognisable signature cues. */
.recipe-concept-art:is(.is-home,.variant-home),
.recipe-concept-art[data-variant="home"]{--art-shift-x:-2px;--art-shift-y:2px;--art-tilt:-.35deg}
.recipe-concept-art:is(.is-healthy,.variant-healthy),
.recipe-concept-art[data-variant="healthy"]{--art-shift-x:2px;--art-shift-y:-1px;--art-tilt:.45deg;--art-halo:rgba(255,255,255,.64)}
.recipe-concept-art:is(.is-quick,.variant-quick),
.recipe-concept-art[data-variant="quick"]{--art-shift-x:-4px;--art-shift-y:1px;--art-tilt:-.85deg;--art-scale:1.015}
.recipe-concept-art:is(.is-party,.variant-party),
.recipe-concept-art[data-variant="party"]{--art-shift-x:3px;--art-shift-y:-2px;--art-tilt:.8deg;--art-scale:1.018;--art-ring:rgba(139,48,38,.135)}
.recipe-concept-art:is(.is-garden,.variant-garden),
.recipe-concept-art[data-variant="garden"]{--art-shift-x:1px;--art-shift-y:1px;--art-tilt:-.5deg;--art-ring:rgba(71,103,58,.12)}
.recipe-concept-art:is(.is-signature,.variant-signature),
.recipe-concept-art[data-variant="signature"]{--art-shift-x:0px;--art-shift-y:-3px;--art-scale:1.025;--art-ring:rgba(127,43,36,.145)}

/* Family defaults affect the editorial backdrop and act only as resilient
   paint fallbacks. Exact per-recipe food colours belong in the renderer. */
.recipe-concept-art:is(.art-family-rice,[data-family="rice"]),[data-art-family="rice"] > .recipe-concept-art{--art-bg-1:#fff4df;--art-bg-2:#f5c667;--art-bg-3:#e86838;--art-food:#f4c65a;--art-food-deep:#c96a35;--art-accent:#b92f2e;--art-accent-2:#63864d}
.recipe-concept-art:is(.art-family-stew,[data-family="stew"]),[data-art-family="stew"] > .recipe-concept-art{--art-bg-1:#f8eadb;--art-bg-2:#dba376;--art-bg-3:#a64835;--art-food:#a95635;--art-food-deep:#74372b;--art-accent:#d6a331;--art-accent-2:#416e43}
.recipe-concept-art:is(.art-family-grill,[data-family="grill"]),[data-art-family="grill"] > .recipe-concept-art{--art-bg-1:#f6e4d7;--art-bg-2:#dc9271;--art-bg-3:#8d3c31;--art-food:#a95034;--art-food-deep:#623329;--art-accent:#efb33f;--art-accent-2:#517848}
.recipe-concept-art:is(.art-family-soup,[data-family="soup"]),[data-art-family="soup"] > .recipe-concept-art{--art-bg-1:#fff1dd;--art-bg-2:#e7b26b;--art-bg-3:#d75b38;--art-food:#d28a36;--art-food-deep:#9c4d31;--art-accent:#f2cf6a;--art-accent-2:#557a4a}
.recipe-concept-art:is(.art-family-breakfast,[data-family="breakfast"]),[data-art-family="breakfast"] > .recipe-concept-art{--art-bg-1:#fff5dd;--art-bg-2:#f2c879;--art-bg-3:#e66f42;--art-food:#f0b849;--art-food-deep:#cb5a35;--art-accent:#fff0b2;--art-accent-2:#6c8c55}
.recipe-concept-art:is(.art-family-dessert,[data-family="dessert"]),[data-art-family="dessert"] > .recipe-concept-art{--art-bg-1:#fff0e4;--art-bg-2:#e8b1a6;--art-bg-3:#a84c65;--art-food:#e4a64f;--art-food-deep:#a95655;--art-accent:#f5d467;--art-accent-2:#86566e}
.recipe-concept-art:is(.art-family-chicken,[data-family="chicken"]),[data-art-family="chicken"] > .recipe-concept-art{--art-bg-1:#fff0df;--art-bg-2:#eeb176;--art-bg-3:#d95735;--art-food:#d99045;--art-food-deep:#a44b31;--art-accent:#f2c85c;--art-accent-2:#5b8147}
.recipe-concept-art:is(.art-family-vegetarian,[data-family="vegetarian"]),[data-art-family="vegetarian"] > .recipe-concept-art{--art-bg-1:#f7f1da;--art-bg-2:#c5cf79;--art-bg-3:#e66b3f;--art-food:#d39c4b;--art-food-deep:#8a5936;--art-accent:#d94f32;--art-accent-2:#537d49}
.recipe-concept-art:is(.art-family-nooni,[data-family="nooni"]),[data-art-family="nooni"] > .recipe-concept-art{--art-bg-1:#fff0df;--art-bg-2:#e8b36f;--art-bg-3:#be5037;--art-food:#c98245;--art-food-deep:#82432f;--art-accent:#e9c65a;--art-accent-2:#5d7b45}
.recipe-concept-art:is(.art-family-patty,[data-family="patty"]),[data-art-family="patty"] > .recipe-concept-art{--art-bg-1:#fff2df;--art-bg-2:#dfad6b;--art-bg-3:#b84c35;--art-food:#b66d39;--art-food-deep:#77402e;--art-accent:#efc758;--art-accent-2:#4f7845}
.recipe-concept-art:is(.art-family-stuffed,[data-family="stuffed"]),[data-art-family="stuffed"] > .recipe-concept-art{--art-bg-1:#f8f0dc;--art-bg-2:#c5bd6b;--art-bg-3:#d95b38;--art-food:#7e9149;--art-food-deep:#4e663d;--art-accent:#c64833;--art-accent-2:#e3b74a}
.recipe-concept-art:is(.art-family-pasta,[data-family="pasta"]),[data-art-family="pasta"] > .recipe-concept-art{--art-bg-1:#fff1de;--art-bg-2:#efbd73;--art-bg-3:#d95334;--art-food:#e8b24e;--art-food-deep:#a94c31;--art-accent:#c8382c;--art-accent-2:#4e7b4b}
.recipe-concept-art:is(.art-family-salad,[data-family="salad"]),[data-art-family="salad"] > .recipe-concept-art{--art-bg-1:#f6f2dc;--art-bg-2:#c6ce75;--art-bg-3:#e6673e;--art-food:#77a355;--art-food-deep:#4f7548;--art-accent:#d94a32;--art-accent-2:#f1c755}
.recipe-concept-art:is(.art-family-finger,[data-family="finger"]),[data-art-family="finger"] > .recipe-concept-art{--art-bg-1:#fff0e3;--art-bg-2:#efa67f;--art-bg-3:#ca4735;--art-food:#d89046;--art-food-deep:#95503a;--art-accent:#f2c45a;--art-accent-2:#647d4d}
.recipe-concept-art:is(.art-family-bakery,[data-family="bakery"]),[data-art-family="bakery"] > .recipe-concept-art{--art-bg-1:#fff0e6;--art-bg-2:#e5b08d;--art-bg-3:#9b5060;--art-food:#bd7a4e;--art-food-deep:#784436;--art-accent:#e7bf69;--art-accent-2:#9b5b69}
.recipe-concept-art:is(.art-family-seafood,[data-family="seafood"]),[data-art-family="seafood"] > .recipe-concept-art{--art-bg-1:#eaf5ee;--art-bg-2:#8ec2b0;--art-bg-3:#e86743;--art-food:#dc7b55;--art-food-deep:#9b4d3d;--art-accent:#f0c65b;--art-accent-2:#3f7a71}
.recipe-concept-art:is(.art-family-world,[data-family="world"]),[data-art-family="world"] > .recipe-concept-art{--art-bg-1:#fff0df;--art-bg-2:#eca46e;--art-bg-3:#b5443a;--art-food:#d18a45;--art-food-deep:#904432;--art-accent:#edc64f;--art-accent-2:#4d7c53}
.recipe-concept-art:is(.art-family-bowl,[data-family="bowl"]),[data-art-family="bowl"] > .recipe-concept-art{--art-bg-1:#f5f0df;--art-bg-2:#d8bf78;--art-bg-3:#d95f3b;--art-food:#c99b4a;--art-food-deep:#87513a;--art-accent:#d94b33;--art-accent-2:#527c55}

/* Card integration. The explicit class is the compatibility contract; the
   :has() block below is only a defensive enhancement for modern WebViews. */
.recipe-card-media.is-conceptual{
  background:var(--card,#fffdfa);
  isolation:isolate;
}
.recipe-card-media.is-conceptual::before{
  z-index:2;
  background:linear-gradient(180deg,rgba(55,25,18,0) 62%,rgba(55,25,18,.075) 100%);
}
.recipe-card-media.is-conceptual::after{
  z-index:4;
  border-color:rgba(255,255,255,.31);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(99,48,34,.05);
}
.recipe-card-media.is-conceptual > .recipe-concept-art{position:absolute;z-index:0;inset:0}
.recipe-card-media.is-conceptual > .recipe-card-photo{display:none!important}
.recipe-editorial-art{
  background:#f7ecdf;
}
.recipe-editorial-art::before,
.recipe-editorial-art::after{display:none}
.recipe-editorial-art-fallback{
  position:absolute;
  z-index:0;
  inset:0;
  display:block;
  visibility:visible;
}
.recipe-editorial-art-fallback > .recipe-concept-art{position:absolute;inset:0}
.recipe-editorial-art-image{
  position:absolute;
  z-index:2;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:50% 50%;
  opacity:0;
  transform:scale(1.006);
  transform-origin:50% 50%;
  filter:saturate(1.015) contrast(1.01);
  transition:opacity .18s ease,transform .5s cubic-bezier(.2,.75,.25,1),filter .35s ease;
}
.recipe-editorial-art.is-raster-ready > .recipe-editorial-art-image{opacity:1}
.recipe-editorial-art.is-raster-ready > .recipe-editorial-art-fallback{visibility:hidden}
.recipe-editorial-art.is-raster-missing > .recipe-editorial-art-image{display:none}
.recipe-card-media.is-conceptual .recipe-card-food-cue{
  z-index:5;
  min-height:23px;
  padding:5px 8px;
  border-color:rgba(255,255,255,.56);
  background:rgba(255,253,248,.82);
  color:var(--art-ink,var(--ink));
  box-shadow:0 5px 14px rgba(69,31,22,.10);
  backdrop-filter:blur(10px) saturate(1.08);
}
.recipe-card-media.is-conceptual .save-button{z-index:6}

/* Compact artwork instances replace the old recipe emoji in recommendations
   and the weekly planner while keeping the same lightweight SVG source. */
.smart-pick-icon,
.week-day-icon{position:relative;overflow:hidden;padding:0;background:#fff;border:1px solid rgba(116,65,49,.08);isolation:isolate}
.smart-pick-icon > .recipe-concept-art,
.week-day-icon > .recipe-concept-art{position:absolute;inset:0}
.smart-pick-icon .recipe-concept-art::before,
.week-day-icon .recipe-concept-art::before,
.smart-pick-icon .recipe-concept-art::after,
.week-day-icon .recipe-concept-art::after{display:none}
.smart-pick-icon .concept-svg{transform:scale(1.38);transform-origin:50% 57%}
.week-day-icon .concept-svg{transform:scale(1.46);transform-origin:50% 57%}
.smart-pick-icon .recipe-editorial-art-image,
.week-day-icon .recipe-editorial-art-image{object-position:50% 51%;transform:scale(1.07)}

/* Detail integration retains a clear title surface and avoids the heavy dark
   photographic scrim that made illustrations look muddy. */
.detail-hero.is-conceptual{
  background:var(--paper,#fff8f2);
  isolation:isolate;
}
.detail-hero.is-conceptual::before{
  z-index:1;
  background:linear-gradient(180deg,rgba(54,24,17,0) 50%,rgba(54,24,17,.10) 100%);
}
.detail-hero.is-conceptual::after{
  z-index:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(83,38,27,.06);
}
.detail-hero.is-conceptual > .recipe-concept-art{position:absolute;z-index:0;inset:0}
.detail-hero.is-conceptual > .detail-food-photo{display:none!important}
.detail-hero .recipe-editorial-art-image{object-position:50% 48%;transform:scale(1.012)}
.detail-hero.is-conceptual .detail-title{
  z-index:3;
  border-color:rgba(255,255,255,.7);
  background:rgba(255,253,249,.88);
  box-shadow:0 13px 34px rgba(60,27,20,.14);
}
.detail-hero.is-conceptual .detail-save,
.detail-hero.is-conceptual + .detail-save{z-index:5}

@supports selector(:has(*)){
  .recipe-card-media:has(> .recipe-concept-art){background:var(--card,#fffdfa);isolation:isolate}
  .recipe-card-media:has(> .recipe-concept-art)::before{z-index:2;background:linear-gradient(180deg,rgba(55,25,18,0) 62%,rgba(55,25,18,.075) 100%)}
  .recipe-card-media:has(> .recipe-concept-art)::after{z-index:4;border-color:rgba(255,255,255,.31);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(99,48,34,.05)}
  .recipe-card-media:has(> .recipe-concept-art) > .recipe-card-photo{display:none!important}
  .detail-hero:has(> .recipe-concept-art){background:var(--paper,#fff8f2);isolation:isolate}
  .detail-hero:has(> .recipe-concept-art)::before{z-index:1;background:linear-gradient(180deg,rgba(54,24,17,0) 50%,rgba(54,24,17,.10) 100%)}
  .detail-hero:has(> .recipe-concept-art)::after{z-index:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(83,38,27,.06)}
  .detail-hero:has(> .recipe-concept-art) > .detail-food-photo{display:none!important}
}

@media(hover:hover) and (pointer:fine){
  .recipe-card:hover .recipe-concept-art > svg,
  .recipe-card:hover .recipe-concept-art .concept-svg,
  .recipe-card:hover .recipe-concept-art .concept-art__svg{
    transform:
      translate3d(var(--art-shift-x),calc(var(--art-shift-y) - 2px),0)
      rotate(var(--art-tilt))
      scale(calc(var(--art-scale) + .025));
    filter:drop-shadow(0 11px 9px rgba(80,36,26,.09));
  }
  .recipe-card:hover .recipe-concept-art::before{transform:rotate(-11deg) scale(1.025)}
  .recipe-card:hover .recipe-editorial-art-image{transform:scale(1.042);filter:saturate(1.04) contrast(1.015)}
}

@media(max-width:389px){
  .recipe-card-media .recipe-concept-art{--art-scale:.965}
  .recipe-concept-art::before{width:62%;inset:auto -12% -45% auto}
  .detail-hero .recipe-concept-art{--art-scale:.96}
}

@media(min-width:720px){
  .detail-hero .recipe-concept-art{
    --art-scale:1.035;
    --art-shift-y:-3px;
  }
  .detail-hero .recipe-concept-art::before{
    width:min(48%,260px);
    inset:auto -3% -45% auto;
    border-width:38px;
  }
}

@media(prefers-contrast:more){
  .recipe-concept-art{--art-grain:rgba(60,26,19,.24);--art-shadow:rgba(64,28,20,.25)}
  .recipe-concept-art .art-line,
  .recipe-concept-art .art-detail-line{opacity:.94;stroke-width:2.35}
  .recipe-card-media.is-conceptual::after,
  .detail-hero.is-conceptual::after{border:1px solid rgba(74,34,25,.22)}
}

@media(forced-colors:active){
  .recipe-concept-art{forced-color-adjust:none;border:1px solid CanvasText}
  .recipe-card-media.is-conceptual .recipe-card-food-cue{forced-color-adjust:auto;border:1px solid ButtonText;background:ButtonFace;color:ButtonText}
}

@media(prefers-reduced-motion:reduce){
  .recipe-concept-art,
  .recipe-concept-art::before,
  .recipe-concept-art::after,
  .recipe-concept-art > svg,
  .recipe-concept-art .concept-svg,
  .recipe-concept-art .concept-art__svg,
  .recipe-concept-art .art-steam,
  .recipe-concept-art .art-spark{
    animation:none!important;
    transition:none!important;
  }
}