/**
 * Rotary timeline.
 *
 * Geometry is written by dial.js from the measured region; this file carries
 * only appearance and the drag surface's interaction properties.
 */

.dial {
  position: absolute;
  inset: 0;
}

.dial__canvas {
  position: absolute;
  inset: 0;
  display: block;
}

/**
 * Solid ground for the wheel.
 *
 * The ticks are drawn at 10-32% white, which only reads against a known dark
 * surface -- over the backdrop artwork they land on whatever happens to be
 * behind them. Sized to the outer ring, so that ring becomes the disc's rim.
 */
.dial__disc {
  fill: var(--surface-app);
}

.dial__ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}

.dial__ring--inner {
  stroke: rgba(255, 255, 255, 0.06);
}

/* One path per tick style, rotated as a single group. */
.dial__ticks {
  will-change: transform;
}

.dial__tick {
  fill: none;
  stroke-linecap: round;
}

/* Outer band: dated, one tick every couple of days, meeting the outer ring. */
.dial__tick--day {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 0.8;
}

/* Every fourth one, so the band can be counted rather than just scanned. */
.dial__tick--day-accent {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 0.8;
}

/* Inner bands: geometric and deliberately coarser than the outer. */
.dial__tick--fine {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 0.7;
}

.dial__tick--coarse {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 0.9;
}

.dial__hub {
  fill: var(--accent);
}

/* Fixed marker the wheel rotates against. */
.dial__needle {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}

/**
 * Drag surface. touch-action:none is required, or the browser claims the
 * gesture for scrolling and pull-to-refresh before the pointer handlers see
 * enough of it.
 */
.dial__surface {
  position: absolute;
  left: 0;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.dial__surface.is-dragging {
  cursor: grabbing;
}