/*
 * Universal wheel primitive · tlaq.org UX language
 *
 * Renders any page as "you" at centre + spokes around an invisible outer circle.
 * Inner ring caps at 5 spokes on mobile, 8 on desktop; overflow goes to outer shell.
 *
 * Locked design rules (memory #26 #28 #29):
 *   - Every station with children is a wheel
 *   - Leaf nodes use action-spokes instead of child-spokes — same primitive
 *   - "You" icon shows Linux-pwd-style path context
 *   - User-pinned ordering (localStorage)
 *   - Distinct icons for mixed types
 *   - Mobile-first: works at 380px viewport up
 */

:root {
  --w-bg: #0A0A12;
  --w-panel: #14141C;
  --w-panel-2: #1C1C26;
  --w-ink: #C9A66B;
  --w-ink-bright: #E5C788;
  --w-muted: #8A7A4F;
  --w-hint: #6E6038;
  --w-line: #2A2030;
  --w-frame: #3A2F40;
  --w-pink: #D4A590;
  --w-pink-bg: #2E1820;
  --w-pink-dk: #E8C0B0;
  --w-teal: #B0C088;
  --w-amber: #E5C788;
  --w-spoke-size: 88px;
  --w-centre-size: 76px;
  --w-ring-1-radius: 124px;
  --w-ring-2-radius: 196px;
  --w-canvas: 380px;
}

@media (min-width: 481px) {
  :root {
    --w-spoke-size: 100px;
    --w-centre-size: 92px;
    --w-ring-1-radius: 150px;
    --w-ring-2-radius: 232px;
    --w-canvas: 520px;
  }
}

@media (min-width: 768px) {
  :root {
    --w-spoke-size: 108px;
    --w-centre-size: 100px;
    --w-ring-1-radius: 170px;
    --w-ring-2-radius: 268px;
    --w-canvas: 600px;
  }
}

.wheel-page {
  margin: 0;
  padding: 0 0 140px;
  background: var(--w-bg);
  color: var(--w-ink);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  min-height: 100vh;
}

.wheel-page * { box-sizing: border-box; }

/* breadcrumb at top */
.wheel-breadcrumb {
  background: var(--w-panel);
  border-bottom: 0.5px solid var(--w-frame);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.wheel-breadcrumb a {
  color: var(--w-pink);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 3px;
}

.wheel-breadcrumb a:hover {
  background: var(--w-pink-bg);
  color: var(--w-pink-dk);
}

.wheel-breadcrumb .sep {
  color: var(--w-hint);
  font-size: 10px;
}

.wheel-breadcrumb .here {
  color: var(--w-ink-bright);
  font-weight: 500;
  padding: 2px 6px;
}

/* wheel canvas — square box that holds centre + rings */
.wheel-canvas {
  position: relative;
  width: 100%;
  max-width: var(--w-canvas);
  height: calc(var(--w-canvas) * 1.05);
  margin: 24px auto 16px;
}

@media (max-width: 480px) {
  .wheel-canvas {
    /* Force tight square layout at mobile */
    height: calc(100vw - 32px);
    max-height: 420px;
  }
}

/* centre · "you" icon with pwd-style label */
.wheel-centre {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--w-centre-size);
  height: var(--w-centre-size);
  background: var(--w-panel-2);
  border: 1.5px solid var(--w-ink-bright);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 10;
  box-shadow: 0 0 0 4px var(--w-bg), 0 0 0 5px var(--w-frame);
}

.wheel-centre .you-glyph {
  font-size: 22px;
  line-height: 1;
  color: var(--w-ink-bright);
  font-weight: 600;
}

.wheel-centre .you-label {
  font-size: 9px;
  color: var(--w-muted);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  letter-spacing: 0.03em;
}

/* pwd label below the canvas — shown for longer paths so they don't crowd the centre */
.wheel-pwd {
  text-align: center;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--w-muted);
  margin: -8px 0 12px;
  padding: 0 16px;
  word-break: break-all;
}

.wheel-pwd .you-prefix {
  color: var(--w-ink);
  font-weight: 500;
}

.wheel-pwd .sep {
  color: var(--w-hint);
}

