/* Copyright (c) 2026 Free Parameter LLC. All rights reserved.
   Cadnat plan wheel: a 3D carousel of generated plan sets. Theme it with the custom properties below,
   on [data-plan-wheel] or any ancestor. The 3D scene reads the same properties. */

[data-plan-wheel] {
  --pw-bg: #0b1a2e;              /* scene background (navy) */
  --pw-ink: #e6f1ff;             /* captions, ice */
  --pw-ink-dim: #8aa3c2;         /* secondary captions */
  --pw-accent: #5ac8fa;          /* sky: prompt, active sheet, focus rings, grid */
  --pw-dim: #f5a623;             /* amber: dimension accents */
  --pw-paper: #f3f6fa;           /* sheet paper tint (multiplies the white of the plot) */
  --pw-grid: rgba(90, 200, 250, 0.10);
  --pw-panel: rgba(9, 22, 40, 0.72);
  --pw-line: rgba(138, 180, 230, 0.22);
  --pw-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pw-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pw-radius: 14px;
  --pw-ease: cubic-bezier(0.22, 0.61, 0.18, 1);
  --pw-edge-fade: 1;             /* 1 = feather the canvas into the page, 0 = hard edges */
  --pw-aspect: 5 / 4;            /* used only when the host does not size the box */

  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: var(--pw-aspect);
  min-block-size: 280px;
  color: var(--pw-ink);
  font-family: var(--pw-font-sans);
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--pw-radius);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
[data-plan-wheel][data-theme="hackerman"] {
  --pw-bg: #030806;
  --pw-ink: #c9ffe0;
  --pw-ink-dim: #4f9e72;
  --pw-accent: #39ff88;
  --pw-dim: #ffb000;
  --pw-paper: #06120b;           /* hackerman: sheets go dark, linework turns phosphor */
  --pw-grid: rgba(57, 255, 136, 0.09);
  --pw-panel: rgba(2, 10, 6, 0.78);
  --pw-line: rgba(57, 255, 136, 0.25);
  --pw-font-sans: var(--pw-font-mono);
}
[data-plan-wheel]:focus-visible { box-shadow: 0 0 0 2px var(--pw-accent); }

