/* vg-widgets.css — table widgets: chip rack, stepper, summary, reel, dial, meter, dock (spec §3.3–3.6, §3.16, §3.19).
   Only opacity/transform animate. No blur, no backdrop-filter, no animated shadows. All motion is one-shot. */

/* ---------- Rack ---------- */
.vg-rack { display: grid; gap: var(--vg-s-4); }
.vg-rack__set { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--vg-s-3); }
.vg-rack__legend { padding: 0; margin-bottom: var(--vg-s-3); font: 800 var(--vg-fs-sm)/1.3 var(--vg-font-body); color: var(--vg-bulb); text-transform: uppercase; letter-spacing: .04em; }

.vg-opt { --glow-o: 0; position: relative; isolation: isolate; display: grid; grid-template-columns: auto 1fr; column-gap: var(--vg-s-4); align-items: center; min-height: 72px; padding: var(--vg-s-3) var(--vg-s-4); background: var(--vg-smoke); border: 1px solid var(--vg-line); border-radius: var(--vg-r-md); color: var(--vg-bulb); cursor: pointer; font-family: var(--vg-font-body); }
.vg-opt::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px var(--vg-gold), 0 0 12px 1px var(--vg-gold-a55), 0 0 28px 6px var(--vg-gold-a25); opacity: var(--glow-o); transition: opacity var(--vg-d-ui) var(--vg-ease-out); }
.vg-opt:has(.vg-opt__input:checked) { --glow-o: 1; border-color: var(--vg-gold); }
.vg-opt:focus-within { outline: 3px solid var(--vg-bulb); outline-offset: 3px; }
.vg-opt > .vg-chip { grid-row: 1 / span 4; }
.vg-opt__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }
.vg-opt__name { font-weight: 800; font-size: var(--vg-fs-base); line-height: 1.25; }
.vg-opt__price { font-weight: 600; font-size: var(--vg-fs-base); font-variant-numeric: tabular-nums; color: var(--vg-bulb); }
.vg-opt__unit { font-size: var(--vg-fs-sm); line-height: 1.35; color: var(--vg-bulb-soft); font-variant-numeric: tabular-nums; }
.vg-opt .vg-badge { justify-self: start; margin-top: var(--vg-s-1); }

/* Chip: knurled edge, smooth face, dotted inner ring, Bungee figure. */
.vg-chip { --chip: 64px; --edge: var(--vg-chip-red); --face: var(--vg-bulb); --ink: var(--vg-ink);
  position: relative; display: grid; place-items: center; width: var(--chip); height: var(--chip); flex: none; border-radius: 50%;
  background: repeating-conic-gradient(var(--edge) 0 15deg, var(--face) 15deg 30deg); color: var(--ink);
  font: 400 1.25rem/1 var(--vg-font-marquee); font-variant-numeric: tabular-nums; transition: transform var(--vg-d-ui) var(--vg-ease-out); }
.vg-chip::before { content: ""; position: absolute; inset: 11%; border-radius: 50%; background: radial-gradient(circle, var(--face) 0 100%); }
.vg-chip::after { content: ""; position: absolute; inset: 17%; border-radius: 50%; border: 2px dotted var(--ink); opacity: .55; }
.vg-chip__qty { position: relative; z-index: 1; }
.vg-chip--bone  { --face: var(--vg-bulb); --edge: var(--vg-chip-red); --ink: var(--vg-ink); }
.vg-chip--red   { --face: var(--vg-chip-red); --edge: var(--vg-bulb); --ink: var(--vg-bulb); }
.vg-chip--green { --face: var(--vg-chip-green); --edge: var(--vg-bulb); --ink: var(--vg-bulb); }
.vg-chip--black { --face: var(--vg-smoke); --edge: var(--vg-gold); --ink: var(--vg-gold); }
.vg-chip--gold  { --face: var(--vg-gold); --edge: var(--vg-bulb); --ink: var(--vg-ink); }
.vg-chip--pink  { --face: var(--vg-pink); --edge: var(--vg-bulb); --ink: var(--vg-ink); }
.vg-opt__input:checked + .vg-chip { transform: translateY(-4px); }
.vg-chip.is-tossed { animation: vg-chip-toss 360ms var(--vg-ease-thunk); }
@keyframes vg-chip-toss {
  0% { transform: translateY(0) rotateY(0); }
  50% { transform: translateY(-10px) rotateY(180deg); }
  100% { transform: translateY(-4px) rotateY(360deg); }
}

