/* Renoox products (#group) — the product wheel (markup from wheel.js), after
   the "Product Wheel" design of 2026-10-06: the frame turns the design's warm
   near-black, the list of products runs down the left and the drum of cards
   turns in 3D on the right. Archivo for the big names, IBM Plex Mono for the
   rest, Renoox gold as the one accent; the cards take gold, dark and cream in
   turn. wheel.js sets the drum's measurements (--w-cw, --w-ch, --w-k: card
   width, height, and their scale against the drawn 288px card) on the stage.
   Up to 760px wide the list becomes a row of chips above the wheel. Behind it
   all, the walk through the house (.wheel-film), darkened so the list and the
   cards read over it. */

#space.wheel-on {
  --side: clamp(270px, 22vw, 320px); /* the list's column; Oxie, his chat and the hint stand right of it */
  background: #0f0c09;
}

.wheel {
  --w-gold: #e3ba36;
  --w-ink: #14100b;
  --w-paper: #f3e6d0;
  --w-muted: #8c8072;
  --w-soft: #b8ac9c;
  --w-well: #1c1712;
  --w-rule: #3a3127;
  position: absolute;
  inset: 0;
  z-index: 10; /* over the frame, under the corner brackets, the warp buttons, the hint and Oxie */
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  color: var(--w-paper);
  font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
}
.wheel[hidden] { display: none; }
.wheel-side, .wheel-main { position: relative; z-index: 1; } /* over the film */
.wheel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── The walk behind the cards (wheel.js scrubs it as the wheel turns) ──── */
.wheel-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0f0c09;
  transition: opacity .26s ease; /* the fade when the walk starts again */
}
.wheel-film.is-cut { opacity: 0; }
.wheel-film-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.wheel-film-video::-webkit-media-controls, .wheel-film-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } /* no play badge on iPhones in Low Power Mode */
/* near-solid behind the list, the house showing through behind the wheel, darker again at the foot for the hint and Oxie */
.wheel-film::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 12, 9, .45) 0, rgba(15, 12, 9, 0) 20%, rgba(15, 12, 9, 0) 70%, rgba(15, 12, 9, .75) 100%),
    linear-gradient(90deg, #0f0c09 0, rgba(15, 12, 9, .9) calc(var(--side) - 30px), rgba(15, 12, 9, .5) calc(var(--side) + 220px), rgba(15, 12, 9, .36) 75%, rgba(15, 12, 9, .5) 100%);
}

