/* ===========================================================================
   Next-task highlight (design spec §5.1)

   Opt-in, from the Profile page. When it is on, exactly one element glows: the
   spotlight while a task is running, otherwise the top card in Now. The board's
   root carries two attributes (NextTaskHighlight.cs):

     data-hf-highlight  colour | motion   absent = off
     data-hf-palette    berry | sunset | neon | ocean | rainbow

   and the glowing element carries .hf-next plus two decorative children:
   .hf-next-glow (the ring) and, on a Now card, .hf-next-tab ("Up next").

   The ring is its own absolutely positioned element, never the card's border,
   so turning the highlight on or moving it to another card changes no layout:
   the card keeps its size encoding (fill, left accent bar, padding) untouched.

   Rules the look has to keep (spec §5.1):
   - Never amber. Amber is the spotlight timer's (§8), and no palette uses it.
   - Never colour alone. The "Up next" tag says it in words, for colour-blind
     readers and screen readers alike.
   - Contrast. Each ring ends on a dark stop at 3:1 or better against the cream
     page, and the tag's white text sits on that stop at 5.6:1 or better. The
     bright stops alone are not enough (Neon's cyan is 1.4:1 on cream).
   - Slow motion only, far from the 3-flashes-a-second limit: the ring turns
     once every 6s and the halo breathes once every 4s.
   - Motion settles after 5 minutes on the same element (50 turns, 75 breaths)
     and starts again only when the glow moves. Reduced motion stops it outright.
   =========================================================================== */

@property --hf-next-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ---------------------------------------------------------------------------
   Palettes. Set on whichever element carries the attribute (the board's root,
   the Profile preview, or a palette swatch) and inherited from there.
   --------------------------------------------------------------------------- */
[data-hf-palette="berry"] {
  --hf-next-ring: #FF4FA3, #A855F7, #5B21B6, #FF4FA3;
  --hf-next-halo: rgba(255, 79, 163, 0.28);
  --hf-next-glow: rgba(168, 85, 247, 0.45);
  --hf-next-tag: #5B21B6;
}

[data-hf-palette="sunset"] {
  --hf-next-ring: #FF4E6A, #FF8A5B, #C2185B, #FF4E6A;
  --hf-next-halo: rgba(255, 78, 106, 0.28);
  --hf-next-glow: rgba(255, 138, 91, 0.45);
  --hf-next-tag: #C2185B;
}

[data-hf-palette="neon"] {
  --hf-next-ring: #00E5FF, #FF2BD6, #7B2FF7, #00E5FF;
  --hf-next-halo: rgba(0, 229, 255, 0.28);
  --hf-next-glow: rgba(255, 43, 214, 0.45);
  --hf-next-tag: #7B2FF7;
}

[data-hf-palette="ocean"] {
  --hf-next-ring: #00C2A8, #0096C7, #023E8A, #00C2A8;
  --hf-next-halo: rgba(0, 194, 168, 0.28);
  --hf-next-glow: rgba(0, 150, 199, 0.45);
  --hf-next-tag: #023E8A;
}

/* The orange stop is a rainbow's orange, not the timer's muted amber (#C89848). */
[data-hf-palette="rainbow"] {
  --hf-next-ring: #FF3B3B, #FF9F1C, #FFE14D, #2EC4B6, #3A86FF, #8338EC, #FF3B3B;
  --hf-next-halo: rgba(255, 59, 59, 0.28);
  --hf-next-glow: rgba(255, 159, 28, 0.45);
  --hf-next-tag: #8338EC;
}

/* ---------------------------------------------------------------------------
   The glowing element: a halo around it. The selectors are deliberately
   specific (0,5,0 on a Now card) so they outrank the size-density rules and
   the hover lift in timeline.css, which both set box-shadow.
   --spread is how far the halo starts from the element's edge: past the
   outside ring on a card, at the edge in the spotlight (whose ring sits inside
   it, because .spotlight clips anything outside its box).
   --------------------------------------------------------------------------- */
.timeline[data-hf-highlight] .section-now .task.hf-next,
.hf-next-preview[data-hf-highlight] .hf-next {
  --hf-next-spread: 6px;
  position: relative;
  box-shadow: 0 0 0 var(--hf-next-spread) var(--hf-next-halo), 0 6px 20px var(--hf-next-glow);
}