/* Stepper */
.vg-stepper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vg-s-2); }
.vg-stepper > label { flex: 1 0 100%; font: 600 var(--vg-fs-sm)/1.3 var(--vg-font-body); color: var(--vg-bulb-soft); }
.vg-stepper button { width: 48px; height: 48px; padding: 0; border: 2px solid var(--vg-brass); border-radius: 50%; background: var(--vg-smoke); color: var(--vg-bulb); font: 800 1.5rem/1 var(--vg-font-body); cursor: pointer; transition: transform var(--vg-d-tap); }
.vg-stepper button:active { transform: scale(.97); }
.vg-stepper button:disabled { opacity: .45; cursor: not-allowed; }
.vg-stepper input { width: 84px; height: 48px; padding: 0 var(--vg-s-2); text-align: center; border: 2px solid var(--vg-brass); border-radius: var(--vg-r-md); background: var(--vg-smoke-2); color: var(--vg-bulb); font: 800 var(--vg-fs-lg)/1 var(--vg-font-body); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; transition: border-color 120ms linear; }
.vg-stepper input:focus { border-color: var(--vg-gold); outline: 3px solid var(--vg-bulb); outline-offset: 3px; }
.vg-stepper input::-webkit-outer-spin-button, .vg-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vg-stepper input:disabled { opacity: .55; }
.vg-stepper.is-off > label { opacity: .6; }
/* Without JS the +/- buttons do nothing: the native number field stays. */
html:not(.vg-js) .vg-stepper button { display: none; }

.vg-rack__summary { margin: 0; font: 800 var(--vg-fs-lg)/1.3 var(--vg-font-body); color: var(--vg-bulb); font-variant-numeric: tabular-nums; }
.vg-rack__note { margin: 0; font: 400 var(--vg-fs-sm)/1.5 var(--vg-font-body); color: var(--vg-bulb-soft); }
.vg-rack__note a { color: var(--vg-gold); text-underline-offset: 3px; }

/* Double-submit guard */
.vg-rack[aria-busy="true"] button[type="submit"] { opacity: .7; cursor: progress; }

@media (min-width: 1024px) {
  .vg-rack__set { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--vg-s-4); }
  .vg-opt { grid-template-columns: 1fr; justify-items: center; text-align: center; min-width: 156px; padding: var(--vg-s-5) var(--vg-s-4); row-gap: var(--vg-s-1); }
  .vg-opt > .vg-chip { --chip: 104px; grid-row: auto; margin-bottom: var(--vg-s-2); font-size: 1.75rem; }
  .vg-opt .vg-badge { justify-self: center; }
  .vg-rack__legend { flex: 1 0 100%; }
}

/* ---------- Phase states (§3.19) ---------- */
.vg-empty--legal, .vg-empty--before, .vg-empty--closed, .vg-empty--soldout, .vg-empty--held, .vg-empty--drawing, .vg-empty--completed { display: grid; gap: var(--vg-s-3); justify-items: start; }
.vg-empty__t { margin: 0; max-width: 60ch; font: 400 var(--vg-fs-base)/1.55 var(--vg-font-body); color: var(--vg-bulb-soft); }
.vg-table[data-vg-phase-host] > template { display: none; }

/* ---------- Reel ---------- */
.vg-reel { display: inline-block; vertical-align: bottom; font-variant-numeric: tabular-nums; }
.vg-reel.is-built { position: relative; overflow: hidden; height: 1em; line-height: 1; }
.vg-reel__win { display: inline-flex; height: 1em; overflow: hidden; vertical-align: top; }
.vg-reel__col { display: block; height: 1em; overflow: hidden; }
.vg-reel__strip { display: flex; flex-direction: column; transform: translateY(-4em); }
.vg-reel__strip > i, .vg-reel__strip > b { display: block; height: 1em; line-height: 1; font-weight: inherit; }
.vg-reel__strip > i { width: 100%; min-width: .6em; }
.vg-reel__sep { display: block; height: 1em; line-height: 1; }
.vg-reel.is-spinning .vg-reel__strip { animation: vg-reel-spin calc(var(--spin-d, 900ms) + var(--col, 0) * 70ms) var(--vg-ease-thunk) both; }
@keyframes vg-reel-spin { from { transform: translateY(0); } to { transform: translateY(-4em); } }

