/* ============================================================================
   Film Dial — styles
   ----------------------------------------------------------------------------
   A 24-hour "how much of the film have you watched" dial.

   The widget is built from a few stacked layers, all inside `.fd-root`:

     1. .fd-goo (×2)   The soft "blob" background — a dark disc with a toggle
                       nub that melts into it (SVG goo filter). One layer paints
                       the light border, the layer on top paints the dark fill.
     2. .fd-dial       A crisp SVG: the ring/track, watched arcs, hour ticks,
                       numerals and the little completeness donut below centre.
     3. .fd-hand       A crisp SVG holding just the current-time needle (kept in
                       its own layer so it can spin without the ring rebuild
                       interrupting it).
     4. .fd-toggle     The AM / PM switch, sitting on the nub.
     5. tooltips       Small floating chips shown on hover.

   ORIENTATION
     The nub (goo tab) and the toggle share the same per-orientation position:
        portrait  → BELOW the dial, horizontal pill
        landscape → TOP-LEFT of the dial, vertical pill
     Switching orientation just swaps the .fd-root--* class; the left/top/
     width/height transitions (plus the goo filter) morph one into the other.

   THEMING
     Override these on .fd-root (or a parent) to re-theme without touching JS:
        --fd-accent   hand / "complete" colour  (default pale yellow)
   ========================================================================== */

.fd-root {
  --fd-accent: #fcf3ac;
  --fd-size: 236px;          /* diameter of the dial disc */
  --fd-track: #242424;       /* unwatched part of the ring */

  position: relative;
  box-sizing: border-box;
  width: var(--fd-size);
  height: var(--fd-size);
  flex: none;
  color: #f2f2f2;
  font-family: 'Jost', ui-sans-serif, sans-serif;
  /* Nub + tooltips live outside the square, so never clip. */
  overflow: visible;
  /* Collapse / expand size morph. `transform` carries the collapse anchor
     (see --fd-tx / --fd-ty, set from JS) so the puck can sit at any corner of
     the expanded dial rather than always staying concentric. */
  transform: translate(var(--fd-tx, 0px), var(--fd-ty, 0px));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed = a small "puck" (just the ring). See .fd-dial rules below. */
.fd-root--collapsed {
  --fd-size: 32px;
  cursor: pointer;
}

/* Everything that only belongs to the expanded state fades out when collapsed. */
.fd-collapsible {
  transition: opacity 0.32s ease;
}
.fd-root--collapsed .fd-collapsible {
  opacity: 0;
  pointer-events: none;
}

/* Applied for one forced-layout frame when a change must NOT animate
   (e.g. placing the nub on init). */
.fd-no-anim, .fd-no-anim * { transition: none !important; }

/* ---------------------------------------------------------------------------
   1. Blob background (goo layers)
   --------------------------------------------------------------------------- */
.fd-goo {
  position: absolute;
  inset: 0;
  /* filter: url(#fd-goo-<id>) is set inline per-instance in JS. */
  pointer-events: none;
}
.fd-goo-disc {
  position: absolute;
  border-radius: 50%;
}
/* Border layer (behind): slightly larger + lighter → shows as a thin rim. */
.fd-goo--border .fd-goo-disc { inset: 0; background: #303030; }
.fd-goo--border .fd-tab { background: #303030; }
/* Fill layer (front): inset ~1.5px + near-black → covers the interior. */
.fd-goo--fill .fd-goo-disc { inset: 1.5px; background: #050505; }
.fd-goo--fill .fd-tab { background: #050505; }

/* The nub (goo tab) and the toggle share the same per-orientation centre;
   both are centred on their left/top point, so animating left/top/width/
   height morphs the nub smoothly between orientations. */
.fd-tab, .fd-toggle {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: left  0.62s cubic-bezier(0.5, 0, 0.15, 1),
              top   0.62s cubic-bezier(0.5, 0, 0.15, 1),
              width 0.62s cubic-bezier(0.5, 0, 0.15, 1),
              height 0.62s cubic-bezier(0.5, 0, 0.15, 1);
}
/* portrait: nub below the dial (its top edge kisses the disc). */
.fd-root--portrait .fd-tab,
.fd-root--portrait .fd-toggle { left: 50%; top: calc(50% + 134px); }
/* landscape: nub at the top-left; its lower-right corner melts into the disc. */
.fd-root--landscape .fd-tab,
.fd-root--landscape .fd-toggle { left: calc(50% - 133px); top: calc(50% - 76px); }

/* Tab sizes = toggle + padding (fill), + a bit more (border → thin rim). */
.fd-tab { border-radius: 18px; }
.fd-root--portrait  .fd-goo--fill   .fd-tab { width: 81px; height: 50px; }
.fd-root--portrait  .fd-goo--border .fd-tab { width: 84px; height: 53px; }
.fd-root--landscape .fd-goo--fill   .fd-tab { width: 50px; height: 81px; }
.fd-root--landscape .fd-goo--border .fd-tab { width: 53px; height: 84px; }

/* ---------------------------------------------------------------------------
   2 + 3. Crisp SVG layers (ring + hand)
   --------------------------------------------------------------------------- */
.fd-dial, .fd-hand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fd-hand { pointer-events: none; }
.fd-dial svg, .fd-hand svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Soft shadow so the hand reads as floating over the ring. */
.fd-hand svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)); }

/* ---------------------------------------------------------------------------
   4. AM / PM toggle switch (sits on the nub; see .fd-tab for its position)
   --------------------------------------------------------------------------- */
.fd-toggle {
  box-sizing: border-box;
  border-radius: 10px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.10);
  pointer-events: auto;
  cursor: pointer;
}
.fd-root--portrait  .fd-toggle { width: 65px; height: 34px; }
.fd-root--landscape .fd-toggle { width: 34px; height: 65px; }

/* The dark sliding thumb: a narrow bar that covers the inactive glyph's slot.
   AM parks it at the bottom/right, PM at the top/left. Snappy easing. */
.fd-toggle-thumb {
  position: absolute;
  box-sizing: border-box;
  border-radius: 6px;
  background: #020202;
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: left 0.34s cubic-bezier(0.5, 1.55, 0.45, 1),
              top  0.34s cubic-bezier(0.5, 1.55, 0.45, 1),
              width 0.34s ease, height 0.34s ease;
}
.fd-root--portrait .fd-toggle-thumb {
  top: 2px; width: 17px; height: 28px;
  left: calc(100% - 19px);                 /* AM: right end */
}
.fd-root--portrait.fd-root--pm .fd-toggle-thumb { left: 2px; }   /* PM: left end */
.fd-root--landscape .fd-toggle-thumb {
  left: 2px; width: 28px; height: 17px;
  top: calc(100% - 19px);                  /* AM: bottom end */
}
.fd-root--landscape.fd-root--pm .fd-toggle-thumb { top: 2px; }   /* PM: top end */

/* Glyph slots: sun (AM) at the left/top, moon (PM) at the right/bottom. Only
   the current half's glyph is lit; the thumb covers the other slot anyway. */
.fd-toggle-ico {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fd-root--portrait  .fd-toggle-ico--sun  { left: 0;  top: 0; bottom: 0; width: 44px; }
.fd-root--portrait  .fd-toggle-ico--moon { right: 0; top: 0; bottom: 0; width: 44px; }
.fd-root--landscape .fd-toggle-ico--sun  { top: 0;    left: 0; right: 0; height: 44px; }
.fd-root--landscape .fd-toggle-ico--moon { bottom: 0; left: 0; right: 0; height: 44px; }
.fd-root:not(.fd-root--pm) .fd-toggle-ico--sun { opacity: 1; }
.fd-root--pm .fd-toggle-ico--moon { opacity: 1; }
/* Soft halo behind the lit glyph (the design's glow at the glyph end). */
.fd-toggle-ico::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), transparent);
}
.fd-toggle-ico svg { display: block; }

