/* ── HERB MASTERY ART ─────────────────────────────────────────────────
   The herb's illustration on a parchment plate inside its mastery ring
   (assets/js/herb-mastery-art.js). Everything stays inside the token's own
   square, so lists, scrollers and cards never clip it. The herb itself is
   never recoloured: the level is the ring, the light behind the plate and
   the glints. Idle tokens are static (gradients, no blur); motion is kept
   for a level-up, a step won, and hover or focus on showcase surfaces. */

.hm{--hm-size:64px;--hm-aura:1;position:relative;display:inline-block;flex:0 0 auto;width:var(--hm-size);height:var(--hm-size);line-height:0;vertical-align:middle;isolation:isolate}
.hm-aura,.hm-rays,.hm-plate,.hm-ring,.hm-flash{position:absolute;border-radius:50%}
.hm-aura{inset:0;z-index:0;background:radial-gradient(circle closest-side,var(--hm-glow) 0,var(--hm-glow) 72%,transparent 100%);opacity:var(--hm-aura)}
.hm-rays{inset:0;z-index:0;background:repeating-conic-gradient(from 6deg,transparent 0deg 10deg,var(--hm-ray) 13deg,transparent 16deg 30deg);-webkit-mask:radial-gradient(circle closest-side,transparent 70%,#000 80%,transparent 100%);mask:radial-gradient(circle closest-side,transparent 70%,#000 80%,transparent 100%)}
.hm-plate{inset:12%;z-index:1;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 36%,#fffdf8 0,#faf5ea 58%,#efe6d4 100%);box-shadow:inset 0 0 0 1px rgba(120,96,60,.12),inset 0 -4px 10px rgba(120,96,60,.07)}
.hm-showcase .hm-plate{inset:14%}
.hm-plate::after{content:'';position:absolute;inset:-12%;background:linear-gradient(100deg,transparent 36%,rgba(255,255,255,.7) 50%,transparent 64%);transform:translateX(-140%) skewX(-16deg);pointer-events:none}
.hm-img{display:block;width:86%;height:86%;object-fit:contain;-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none}
.hm-showcase .hm-img,.hm-card .hm-img{filter:drop-shadow(0 2px 3px rgba(36,49,44,.2))}
.hm-seal{display:block;max-width:2.3em;font-family:'Noto Serif SC','Songti SC','DM Serif Display',serif;font-size:calc(var(--hm-size) * .25);line-height:1.08;text-align:center;color:var(--hub-forest,#123d2a);word-break:break-all}
.hm-seal-3{font-size:calc(var(--hm-size) * .19)}
.hm-seal-4{font-size:calc(var(--hm-size) * .17)}
.hm-ring{inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.hm-track{fill:none;stroke:var(--hm-track)}
.hm-arc{fill:none;stroke-linecap:round}
.hm-arc.state-0{stroke:none}
.hm-arc.state-1{opacity:.28}
/* A developing property's progress: a solid share of its quarter. */
.hm-arc-fill{fill:none;stroke-linecap:round;opacity:.9}
.hm-halo{fill:none;stroke-width:.8;opacity:.7}
.hm-halo-outer{stroke-width:.5;opacity:.45}
.hm-gem{stroke:rgba(255,255,255,.85);stroke-width:3}
.hm-seed{fill:none;stroke:var(--hm-track);stroke-width:5}
.hm-glint{fill:var(--hm-spark);stroke:var(--hm-spark-edge,transparent);stroke-width:.35;transform-box:fill-box;transform-origin:center}

/* Strengths. Pip: the ring and stone only. Card: a softer light. */
.hm-pip{--hm-size:22px}
.hm-card{--hm-aura:.62}
.hm.is-new{--hm-glow:transparent}

/* Levels, from a fresh green to platinum. */
.hm-t0{--hm-glow:rgba(140,195,156,.2);--hm-track:rgba(33,74,52,.13);--hm-spark:#a9d7b6;--hm-ink:#3f6e4d}
.hm-t1{--hm-glow:rgba(29,158,108,.24);--hm-track:rgba(14,107,71,.15);--hm-spark:#3fc58c;--hm-ink:#0b6544}
.hm-t2{--hm-glow:rgba(61,114,230,.26);--hm-track:rgba(26,63,158,.14);--hm-spark:#7aa4ff;--hm-ink:#1f48b0}
.hm-t3{--hm-glow:rgba(139,92,240,.26);--hm-track:rgba(76,34,168,.14);--hm-spark:#b393ff;--hm-ink:#5527b3}
.hm-t4{--hm-glow:rgba(240,186,52,.34);--hm-track:rgba(166,111,6,.16);--hm-spark:#f6c847;--hm-spark-edge:rgba(166,111,6,.45);--hm-ray:rgba(240,186,52,.34);--hm-ink:#875a04}
.hm-t5{--hm-glow:rgba(160,184,222,.46);--hm-track:rgba(96,112,140,.22);--hm-spark:#ffffff;--hm-spark-edge:rgba(96,114,142,.6);--hm-ray:rgba(150,176,216,.42);--hm-ink:#4c5c74}
/* Level names beside a herb take the level's ink. */
.hm-level-name{font-weight:700;color:var(--hm-ink)}

/* A level-up: the light swells, the ring blooms open, the herb lifts, the
   glints arrive and a shine crosses the plate, then all of it settles. */
.hm-levelup .hm-aura{animation:hmAuraPulse 1.3s cubic-bezier(.2,.8,.3,1) both}
.hm-levelup .hm-rays{animation:hmFade 1.2s ease .5s both}
.hm-levelup .hm-ring{animation:hmRingBloom 1.15s cubic-bezier(.2,1.1,.35,1) both}
.hm-levelup .hm-plate{animation:hmHerbLift .95s cubic-bezier(.2,1.3,.4,1) .1s both}
.hm-levelup .hm-glint{animation:hmGlintIn .6s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(.6s + var(--d,0s))}
.hm-levelup .hm-plate::after{animation:hmShine 1s ease .8s both}
.hm-flash{inset:8%;z-index:3;border:2px solid var(--hm-spark);box-shadow:0 0 16px var(--hm-glow),inset 0 0 12px var(--hm-glow);opacity:0;pointer-events:none;animation:hmFlash 1s ease-out .3s both}
.hm-burst{position:absolute;left:50%;top:50%;z-index:4;width:0;height:0;pointer-events:none}
.hm-burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;background:var(--hm-spark);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:hmBurst 1.3s cubic-bezier(.15,.7,.3,1) forwards;animation-delay:calc(.45s + var(--d))}
.hm-t5 .hm-burst i{box-shadow:0 0 0 1px rgba(96,114,142,.35)}
/* A step won lights its quarter; a property just strengthened fills briefly. */
.hm-arc.just-lit{stroke-dasharray:100;animation:hmArcDraw .9s cubic-bezier(.3,.8,.3,1) .35s both}
.hm-arc.just-grew{animation:hmArcGlow .32s ease}
/* A drop: the ring dims for a moment. The herb does not change. */
.hm-drop .hm-ring{animation:hmRingDip .7s ease}
/* Showcase herbs answer hover and focus with one shine; Gold and Platinum
   in a hero spot keep a slow twinkle. */
:is(button,a):is(:hover,:focus-visible) .hm-showcase .hm-plate::after,.hm-showcase:hover .hm-plate::after{animation:hmShine .9s ease}
.hm-hero:not(.hm-levelup):is(.hm-t4,.hm-t5) .hm-glint{animation:hmTwinkle 3.6s ease-in-out infinite;animation-delay:calc(var(--d,0s) * 6)}

@keyframes hmAuraPulse{0%{transform:scale(.5);opacity:0}38%{transform:scale(1.14);opacity:1}100%{transform:scale(1);opacity:var(--hm-aura)}}
@keyframes hmRingBloom{0%{transform:scale(.78) rotate(-40deg);opacity:.15}58%{transform:scale(1.06) rotate(3deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes hmHerbLift{0%{transform:scale(.9)}55%{transform:scale(1.05)}100%{transform:none}}
@keyframes hmGlintIn{0%{opacity:0;transform:scale(0) rotate(-45deg)}60%{opacity:1;transform:scale(1.5)}100%{opacity:1;transform:none}}
@keyframes hmShine{0%{transform:translateX(-140%) skewX(-16deg)}100%{transform:translateX(140%) skewX(-16deg)}}
@keyframes hmFlash{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.45)}}
@keyframes hmFade{from{opacity:0}to{opacity:1}}
@keyframes hmBurst{0%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--hm-size) * -.32)) scale(.4)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--hm-size) * -.72)) scale(.9) rotate(45deg)}}
@keyframes hmArcDraw{0%{stroke-dashoffset:100;filter:none}70%{stroke-dashoffset:0;filter:drop-shadow(0 0 3px var(--hm-spark))}100%{stroke-dashoffset:0;filter:none}}
@keyframes hmArcGlow{50%{opacity:1;filter:drop-shadow(0 0 3px var(--hm-spark))}}
@keyframes hmRingDip{30%{opacity:.35;transform:scale(.96)}100%{opacity:1;transform:none}}
@keyframes hmTwinkle{0%,100%{opacity:1;transform:scale(1)}45%{opacity:.45;transform:scale(.7)}55%{opacity:1;transform:scale(1.25)}}
.hm-ring,.hm-aura,.hm-plate{transform-origin:50% 50%}

@media(prefers-reduced-motion:reduce){
  .hm *,.hm *::after{animation:none!important}
  .hm-flash,.hm-burst{display:none}
}

/* -- Where herbs appear -- */
/* Practise card and Continue learning: the herb's own plate replaces the
   discs that framed the flower. */
.herb-hub-herb{background:none;width:auto;height:auto}
.hub-row-herb{background:none;overflow:visible}
/* The garden: a herb per card, in its showcase ring, with its level below. */
.herb-hub-garden button{gap:4px;min-height:132px;padding:10px 6px 12px}
.herb-hub-garden .hm{margin-bottom:2px}
.herb-hub-garden small.hm-level-name{font-size:11.5px;letter-spacing:.01em}
/* Progress: the level legend, then each level's herbs, wrapping. */
.hub-herb-ladder li{gap:4px}
.hub-herb-level{margin:14px 0 4px}
.hub-herb-level h3{display:flex;align-items:baseline;gap:6px;margin:0 0 8px;font:700 14px/1.3 'Inter',sans-serif}
.hub-herb-level h3 span{font-weight:600;color:var(--hub-muted,#5b6660)}
.hub-herb-level-list{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));overflow:visible}
/* Library card: the small ring alone, where the flower sat. */
.mm-card-mastery .hm-pip{display:block}
.mm-herb-card:is(:hover,.selected) .mm-card-mastery .hm-pip{transform:scale(1.1);transition:transform .25s cubic-bezier(.2,1.3,.4,1)}
/* The practice result and the monograph's progress block. */
.hm-stage{margin:4px 0 2px}
#mm-d-mastery-flower .hm{display:block}
@media(prefers-reduced-motion:reduce){.mm-herb-card .mm-card-mastery .hm-pip{transform:none;transition:none}}