.pw-canvas {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block;
  touch-action: pan-y; cursor: grab;
  mask-image: radial-gradient(130% 120% at 55% 50%, #000 58%, rgb(0 0 0 / calc(1 - var(--pw-edge-fade))) 100%);
  opacity: 0; transition: opacity 1.2s var(--pw-ease), filter 1.4s var(--pw-ease);
  filter: blur(14px);
}
.pw-live .pw-canvas { opacity: 1; filter: none; }
.pw-canvas.is-dragging { cursor: grabbing; }

/* ---- overlay: badge, caption, controls ----------------------------------------------------------- */
.pw-badge {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 8px; border-radius: 999px;
  font: 500 10.5px/1 var(--pw-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pw-ink); background: var(--pw-panel); border: 1px solid var(--pw-line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.pw-badge::before {
  content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--pw-accent); box-shadow: 0 0 8px var(--pw-accent);
}

.pw-caption {
  position: absolute; inset-inline: 16px; inset-block-end: 14px; z-index: 3;
  display: grid; gap: 6px; max-inline-size: min(620px, calc(100% - 32px));
  padding: 12px 14px 12px; border-radius: 10px;
  background: var(--pw-panel); border: 1px solid var(--pw-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--pw-font-mono); font-size: 12px; line-height: 1.45;
  transition: opacity 0.5s var(--pw-ease), filter 0.5s var(--pw-ease), transform 0.5s var(--pw-ease);
}
.pw-caption.is-swapping { opacity: 0; filter: blur(6px); transform: translateY(3px); }
.pw-caption .pw-name {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font: 600 13px/1.2 var(--pw-font-mono); color: var(--pw-ink); letter-spacing: 0.01em;
}
.pw-caption .pw-count { font-weight: 400; color: var(--pw-ink-dim); font-size: 11px; }
.pw-caption .pw-prompt { color: var(--pw-ink); opacity: 0.92; overflow-wrap: anywhere; }
.pw-caption .pw-prompt::before { content: "$ "; color: var(--pw-accent); }
.pw-caption .pw-sheets { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.pw-caption .pw-sheets li {
  font-size: 10.5px; color: var(--pw-ink-dim); padding: 1px 6px; border-radius: 4px; border: 1px solid transparent;
  cursor: pointer; transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.pw-caption .pw-sheets li:hover { color: var(--pw-ink); }
.pw-caption .pw-sheets li[aria-current="true"] {
  color: var(--pw-bg); background: var(--pw-accent); border-color: var(--pw-accent);
}
.pw-caption .pw-sheets li .pw-dimtick { color: var(--pw-dim); }

.pw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pw-controls { display: flex; gap: 6px; margin-inline-start: auto; }
.pw-btn {
  appearance: none; border: 1px solid var(--pw-line); background: var(--pw-panel); color: var(--pw-ink);
  font: 500 11px/1 var(--pw-font-mono); letter-spacing: 0.04em;
  block-size: 30px; min-inline-size: 30px; padding: 0 10px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.25s, color 0.25s, background 0.25s, opacity 0.4s;
}
.pw-btn:hover { border-color: var(--pw-accent); }
.pw-btn:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; }
.pw-btn[aria-pressed="true"] { color: var(--pw-bg); background: var(--pw-accent); border-color: var(--pw-accent); }
.pw-btn[hidden] { display: none; }
.pw-btn svg { inline-size: 14px; block-size: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.pw-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* capture modes: data-clean hides the buttons, data-bare also hides the caption (scene only) */
[data-plan-wheel][data-clean] .pw-controls,
[data-plan-wheel][data-bare] .pw-controls,
[data-plan-wheel][data-bare] .pw-caption { display: none; }

/* ---- fallback: CSS scroll-snap carousel of the same sheets ---------------------------------------- */
.pw-fallback {
  position: absolute; inset: 0; display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 18px max(12%, 24px) 150px; scrollbar-width: none;
  background:
    linear-gradient(var(--pw-grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--pw-grid) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--pw-bg);
}
.pw-fallback::-webkit-scrollbar { display: none; }
.pw-fallback figure {
  flex: 0 0 min(76%, 760px); margin: 0; scroll-snap-align: center; align-self: center;
  display: grid; gap: 8px;
}
.pw-fallback img {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: contain;
  background: var(--pw-paper); border-radius: 2px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 30px 60px -20px rgb(0 0 0 / 0.65), 0 2px 6px rgb(0 0 0 / 0.4);
  filter: blur(6px) saturate(0.8); opacity: 0.55; transform: scale(0.94);
  transition: filter 0.9s var(--pw-ease), opacity 0.9s var(--pw-ease), transform 0.9s var(--pw-ease);
}
[data-theme="hackerman"] .pw-fallback img { filter: invert(1) hue-rotate(180deg) sepia(1) hue-rotate(80deg) saturate(3) blur(6px); }
.pw-fallback figure.is-focus img { filter: none; opacity: 1; transform: none; }
[data-theme="hackerman"] .pw-fallback figure.is-focus img { filter: invert(1) hue-rotate(180deg) sepia(1) hue-rotate(80deg) saturate(3); }
.pw-fallback figcaption { font: 500 11px/1.3 var(--pw-font-mono); color: var(--pw-ink-dim); }
.pw-fallback figcaption b { color: var(--pw-ink); font-weight: 600; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pw-fallback figure img { animation: pw-focus linear both; animation-timeline: view(inline); animation-range: cover 10% cover 90%; transition: none; }
    @keyframes pw-focus {
      0% { filter: blur(8px); opacity: 0.45; transform: scale(0.93); }
      40%, 60% { filter: none; opacity: 1; transform: none; }
      100% { filter: blur(8px); opacity: 0.45; transform: scale(0.93); }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .pw-fallback img, .pw-caption, .pw-canvas { transition: none; }
}
@media (max-width: 520px) {
  .pw-caption { inset-inline: 10px; inset-block-end: 10px; padding: 10px 11px; font-size: 11px; }
  .pw-caption .pw-name { font-size: 12px; }
  .pw-caption .pw-btn span { display: none; }
  .pw-caption .pw-btn { min-inline-size: 30px; block-size: 28px; }
  .pw-caption .pw-prompt { font-size: 10.5px; }
  .pw-badge { inset-block-start: 10px; inset-inline-end: 10px; }
  .pw-fallback figure { flex-basis: 84%; }
}

.pw-caption .pw-btn { block-size: 26px; min-inline-size: 26px; padding: 0 8px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.pw-caption .pw-btn[aria-pressed="true"] { color: var(--pw-bg); background: var(--pw-accent); border-color: var(--pw-accent); }