/* ── The list ────────────────────────────────────────────────────────── */
.wheel-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  min-height: 0;
  padding: 72px 20px 20px 28px; /* the top clears HOME and the warp button */
}
.wheel-head { display: flex; flex-direction: column; gap: 10px; }
.wheel-count { font-size: 12px; letter-spacing: 3px; color: var(--w-muted); }
.wheel-title {
  margin: 0;
  font-family: 'Archivo', 'Arial Black', ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--w-paper);
}
.wheel-sub { font-size: 13px; line-height: 1.6; color: var(--w-soft); }
.wheel-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wheel-list {
  position: relative; /* the rows' offsetTop is measured from here (wheel.js keepInView) */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--w-rule) transparent;
}
/* rows share the column's height: the drawn 44px at most, 30px at the least, then the list scrolls */
.wheel-list li { flex: 1 1 0; display: flex; min-height: 30px; max-height: 44px; }
.wheel-pick {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--w-paper);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.wheel-pick:hover { background: rgba(28, 23, 18, .7); color: #fff; }
.wheel-pick[aria-current="true"] { background: var(--w-well); color: var(--w-gold); border-left-color: var(--w-gold); }
.wheel-pick:focus-visible { outline: 2px solid var(--w-gold); outline-offset: -2px; }
.wheel-pick-num { min-width: 22px; font-weight: 400; color: var(--w-muted); }
.wheel-pick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wheel-pick-soon { font-size: 10px; letter-spacing: 1.5px; color: var(--w-muted); }

/* ── The wheel ───────────────────────────────────────────────────────── */
.wheel-main { position: relative; min-width: 0; min-height: 0; }
.wheel-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1800px; /* wheel.js scales it with the cards */
  perspective-origin: 50% 50%;
  touch-action: none; /* a swipe here turns the wheel instead of scrolling the page */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  outline: none;
}
.wheel-stage.is-dragging { cursor: grabbing; }
.wheel-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--w-gold); }
.wheel-drum {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.wheel-card {
  --c-bg: var(--w-well);
  --c-fg: var(--w-paper);
  --c-line: var(--w-rule);
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  width: var(--w-cw, 480px);
  height: var(--w-ch, 288px);
  padding: calc(22px * var(--w-k, 1)) calc(24px * var(--w-k, 1));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(8px * var(--w-k, 1));
  /* No overflow: hidden here — in Chrome 15x an overflow-clipped card in this
     3D drum stops answering the mouse (a hit-test falls through to the stage),
     which left OPEN dead. The pieces inside clip themselves where they must. */
  color: var(--c-fg);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease, box-shadow .3s;
}
.wheel-card.is-gold { --c-bg: var(--w-gold); --c-fg: var(--w-ink); --c-line: rgba(20, 16, 11, .35); }
.wheel-card.is-cream { --c-bg: var(--w-paper); --c-fg: var(--w-ink); --c-line: rgba(20, 16, 11, .25); }
.wheel-card.is-front, .wheel-card.is-near { pointer-events: auto; cursor: pointer; }
.wheel-card.is-front.is-soon { cursor: default; }
.wheel-card.is-hot { box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 3px #f3d843, 0 0 44px rgba(243, 216, 67, .5); }

.wheel-card-top, .wheel-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: max(9px, calc(11px * var(--w-k, 1)));
  letter-spacing: 2px;
}
.wheel-card-brand { font-weight: 600; }
.wheel-card-num { opacity: .7; }
.wheel-card-mid { display: flex; flex-direction: column; gap: calc(10px * var(--w-k, 1)); min-height: 0; }
.wheel-card-name {
  margin: 0;
  font-family: 'Archivo', 'Arial Black', ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
  font-size: calc(52px * var(--w-k, 1));
  line-height: .92;
  letter-spacing: calc(-1.5px * var(--w-k, 1));
  text-transform: uppercase;
}
.wheel-card-line {
  margin: 0;
  max-width: calc(340px * var(--w-k, 1));
  font-size: max(11px, calc(13px * var(--w-k, 1)));
  line-height: 1.5;
  opacity: .85;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wheel-card-foot { letter-spacing: 1.5px; padding-top: calc(12px * var(--w-k, 1)); border-top: 1px solid var(--c-line); }
.wheel-card-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75; }
.wheel-soon { font-weight: 600; white-space: nowrap; }
.wheel-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: max(30px, calc(36px * var(--w-k, 1)));
  padding: 0 12px;
  color: var(--c-bg);
  background: var(--c-fg);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-drag: none;
  transition: gap .15s;
}
.wheel-open svg { width: 14px; height: 14px; stroke-width: 2.2; }
.wheel-open:hover { gap: 12px; }
.wheel-open:focus-visible { outline: 2px solid var(--c-fg); outline-offset: 3px; }
/* a small phone: the cards drop their top line and keep the pitch to one line */
.wheel-stage.is-compact .wheel-card-top { display: none; }
.wheel-stage.is-compact .wheel-card-line { -webkit-line-clamp: 1; }

.wheel-arrows {
  position: absolute;
  right: 24px;
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(-50%);
}
.wheel-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--w-paper);
  background: rgba(15, 12, 9, .55);
  border: 1px solid var(--w-paper);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.wheel-arrow:hover { color: var(--w-ink); background: var(--w-gold); border-color: var(--w-gold); }
