/* ====================================================================
   Shared marker — radio-style circle, progress ring, checkmark, lock.

   Used by both .quest-card (whole-card press) and .sub-quest-row
   (per-sub press) so the visual atom is defined exactly once.

   The parent context provides four size variables and applies state
   classes (`.is-pressing`, `.is-done`, optionally `.is-marker-glowing`)
   that the marker reads via descendant selectors.

     --marker-size : the button's outer footprint (click target)
     --circle-size : the visible outlined/filled circle
     --ring-size   : the long-press progress ring SVG box
     --check-size  : the checkmark glyph shown when done

   The ring SVG uses `pathLength="100"` so the dasharray/dashoffset
   values here are size-independent (100 = full circumference).
   ==================================================================== */

/* Layout-only on the base; chrome + interactivity attaches to the button
   form so non-interactive variants (locked, completed) stay neutral. */
.marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  width: var(--marker-size);
  height: var(--marker-size);
}

button.marker {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--pad, var(--color-primary));
}

button.marker[disabled] { cursor: default; }

/* button_to wraps the marker in a <form>; flatten with `display: contents`
   so the inner <button> participates directly in the parent's layout. */
.marker__form { display: contents; }

/* ---- Check variant: outlined circle that fills on done ---- */

.marker--check::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  border: 2px solid var(--color-secondary);
  background: var(--color-card);
  transition: background 200ms ease, border-color 200ms ease;
  box-sizing: border-box;
}

/* Extend the click target beyond the visible circle for easy tapping. */
.marker--check::after {
  content: "";
  position: absolute;
  inset: -0.5rem;
}

/* Hover the marker itself */
.marker--check:not([disabled]):hover::before {
  border-color: var(--pad, var(--color-primary));
}

/* Hover the entire row/card (sub-quest rows treat the whole row as the
   press target, so visual feedback follows). */
.sub-quest-row--available:hover .marker--check:not([disabled])::before {
  border-color: var(--pad, var(--color-primary));
}

/* Press state — set by the press-and-hold controllers on the ancestor */
.is-pressing .marker--check::before {
  border-color: var(--pad, var(--color-primary));
  background: color-mix(in srgb, var(--pad, var(--color-primary)) 10%, var(--color-card));
}

/* Done state — filled circle */
.is-done .marker--check::before {
  background: var(--pad, var(--color-primary));
  border-color: var(--pad, var(--color-primary));
}

/* Completion pulse — only fired by .quest-card via .is-marker-glowing. */
.is-marker-glowing .marker--check::before {
  animation: marker-glow 450ms ease-out;
}

@keyframes marker-glow {
  0%   { box-shadow: 0 0 0 0 transparent; }
  30%  { box-shadow: 0 0 25px 0 color-mix(in srgb, var(--color-primary) 80%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- Lock variant: muted padlock icon, no ::before circle ---- */

.marker--lock {
  color: var(--color-muted-fg);
  cursor: default;
}

.marker__lock-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-muted-fg);
}

/* ---- Progress ring (long-press) ---- */

.marker__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ring-size);
  height: var(--ring-size);
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
  overflow: visible;
}

.marker__ring-track,
.marker__ring-progress {
  fill: none;
  stroke-width: 2;
}

.marker__ring-track { stroke: transparent; }

/* `stroke: transparent` while idle is intentional — at `dashoffset = pathLength`
   the visible stroke length is zero, but the two round end-caps overlap on
   the start point and render as a tiny dot. Keeping the stroke transparent
   suppresses that dot; the stroke only takes its colour while the user is
   actively pressing. */
.marker__ring-progress {
  stroke: transparent;
  stroke-linecap: round;
  /* pathLength="100" on the <circle> normalizes the path length so the
     dasharray/dashoffset values below are size-independent. */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0ms linear;
}

/* Match HOLD_MS in quest_card_controller.js — the ring must finish filling
   at the moment the form is submitted. */
.is-pressing .marker__ring-progress {
  stroke: var(--pad, var(--color-primary));
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 800ms linear;
}

/* ---- Checkmark glyph overlay ---- */

.marker__check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--check-size);
  height: var(--check-size);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.is-done .marker__check { opacity: 1; }