/* ══════════════════════════════════════════════════════════════════
   honey.css — spaced-repetition "honey pot" decay visual for chapter cards
   ══════════════════════════════════════════════════════════════════

   Pairs with honey.js. honey.js sets, per completed chapter card:
     data-honey="learning|fresh|aging|due"
     --honey-freshness : 0..1   (1 = just reviewed, 0 = fully due)  [fresh/aging]
     --honey-progress  : 0..1   (fraction of activities done)       [learning]

   All colour maths lives here (theme-aware via color-mix + tokens), so JS
   never hardcodes a hex. The card's chamfer structure is untouched: the
   element itself is the frame, its ::before is the fill (see base.css /
   the chapter-card chamfer contract). We only repaint those two layers.

   Principle: the fill NEVER drains. Decay dims and crystallises; a finished
   chapter always looks full, just waxy, until it is warmed up again.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Waxy mid-tone the amber desaturates toward as a chapter ages. */
  --honey-wax:   #b8a98a;
  /* Matte crystallised fill of the "due for review" floor state. */
  --honey-matte: #cfc7b6;
  --honey-due-ink: #6b5c33;   /* label/eyebrow ink on the matte due fill */
}
body.dark {
  --honey-wax:   #8a7f63;
  --honey-matte: #4a4437;
  --honey-due-ink: #b8a05a;
}

/* ── LEARNING: soft amber glow rising from the floor, grows with progress ── */
[data-honey="learning"]::before {
  background:
    radial-gradient(ellipse 135% calc(50% + var(--honey-progress, 0) * 60%) at 50% 132%,
      color-mix(in srgb, var(--amber) calc(20% + var(--honey-progress, 0) * 45%), transparent) 0%,
      transparent 62%),
    var(--paper) !important;
}

/* ── FRESH / AGING: solid pot, amber desaturating toward wax as it ages ── */
/* frame = a shade darker than the fill so the chamfer edge stays readable */
[data-honey="fresh"],
[data-honey="aging"] {
  background: color-mix(in srgb,
    color-mix(in srgb, var(--amber) calc(var(--honey-freshness, 1) * 100%), var(--honey-wax))
    82%, #000) !important;
}
[data-honey="fresh"]::before,
[data-honey="aging"]::before {
  background: color-mix(in srgb,
    var(--amber) calc(var(--honey-freshness, 1) * 100%), var(--honey-wax)) !important;
}
/* Dark lettering on the warm fill (matches the site's amber primary buttons). */
[data-honey="fresh"]  .chap-name,
[data-honey="aging"]  .chap-name,
[data-honey="fresh"]  .chap-pct,
[data-honey="aging"]  .chap-pct { color: #1c1710 !important; }
[data-honey="fresh"]  .chap-pillar-val,
[data-honey="aging"]  .chap-pillar-val,
[data-honey="fresh"]  .chap-pillar-label,
[data-honey="aging"]  .chap-pillar-label,
[data-honey="fresh"]  .chap-pillar-icon,
[data-honey="aging"]  .chap-pillar-icon { color: #2a2116 !important; }
[data-honey="fresh"]  .chap-progress-bar,
[data-honey="aging"]  .chap-progress-bar { background: rgba(28,23,16,.18) !important; }

/* ── DUE: crystallised matte floor state — never empty, text flips light ── */
[data-honey="due"] {
  background: color-mix(in srgb, var(--honey-matte) 78%, #000) !important;
}
[data-honey="due"]::before {
  background: var(--honey-matte) !important;
}
[data-honey="due"] .chap-name { color: #2e2820 !important; }
[data-honey="due"] .chap-pct  { color: var(--honey-due-ink) !important; }
body.dark [data-honey="due"] .chap-name { color: #d8d2c4 !important; }

/* ── Review chip — the chamfer silhouette shrunk into a corner badge ── */
.honey-chip {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: .52rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--amber);
  padding: 4px 8px;
  background: var(--paper);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  pointer-events: none;
}

/* Respect reduced-motion: the fill transition is subtle but honour the pref. */
[data-honey]::before { transition: background .4s ease; }
@media (prefers-reduced-motion: reduce) {
  [data-honey]::before { transition: none; }
}