.vg-sym { --sym: none; background: var(--vg-bulb); -webkit-mask: var(--sym) center / 72% no-repeat; mask: var(--sym) center / 72% no-repeat; }
.vg-sym--heart, .vg-sym--diamond { background: var(--vg-red); }
.vg-sym--spade { --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c3.500 4.200 8 7 8 11a4.500 4.500 0 0 1-7.400 3.400L14 22h-4l1.400-5.600A4.500 4.500 0 0 1 4 13c0-4 4.500-6.800 8-11z'/%3E%3C/svg%3E"); }
.vg-sym--heart { --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S4 15.800 4 10a4.500 4.500 0 0 1 8-2.800A4.500 4.500 0 0 1 20 10c0 5.800-8 11-8 11z'/%3E%3C/svg%3E"); }
.vg-sym--diamond { --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l7 10-7 10-7-10z'/%3E%3C/svg%3E"); }
.vg-sym--club { --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.500a4 4 0 0 0-3 6.600A4.500 4.500 0 1 0 11 16l-1 6h4l-1-6a4.500 4.500 0 1 0 2-6.900A4 4 0 0 0 12 2.500z'/%3E%3C/svg%3E"); }

/* ---------- Meter ---------- */
.vg-meter { position: relative; height: 24px; overflow: hidden; border-radius: var(--vg-r-pill); background: var(--vg-smoke); border: 1px solid var(--vg-line); }
.vg-meter::before, .vg-meter__lit { content: ""; position: absolute; inset: 0; background: radial-gradient(circle closest-side, var(--vg-line) 0 62%, transparent 66%) 0 50% / 24px 24px repeat-x; }
.vg-meter__lit { background: radial-gradient(circle closest-side, var(--vg-bulb-core) 0 28%, var(--vg-gold) 52%, var(--vg-gold-a25) 72%, transparent 78%) 0 50% / 24px 24px repeat-x; clip-path: inset(0 calc((1 - var(--pct, 0)) * 100%) 0 0); }
.vg-meter__glint { position: absolute; inset: 0; width: 28%; visibility: hidden; background: linear-gradient(90deg, transparent, rgb(255 243 220 / .35), transparent); transform: translateX(-120%); pointer-events: none; }
.vg-meter.is-glinting .vg-meter__glint { visibility: visible; animation: vg-glint 1200ms var(--vg-ease-in-out) 1 both; }
@keyframes vg-glint { 0% { transform: translateX(-120%); opacity: 1; } 99% { opacity: 1; } 100% { transform: translateX(380%); opacity: 0; } }
.vg-meter__label { margin: var(--vg-s-2) 0 0; font: 600 var(--vg-fs-sm)/1.4 var(--vg-font-body); color: var(--vg-bulb-soft); font-variant-numeric: tabular-nums; }

/* ---------- Dial ---------- */
.vg-dial { --wheel: 176px; --slot: 9.7297deg; display: grid; justify-items: center; gap: var(--vg-s-3); }
.vg-dial__wheel { grid-area: 1 / 1; width: var(--wheel); height: var(--wheel); border-radius: 50%; border: 4px solid var(--vg-brass);
  background: conic-gradient(var(--vg-felt) 0 var(--slot), transparent 0), repeating-conic-gradient(from var(--slot), var(--vg-chip-red) 0 var(--slot), var(--vg-night) var(--slot) calc(var(--slot) * 2)); }
.vg-dial.is-settling .vg-dial__wheel { animation: vg-wheel-settle var(--vg-d-wheel) var(--vg-ease-out) 1 both; }
@keyframes vg-wheel-settle { from { transform: rotate(-540deg); } to { transform: rotate(0); } }
.vg-dial__face { grid-area: 1 / 1; place-self: center; width: calc(var(--wheel) * .64); height: calc(var(--wheel) * .64); border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--vg-smoke); border: 2px solid var(--vg-brass); color: var(--vg-bulb); }
.vg-dial__label { margin: 0; font: 600 var(--vg-fs-xs)/1.2 var(--vg-font-body); color: var(--vg-bulb-soft); text-transform: uppercase; letter-spacing: .08em; }
.vg-dial__units { margin: 2px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 2px; font: 800 1.125rem/1.2 var(--vg-font-body); font-variant-numeric: tabular-nums; color: var(--vg-bulb); }
.vg-dial__units > span { display: inline-block; min-width: 2ch; text-align: right; }
.vg-dial__units > small { margin-right: 4px; font: 600 var(--vg-fs-xs)/1 var(--vg-font-body); color: var(--vg-bulb-mute); }
.vg-dial__date { grid-column: 1; margin: 0; font: 400 var(--vg-fs-sm)/1.5 var(--vg-font-body); color: var(--vg-bulb-soft); text-align: center; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* No JS: units and face stay hidden, the printed date remains. */
.vg-dial:not(.is-live):not(.is-past) .vg-dial__face { display: none; }
.vg-dial.is-past .vg-dial__units { display: none; }

@media (min-width: 1024px) { .vg-dial { --wheel: 208px; } }

/* ---------- Dock ---------- */
.vg-dock { position: fixed; inset: auto 0 0 0; z-index: var(--vg-z-dock); display: flex; align-items: center; gap: var(--vg-s-3); padding: var(--vg-s-2) var(--vg-s-4); padding-bottom: calc(var(--vg-s-2) + env(safe-area-inset-bottom)); background: var(--vg-night); border-top: 1px solid var(--vg-brass); transform: translateY(100%); transition: transform 240ms var(--vg-ease-out); }
.vg-dock[hidden], .vg-dial__units[hidden] { display: none; }
.vg-dock.is-in { transform: translateY(0); }
.vg-dock .vg-btn { flex: none; }
.vg-dock__price { margin: 0; flex: 1; font: 600 var(--vg-fs-sm)/1.3 var(--vg-font-body); color: var(--vg-bulb-soft); text-align: right; font-variant-numeric: tabular-nums; }
.vg-dock-spacer { height: var(--vg-dock-h, 64px); }
html.vg-lite .vg-dock, html.vg-still .vg-dock { transition: none; }
@media (min-width: 1024px) { .vg-dock, .vg-dock-spacer { display: none; } }

/* Lite / still / reduced: no one-shot motion beyond the safety net in vg-motion.css. */
html.vg-lite .vg-chip.is-tossed, html.vg-still .vg-chip.is-tossed, html.vg-lite .vg-opt::after, html.vg-still .vg-opt::after { animation: none; transition: none; }