.timeline[data-hf-highlight] .spotlight.hf-next {
  --hf-next-spread: 3px;
  box-shadow: 0 0 0 var(--hf-next-spread) var(--hf-next-halo), 0 6px 20px var(--hf-next-glow);
}

/* Breathing halo. Skipped while a card plays timeline.css's own drop or swipe
   animation, which this would otherwise replace. */
.timeline[data-hf-highlight="motion"] .section-now .task.hf-next:not(.task-just-dropped):not(.task-swipe-complete),
.timeline[data-hf-highlight="motion"] .spotlight.hf-next,
.hf-next-preview[data-hf-highlight="motion"] .hf-next {
  animation: hf-next-breathe 4s ease-in-out 75;
}

/* ---------------------------------------------------------------------------
   The ring: a conic gradient hollowed out by a mask, 3px thick. Outside the
   card on a Now card, inside the edge on the spotlight.
   --------------------------------------------------------------------------- */
.hf-next-glow {
  position: absolute;
  inset: -3px;
  padding: 3px;
  border-radius: 13px;
  pointer-events: none;
  background: conic-gradient(from var(--hf-next-angle), var(--hf-next-ring));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: hf-next-arrive 0.5s ease-out;
}

/* An absolute inset is measured from the padding edge, not the border edge, so each
   card's own border (timeline.css size-density rules: 1px all round, plus a thicker
   left accent from Short up) is added to put the ring 3px outside the border box.
   Re-check these if a size's border ever changes. */
.task.size-quick.hf-next > .hf-next-glow { inset: -4px; }
.task.size-short.hf-next > .hf-next-glow,
.hf-next-sample.hf-next > .hf-next-glow { inset: -4px -4px -4px -6px; }
.task.size-solid.hf-next > .hf-next-glow { inset: -4px -4px -4px -7px; }
.task.size-deep.hf-next > .hf-next-glow { inset: -4px -4px -4px -9px; }

/* Inside the spotlight's edge: .spotlight clips its children to its padding box. */
.spotlight .hf-next-glow {
  inset: 0;
  border-radius: 13px;
}

[data-hf-highlight="motion"] .hf-next-glow {
  animation: hf-next-arrive 0.5s ease-out, hf-next-turn 6s linear 50;
}

/* ---------------------------------------------------------------------------
   "Up next": sits on the card's top edge, out of the flow, so the card does
   not grow when it arrives. White on the palette's darkest stop.
   --------------------------------------------------------------------------- */
.hf-next-tab {
  position: absolute;
  top: -0.72rem;
  left: 0.9rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.14rem 0.55rem 0.14rem 0.45rem;
  border-radius: 999px;
  background: var(--hf-next-tag);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  animation: hf-next-arrive 0.5s ease-out;
}

.hf-next-tab svg {
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;
}

@keyframes hf-next-turn {
  to { --hf-next-angle: 360deg; }
}

@keyframes hf-next-breathe {
  50% {
    box-shadow: 0 0 0 calc(var(--hf-next-spread) + 4px) var(--hf-next-halo), 0 8px 30px var(--hf-next-glow);
  }
}

@keyframes hf-next-arrive {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hf-next-glow,
  .hf-next-tab,
  [data-hf-highlight] .hf-next {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Profile page: palette swatches and the live preview card.
   --------------------------------------------------------------------------- */
.hf-next-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.hf-next-swatch {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  vertical-align: -0.1rem;
  background: conic-gradient(var(--hf-next-ring));
}

/* Surprise me: every palette at once. */
.hf-next-swatch.is-surprise {
  background: conic-gradient(#FF4E6A, #00E5FF, #00C2A8, #A855F7, #FFE14D, #FF4E6A);
}

/* Room above for the tag and around for the halo, so neither is clipped by the card. */
.hf-next-preview {
  padding: 1.15rem 0.6rem 1.4rem;
}

/* A stand-in for the top card in Now (timeline.css: Short size, first position). */
.hf-next-sample {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.5rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: var(--stone-100);
  border: 1px solid var(--stone-200);
  border-left: 3px solid var(--stone-300);
  color: var(--ink-primary);
  font-size: 1.05rem;
  font-weight: 700;
}

.hf-next-sample-circle {
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--stone-400);
}

.hf-next-sample-title {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}