.wheel-arrow:focus-visible { outline: 2px solid var(--w-gold); outline-offset: 2px; }

/* the turning animation stays off while a finger drags, and for a resize */
.wheel-stage.is-dragging .wheel-drum, .wheel-stage.is-dragging .wheel-card,
.wheel-stage.is-still .wheel-drum, .wheel-stage.is-still .wheel-card { transition: none; }

/* ── The frame's own pieces while the wheel is up ─────────────────────── */
@media (min-width: 761px) {
  /* Oxie stands in the bottom-right corner, right of the wheel; his chat opens beside him */
  #space.wheel-on .oxie { left: auto; right: 22px; }
  #space.wheel-on .chat { left: auto; right: 130px; width: min(360px, calc(100% - var(--side) - 150px)); }
  /* the arrows stay above him in a short window */
  .wheel-arrows { top: min(50%, calc(100% - 262px)); }
  /* the hint line runs under the wheel, as drawn, on a dark strip so the cards passing behind don't muddle it */
  #space.wheel-on .hint {
    left: calc(var(--side) + 24px);
    right: 140px; /* clear of Oxie */
    bottom: 14px;
    width: fit-content;
    margin: 0 auto;
    padding: 5px 12px;
    background: rgba(15, 12, 9, .9);
    border: 1px solid #3a3127;
    text-align: center;
    font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #8c8072;
  }
  #space.wheel-on .hint b { font-weight: 600; color: #b8ac9c; }
}
@media (min-width: 761px) and (max-width: 1149px) { #space.wheel-on #hint-text { display: none; } } /* no room for the line: keep the About link */

/* ── Short windows (laptops): a smaller heading and no blurb, so all twelve rows fit ── */
@media (min-width: 761px) and (max-height: 820px) {
  .wheel-side { padding-top: 66px; gap: 14px; }
  .wheel-title { font-size: 34px; }
  .wheel-sub { display: none; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .wheel-side { padding-top: 62px; padding-bottom: 12px; gap: 12px; }
  .wheel-head { gap: 6px; }
  .wheel-title { font-size: 28px; }
  .wheel-list li { min-height: 26px; }
  .wheel-pick { font-size: 12px; }
}

/* ── Phones and narrow windows: the list is a row of chips above the wheel ── */
@media (max-width: 760px) {
  .wheel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .wheel-side { gap: 10px; padding: 62px 14px 6px; }
  .wheel-head { gap: 4px; }
  .wheel-title { font-size: 26px; letter-spacing: -.5px; }
  .wheel-sub { font-size: 12px; line-height: 1.5; }
  .wheel-list { flex: 0 0 auto; flex-direction: row; gap: 6px; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scrollbar-width: none; }
  .wheel-list::-webkit-scrollbar { display: none; }
  .wheel-list li { flex: 0 0 auto; min-height: 0; max-height: none; }
  .wheel-pick { min-height: 40px; gap: 8px; border: 1px solid var(--w-rule); border-left-width: 3px; }
  .wheel-pick[aria-current="true"] { border-color: var(--w-rule); border-left-color: var(--w-gold); }
  .wheel-pick-name { overflow: visible; }
  .wheel-arrows { top: auto; bottom: 12px; right: 12px; flex-direction: row; transform: none; }
  .wheel-film::after { background: linear-gradient(180deg, #0f0c09 0, rgba(15, 12, 9, .9) 170px, rgba(15, 12, 9, .34) 330px, rgba(15, 12, 9, .3) 75%, rgba(15, 12, 9, .7) 100%); }
}
@media (max-width: 640px) { .wheel-side { padding-top: 46px; } } /* the warp buttons are smaller here */
@media (max-width: 760px) and (max-height: 700px) { .wheel-sub { display: none; } } /* a short phone: room for the wheel */

@media (prefers-reduced-motion: reduce) {
  .wheel-drum, .wheel-card, .wheel-pick, .wheel-arrow, .wheel-open { transition: none; }
}