/* Argon v2 — Builds view UI styles: tally, wheel, mobile wheel (Task C) */

/* Tally (desktop) */
.tally {
  position: absolute;
  left: 20px;
  bottom: 71px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}

.tally-label,
.tally-views,
.tally-loop-label {
  position: relative;
  z-index: 2;
}

.tally-count {
  position: relative;
  margin-top: 14px;
}

.tally-num {
  display: inline-block;
  position: relative;
  z-index: 2;
  margin-left: -6px;
}

.tally-d {
  display: block;
}

.tally-total {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: calc(100% + 10px);
  white-space: nowrap;
}

.tally-views {
  margin-top: 12px;
}

.tally-loop {
  margin-top: 11px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ticks {
  display: flex;
  gap: 4px;
}

.tick {
  position: relative;
  z-index: 2;
  width: 14px;
  height: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
  mix-blend-mode: difference;
}

.tick.is-active {
  background: var(--accent);
  box-shadow: none;
  mix-blend-mode: normal;
}

html[data-route-busy] .tick:not(.is-active) {
  mix-blend-mode: normal;
}

/* Wheel (desktop) */
.wheel {
  --wheel-left: min(calc(1020 / 1440 * 100vw), calc(100vw - 366px));
  position: absolute;
  top: 0;
  left: var(--wheel-left);
  width: 400px;
  max-width: calc(100vw - var(--wheel-left));
  height: 100vh;
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 4.4%, #000 33%, #000 69%, transparent 98%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 4.4%, #000 33%, #000 69%, transparent 98%);
}

.wheel-list {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wheel-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 262px;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform, opacity, filter;
}

.wheel-title {
  margin-top: 8px;
}

.wheel-rule {
  display: block;
  width: 14px;
  height: 1px;
  background: var(--ink);
  margin-top: 10px;
}

.wheel-blurb {
  margin-top: 10px;
}

.swatches {
  position: absolute;
  left: 296px;
  top: 0;
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.swatch {
  width: 14px;
  height: 14px;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Mobile wheel block (hidden at desktop) */
.wheel-m {
  display: none;
}

.swatch-m:nth-child(1) {
  background: var(--b1-a);
}

.swatch-m:nth-child(2) {
  background: var(--b1-b);
}

.swatch-m:nth-child(3) {
  background: var(--b1-c);
}

/* Narrow builds UI */
@media (max-width: 1099.98px) {
  .wheel {
    display: none;
  }

  .tally {
    top: 70px;
    bottom: auto;
    left: 16px;
  }

  .tally-label {
    display: none;
  }

  .tally-count {
    margin-top: 0;
  }

  .tally-num {
    margin-left: -3px;
  }

  .tally-total {
    top: 6px;
    left: calc(100% + 8px);
  }

  .tally-views {
    margin-top: 8px;
    mix-blend-mode: normal;
    color: var(--ink-2);
  }

  .tally-loop {
    display: none;
  }

  .wheel-m {
    display: block;
    position: absolute;
    left: 16px;
    right: 16px;
    top: 71.6vh;
    text-align: center;
    pointer-events: none;
    z-index: 2;
  }

  .wheel-m .wheel-title {
    margin-top: 8px;
  }

  .wheel-m .wheel-blurb {
    margin: 10px auto 0;
    max-width: 300px;
  }

  .swatches-m {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
  }

  .swatch-m {
    width: 12px;
    height: 12px;
    box-shadow: inset 0 0 0 1px var(--line);
  }
}