/* ════════════════════════════════════════════════════════════════
   ingredients-wheel.css — ingredients landing (the category wheel)
   Loaded via {% block extra_head %} in templates/catalog/category_list.html.
   A Delicious-mode page (mode is server-set to "d"), so tokens resolve to
   the d-mode palette. Page wrapper + nav/footer come from base.html /
   cosmic.css. Header classes are namespaced .iw-* to avoid clashing with
   shared classes; wheel internals keep the names the wheel JS targets.
   Category slice colours are per-slice oklch values set by the JS via
   custom properties (--fill/--ink/…), derived from each category's hue.
   ════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────── */
.iw-head { text-align: center; max-width: 660px; margin: 0 auto 2rem; }
.iw-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--primary-deep); font-weight: 400;
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem;
}
.iw-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-deep); }
.iw-title {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: clamp(3rem, 7vw, 4.8rem); line-height: 1; letter-spacing: -.018em;
  color: var(--text); margin-bottom: 1.1rem;
}
.iw-title em {
  font-style: italic;
  background: linear-gradient(135deg, #5a6b3d 0%, #c25d3b 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.iw-lede {
  font-size: 1.02rem; line-height: 1.7; color: var(--muted);
  max-width: 52ch; margin: 0 auto; text-wrap: pretty;
}

/* ── Wheel ──────────────────────────────────────────────────────── */
.wheel-wrap { position: relative; width: min(720px, 96vw); aspect-ratio: 1; margin: 0 auto; }
.wheel-glow {
  position: absolute; inset: -4%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--glow, rgba(194,93,59,.18)) 0%, transparent 62%);
  filter: blur(26px); transition: background .55s ease; z-index: 0; pointer-events: none;
}
.wheel-svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; overflow: visible; }

/* spoke connecting hub to active wedge */
.spoke {
  stroke: var(--spoke, rgba(194,93,59,.6)); stroke-width: 1.4;
  opacity: 0; stroke-dasharray: 2 5; transition: opacity .4s ease, stroke .4s ease;
}
.spoke.on { opacity: .7; }

/* generic interactive item */
.item { cursor: pointer; outline: none; }
.item .lab, .item .emo, .item .pg { pointer-events: none; }

/* middle ring — category label on tinted ground */
.cat .wedge {
  fill: var(--fill); stroke: var(--bg); stroke-width: 2;
  transition: fill .35s ease, filter .35s ease;
}
/* inner ring — emoji on neutral ground */
.cat .wedge-emo {
  fill: rgba(255,255,255,.55); stroke: var(--bg); stroke-width: 2;
  transition: fill .35s ease;
}
.cat:hover .wedge-emo, .cat.is-active .wedge-emo { fill: rgba(255,255,255,.92); }
/* outer ring — planet ground, faint category tint */
.cat .wedge-pl {
  fill: var(--plfill); stroke: var(--bg); stroke-width: 2;
  transition: fill .35s ease;
}
.cat:hover .wedge-pl, .cat.is-active .wedge-pl { fill: var(--plfillHi); }
.cat .lab {
  fill: var(--ink); font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
  text-anchor: middle; dominant-baseline: central;
  transition: fill .35s ease;
}
.cat .emo {
  font-size: 17px; text-anchor: middle; dominant-baseline: central;
  transition: font-size .25s ease;
}
.cat:hover .wedge, .cat.is-active .wedge { fill: var(--fillHi); filter: drop-shadow(0 6px 18px var(--sglow)); }
.cat:hover .lab, .cat.is-active .lab { fill: var(--inkHi); }
.cat:hover .emo, .cat.is-active .emo { font-size: 20px; }
.item:focus-visible .wedge { stroke: var(--text); stroke-width: 2; }

/* planet glyphs (outer ring) — part of the slice */
.cat .pg {
  fill: var(--pink); font-family: 'Noto Serif', serif; font-size: 14px;
  text-anchor: middle; dominant-baseline: central;
  transition: fill .3s ease;
}
.cat:hover .pg, .cat.is-active .pg { fill: var(--pinkHi); }

/* ── Center hub ─────────────────────────────────────────────────── */
.hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 37%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 5% 8%; z-index: 2; pointer-events: none;
}
.hub__kicker {
  font-family: 'DM Mono', monospace; font-size: .56rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--hubc, var(--primary-deep));
  margin-bottom: .3rem;
}
.hub__glyph { font-size: 2rem; line-height: 1; }
.hub__name {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: 1.34rem; color: var(--text); line-height: 1.08; margin-top: .3rem;
  letter-spacing: -.01em; text-wrap: balance;
}
.hub__meta {
  font-family: 'DM Mono', monospace; font-size: .62rem; color: var(--muted);
  letter-spacing: .06em; margin-top: .42rem; text-transform: uppercase;
}
.hub__meta b { color: var(--hubc, var(--primary-deep)); font-weight: 500; }
.hub__pl {
  font-family: 'DM Mono', monospace; font-size: .66rem; color: var(--muted);
  letter-spacing: .04em; margin-top: .32rem;
  display: inline-flex; align-items: center; gap: .55rem;
}
.hub__pl .ps { font-family: 'Noto Serif', serif; font-size: .85rem; color: var(--hubc, var(--primary-deep)); }
.hub__preview {
  font-size: .8rem; line-height: 1.5; color: var(--muted);
  margin-top: .5rem; max-width: 24ch; text-wrap: pretty;
}
.hub__cta {
  pointer-events: auto; margin-top: .75rem;
  font-family: 'Space Grotesk', sans-serif; font-size: .58rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.05rem; border-radius: var(--r-pill, 999px);
  background: var(--hubc, var(--primary-deep));
  transition: transform .2s, opacity .2s;
}
.hub__cta:hover { color: #fff; opacity: .9; transform: translateY(-1px); }
.hub__cta .arr { transition: transform .25s; }
.hub__cta:hover .arr { transform: translateX(3px); }
@media (max-width: 600px) {
  .hub__preview { display: none; }
  .hub__glyph { font-size: 1.6rem; }
  .hub__name { font-size: 1.05rem; }
  .hub__kicker { font-size: .5rem; }
  .hub__cta { padding: .4rem .85rem; }
}

.ring-hint {
  text-align: center; font-family: 'DM Mono', monospace; font-size: .66rem;
  letter-spacing: .04em; color: var(--muted-2); margin-top: 1.6rem;
}