/* ---------------------------------------------------------------------------
   5. Tooltips
   --------------------------------------------------------------------------- */
/* Shared chip look. */
.fd-chip {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.85);
  z-index: 60;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.fd-chip--show { opacity: 1; }

/* Segment tooltip: an eye icon (open = watched, closed = not seen) over a
   time range. No words — the icon carries the meaning. */
.fd-tip-seg {
  transform: translate(-50%, -122%);
  padding: 10px 16px 8px;
  text-align: center;
  min-width: 96px;
}
.fd-tip-seg-eye {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.fd-tip-seg-time {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #ececec;
  white-space: nowrap;
}

/* Completeness tooltip: big light percentage, with the decimal and the % sign
   stacked in a small column at its top right. */
.fd-tip-pct {
  transform: translate(-50%, -122%);
  padding: 8px 15px 9px;
  display: flex;
  align-items: flex-start;
}
.fd-tip-pct-int {
  font-size: 42px;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: #f6f6f6;
}
.fd-root--complete .fd-tip-pct-int { color: var(--fd-accent); }
.fd-tip-pct-sup {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.05;
  color: #cfcfcf;
}
.fd-tip-pct-dec { display: block; }
.fd-tip-pct-sign { display: block; }

/* ---------------------------------------------------------------------------
   Close affordance (subtle; appears on hover of the expanded dial)
   --------------------------------------------------------------------------- */
.fd-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #b8b8b8;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 70;
}
/* Only when expanded — never show the close affordance on the tiny puck. */
.fd-root:not(.fd-root--collapsed):hover .fd-close { opacity: 0.85; }
.fd-root--collapsed .fd-close { display: none; }

/* Full-surface click target used ONLY while collapsed, to expand again. */
.fd-hit {
  position: absolute;
  inset: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  display: none;
}
.fd-root--collapsed .fd-hit { display: block; }