/* spokes — absolutely positioned around the centre */
.spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w-spoke-size);
  height: var(--w-spoke-size);
  /* Each spoke sets --x and --y inline as the offset from centre */
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)));
  background: var(--w-panel);
  border: 0.5px solid var(--w-frame);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.12s, border-color 0.12s;
  text-align: center;
}

.spoke:hover {
  background: var(--w-panel-2);
  border-color: var(--w-ink);
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(1.04);
}

.spoke.future {
  border-style: dashed;
  opacity: 0.55;
  cursor: default;
}

.spoke.future:hover {
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)));
  background: var(--w-panel);
  border-color: var(--w-frame);
}

.spoke .icon {
  font-size: 22px;
  line-height: 1;
}

.spoke.type-station .icon { color: var(--w-ink-bright); }
.spoke.type-publisher .icon { color: var(--w-pink-dk); }
.spoke.type-author .icon { color: var(--w-teal); }
.spoke.type-title .icon { color: var(--w-ink-bright); }
.spoke.type-document .icon { color: var(--w-ink-bright); }
.spoke.type-action .icon { color: var(--w-pink-dk); }
.spoke.type-buy .icon { color: var(--w-teal); }
.spoke.type-pinned .icon { color: var(--w-amber); }

.spoke .label {
  font-size: 11px;
  font-weight: 600;
  color: var(--w-ink-bright);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.spoke .sublabel {
  font-size: 9px;
  color: var(--w-muted);
  font-style: italic;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spoke .pinned-mark {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  color: var(--w-amber);
}

/* type-tag badge appears in outer corner of each spoke */
.spoke .type-tag {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--w-hint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* page header / welcome strip (preserved style from existing tlaq.org) */
.wheel-header {
  background: var(--w-panel);
  border-bottom: 0.5px solid var(--w-frame);
  padding: 14px 16px 10px;
}

.wheel-header .brand-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wheel-header .brand {
  font-size: 18px;
  font-weight: 600;
  color: var(--w-ink-bright);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.wheel-header .brand .dot { color: var(--w-pink-dk); }

.wheel-header .tagline {
  font-size: 11px;
  color: var(--w-muted);
  font-style: italic;
}

.wheel-header .welcome-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--w-ink-bright);
}

.wheel-header .welcome-strip .ar { font-size: 13px; }

/* page-level page-title under header */
.wheel-title {
  text-align: center;
  margin: 18px 16px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--w-ink-bright);
  letter-spacing: 0.02em;
}

.wheel-subtitle {
  text-align: center;
  font-size: 12px;
  color: var(--w-muted);
  margin: 0 16px 12px;
  font-style: italic;
}

/* outer shell ring indicator (only shown when wheel has multiple rings) */
.ring-indicator {
  text-align: center;
  font-size: 10px;
  color: var(--w-hint);
  margin: 6px 0 0;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* legend (when wheel has mixed types) */
.wheel-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  margin: 8px 16px 16px;
  font-size: 10px;
  color: var(--w-muted);
}

.wheel-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wheel-legend .legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.wheel-legend .legend-dot.station { background: var(--w-ink-bright); }
.wheel-legend .legend-dot.publisher { background: var(--w-pink-dk); }
.wheel-legend .legend-dot.author { background: var(--w-teal); }
.wheel-legend .legend-dot.title { background: var(--w-ink-bright); }
.wheel-legend .legend-dot.action { background: var(--w-pink-dk); }
.wheel-legend .legend-dot.buy { background: var(--w-teal); }

/* pin-control overlay (long-press to enable pin mode) */
.wheel-pin-mode {
  display: flex;
  justify-content: center;
  margin: 0 16px 12px;
}

.wheel-pin-toggle {
  background: transparent;
  border: 0.5px solid var(--w-frame);
  color: var(--w-muted);
  padding: 4px 10px;
  font-size: 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wheel-pin-toggle.active {
  background: var(--w-amber);
  color: var(--w-bg);
  border-color: var(--w-amber);
}

.spoke.pin-mode {
  cursor: pointer;
}

.spoke.pin-mode:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1.5px dashed var(--w-amber);
  pointer-events: none;
}