/**
 * Planning Canvas Styles
 * Write-in-rain paper theme with handwriting animations
 */

/* ==========================================================================
   CSS VARIABLES (inherit from range-card where possible)
   ========================================================================== */
:root {
  /* Rite in Rain paper colors - tan/sand base */
  --planning-paper-bg: #e8dcb8;
  /* Grid lines - single thin brown lines, not overlapping bands */
  --planning-grid-line: rgba(139, 115, 75, 0.18);
  --planning-ink: #1a1a1a;
  --planning-ink-faded: rgba(26, 26, 26, 0.6);
  --planning-header-bg: rgba(90, 75, 50, 0.15);
  --planning-font-handwriting: 'Caveat', cursive;
}

/* ==========================================================================
   MAIN CONTAINER
   ========================================================================== */
.planning-canvas {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  /* Scrollable canvas — drag-to-pan enabled, scrollbar hidden */
  overflow: auto;
  cursor: grab;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  border-radius: 0.75rem; /* Match .preview container corners (12px) */
}
.planning-canvas::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Visibility controlled by .planning-canvas--visible class (set by PlanningCanvas.show/hide)
   Note: SceneManager adds body.planning-view but we use the direct class for cleaner control */
.planning-canvas--visible {
  display: block;
}

body.planning-view .dual-disk-container,
body.planning-view #spiralPreview,
body.planning-view #reticlePreview {
  opacity: 0;
  pointer-events: none;
}

/* Ensure canvas area still takes space but content hidden */
body.planning-view .preview {
  position: relative;
}

/* ==========================================================================
   PAPER BACKDROP
   ========================================================================== */
.planning-canvas__paper {
  position: relative;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  border-radius: 0.75rem;
  background-color: var(--planning-paper-bg);
}

/* Rite in Rain style grid - thin 1px lines, not overlapping bands */
.planning-canvas__paper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  /* Grid using background-size for clean 1px lines */
  background-image:
    linear-gradient(to right, var(--planning-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--planning-grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Paper texture and worn edges as separate layer */
.planning-canvas__paper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image:
    /* Worn corner shading - subtle aging effect */
    radial-gradient(ellipse at top left, rgba(139, 119, 90, 0.08) 0%, transparent 35%),
    radial-gradient(ellipse at bottom right, rgba(139, 119, 90, 0.1) 0%, transparent 40%),
    /* Paper fiber texture */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
}

/* ==========================================================================
   SKULL WATERMARK - Animated sugar skull replaces disk watermark
   Uses SkullWatermark module for micro-expression animation
   ========================================================================== */
.planning-canvas__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  /* Container for animated SVG skull - overflow hidden clips edges */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Prevent selection/interaction */
  -webkit-user-select: none;
  user-select: none;
}

/* SVG fills and overflows container (cover mode) */
.planning-canvas__watermark svg {
  flex-shrink: 0;
  /* No max constraints - allow overflow */
}

/* ==========================================================================
   MVP QUESTIONS - Paper/Handwriting Style on Planning Canvas
   ========================================================================== */
.mvp-paper {
  padding: 20px;
  max-width: 450px;
}

/* ORGANIC MODE - expand paper to fill canvas */
.mvp-paper:has(.organic-validation) {
  max-width: 100%;
  width: 100%;
  padding: 30px;
}

.mvp-paper__questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mvp-paper__question {
  font-size: 22px;
  line-height: 1.6;
}

.mvp-paper__input {
  width: 80px;
  padding: 4px 8px;
  font-family: 'Caveat', cursive;
  font-size: 25px;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--planning-ink, #3a3530);
  color: var(--planning-ink, #3a3530);
  text-align: center;
  margin: 0 4px;
}

.mvp-paper__input:focus {
  outline: none;
  border-bottom-color: var(--planning-ink-bold, #1a1510);
}

/* Remove spinner arrows for cleaner look */
.mvp-paper__input::-webkit-inner-spin-button,
.mvp-paper__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mvp-paper__input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Angular precision display - shows MOA equivalent of target size */
.mvp-paper__precision {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: var(--planning-ink-bold, #1a1510);
  font-weight: 600;
  margin-left: 4px;
  opacity: 0.85;
}

/* Validation list - shows which variables matter and why */
.mvp-paper__validation {
  margin-top: 16px;
}

/* OLD scrollable validation - disabled for organic layout */
.mvp-paper__validation--scrollable {
  max-height: 280px;
  overflow-y: auto;
}

/* ORGANIC VALIDATION - no constraints, full organic flow */
.mvp-paper__validation:has(.organic-validation) {
  max-height: none;
  overflow: visible;
}

.mvp-paper__variables {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mvp-paper__section-label {
  font-size: 16px;
  font-weight: 600;
  margin: 12px 0 6px 0;
  color: var(--planning-ink-bold, #1a1510);
}

.mvp-paper__section-label:first-child {
  margin-top: 0;
}

.mvp-paper__variable-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 8px;
  background: rgba(58, 53, 48, 0.08);
  border-radius: 4px;
  font-family: 'Caveat', cursive;
  cursor: help;
}

.mvp-paper__variable-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--planning-ink-bold, #1a1510);
}

.mvp-paper__variable-reason {
  font-size: 14px;
  color: var(--planning-ink, #3a3530);
  opacity: 0.8;
}

.mvp-paper__teach-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  margin-left: 8px;
  opacity: 0.6;
  transition: opacity 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.mvp-paper__teach-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}

.mvp-paper__note {
  font-size: 16px;
  color: var(--planning-ink, #3a3530);
  opacity: 0.7;
  font-style: italic;
}

/* ==========================================================================
   AUTO-PROOF SECTION - Physics Pipeline Lesson
   Shows the sensitivity calculation breakdown automatically
   ========================================================================== */
.mvp-proof {
  margin-top: 20px;
  padding: 14px;
  background: rgba(58, 53, 48, 0.06);
  border-radius: 10px;
  border: 1px dashed rgba(58, 53, 48, 0.25);
}

.mvp-proof__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.mvp-proof__title {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  font-weight: 700;
  color: var(--planning-ink-bold, #1a1510);
}

.mvp-proof__toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.mvp-proof__toggle:hover {
  opacity: 1;
}

.mvp-proof__content {
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  line-height: 1.5;
  color: var(--planning-ink, #3a3530);
}

.mvp-proof__content.collapsed {
  display: none;
}

.mvp-proof__budget {
  margin-bottom: 14px;
  padding: 10px;
  background: rgba(58, 53, 48, 0.05);
  border-radius: 6px;
}

.mvp-proof__budget p {
  margin: 4px 0;
}

.mvp-proof__variables {
  margin-bottom: 14px;
}

.mvp-proof__variable {
  margin: 10px 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  border-left: 3px solid var(--planning-ink-bold, #1a1510);
}

.mvp-proof__var-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 4px;
}

.mvp-proof__var-num {
  font-size: 14px;
  opacity: 0.7;
}

.mvp-proof__var-name {
  font-size: 16px;
  color: var(--planning-ink-bold, #1a1510);
}

.mvp-proof__var-ratio {
  font-size: 13px;
  color: #E85D04;
  margin-left: auto;
}

.mvp-proof__var-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
  opacity: 0.85;
  font-family: 'Architects Daughter', 'Segoe Print', cursive;
}

.mvp-proof__hidden {
  font-size: 13px;
  font-style: italic;
  opacity: 0.7;
  padding-top: 8px;
  border-top: 1px dashed rgba(58, 53, 48, 0.2);
}

/* ==========================================================================
   KEBAB MENU (upper right)
   ========================================================================== */
.mvp-paper__menu {
  position: absolute;
  top: 12px;
  right: 12px;
}

.mvp-paper__menu-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--planning-ink, #3a3530);
  opacity: 0.6;
  transition: opacity 0.15s;
  border-radius: 4px;
}

.mvp-paper__menu-btn:hover {
  opacity: 1;
  background: rgba(58, 53, 48, 0.1);
}

.mvp-paper__menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--planning-paper, #d4c8a8);
  border: 1px solid var(--planning-ink, #3a3530);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 150px;
  z-index: 100;
}

.mvp-paper__menu-dropdown.open {
  display: block;
}

.mvp-paper__menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: 'Caveat', cursive;
  font-size: 16px;
  color: var(--planning-ink, #3a3530);
  cursor: pointer;
  transition: background 0.1s;
}

.mvp-paper__menu-item:hover {
  background: rgba(58, 53, 48, 0.1);
}

.mvp-paper__menu-divider {
  border: none;
  border-top: 1px solid rgba(58, 53, 48, 0.2);
  margin: 4px 0;
}

/* ==========================================================================
   Q&A SECTION - Ask Oracle
   ========================================================================== */
.mvp-paper__qa {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--planning-ink, #3a3530);
}

.mvp-paper__qa-exchanges {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.mvp-paper__qa-exchange {
  margin-bottom: 16px;
}

.mvp-paper__qa-user {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: var(--planning-ink-bold, #1a1510);
  margin-bottom: 8px;
  padding-left: 8px;
  border-left: 2px solid var(--planning-ink, #3a3530);
}

.mvp-paper__qa-oracle {
  font-size: 16px;
  line-height: 1.5;
  padding: 8px 12px;
  background: rgba(58, 53, 48, 0.05);
  border-radius: 6px;
}

/* Persona-specific handwriting styles */
.mvp-paper__qa-oracle.persona-litz {
  font-family: 'Architects Daughter', 'Segoe Print', cursive;
  color: #2E86AB;
  border-left: 3px solid #2E86AB;
}

.mvp-paper__qa-oracle.persona-shockey {
  font-family: 'Covered By Your Grace', cursive;
  color: #6B4423;
  border-left: 3px solid #6B4423;
}

.mvp-paper__qa-oracle.persona-tommy {
  font-family: 'Patrick Hand', cursive;
  color: #E85D04;
  border-left: 3px solid #E85D04;
}

.mvp-paper__qa-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mvp-paper__qa-question {
  width: 100%;
  padding: 8px 12px;
  font-size: 18px;
  border: 1px solid var(--planning-ink, #3a3530);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.3);
  resize: vertical;
  min-height: 48px;
}

.mvp-paper__qa-question:focus {
  outline: none;
  border-color: var(--planning-ink-bold, #1a1510);
  box-shadow: 0 0 0 2px rgba(58, 53, 48, 0.15);
}

.mvp-paper__qa-question::placeholder {
  color: var(--planning-ink, #3a3530);
  opacity: 0.5;
  font-style: italic;
}

.mvp-paper__qa-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mvp-paper__qa-persona {
  font-family: 'Caveat', cursive;
  font-size: 16px;
  padding: 6px 10px;
  border: 1px solid var(--planning-ink, #3a3530);
  border-radius: 6px;
  background: transparent;
  color: var(--planning-ink, #3a3530);
  cursor: pointer;
}

.mvp-paper__qa-submit {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  padding: 6px 14px;
  background: var(--planning-ink, #3a3530);
  color: var(--planning-paper, #d4c8a8);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.mvp-paper__qa-submit:hover {
  opacity: 0.85;
}

.mvp-paper__qa-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   PAGE FOOTER
   ========================================================================== */
.mvp-paper__footer {
  position: absolute;
  bottom: 12px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Caveat', cursive;
  font-size: 14px;
  color: var(--planning-ink, #3a3530);
  opacity: 0.7;
}

.mvp-paper__footer-divider {
  opacity: 0.4;
}

.mvp-paper__footer-project {
  font-weight: 600;
}

.mvp-paper__footer-theme {
  font-style: italic;
}

.mvp-paper__footer-status {
  margin-left: auto;
  font-size: 12px;
  opacity: 0.6;
}

.mvp-paper__footer-status.saved {
  color: #2a6e2a;
}

.mvp-paper__footer-status.saving {
  color: #8a6d3b;
}

.mvp-paper__result {
  font-size: 20px;
  margin-top: 20px;
}

.mvp-paper__count {
  font-size: 28px;
  font-weight: 700;
  color: var(--planning-ink-bold, #1a1510);
}

.mvp-paper__actions {
  margin-top: 20px;
}

.mvp-paper__btn {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  padding: 8px 16px;
  background: transparent;
  border: 2px solid var(--planning-ink, #3a3530);
  color: var(--planning-ink, #3a3530);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mvp-paper__btn:hover {
  background: var(--planning-ink, #3a3530);
  color: var(--planning-paper, #d4c8a8);
}

/* ==========================================================================
   CONTENT LAYER - Three-column layout
   ========================================================================== */
.planning-canvas__content-layer {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 24px;
  pointer-events: none;
  z-index: 10;
}

.planning-canvas__content-layer > * {
  pointer-events: auto;
}

/* ==========================================================================
   THREE-COLUMN LAYOUT
   ========================================================================== */
.planning-column {
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.planning-column--goals {
  grid-column: 1;
}

/* ORGANIC MODE - goals column spans full width for DaVinci notebook */
.planning-column--goals:has(.organic-validation) {
  grid-column: 1 / -1; /* Span all columns */
}

.planning-column--dope {
  grid-column: 2;
}

.planning-column--disks {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
}

/* Hint text for empty state */
.handwriting--hint {
  font-size: 16px;
  color: var(--planning-ink-faded);
  font-style: italic;
  opacity: 0.7;
}

/* ==========================================================================
   GRID REFERENCE OVERLAY
   ========================================================================== */
.planning-canvas__grid-ref {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
}

.planning-canvas__grid-ref.grid-ref--visible {
  display: block;
}

.grid-ref__labels {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.grid-ref__col-label {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  color: rgba(180, 50, 50, 0.7);
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

.grid-ref__row-label {
  position: absolute;
  left: 2px;
  transform: translateY(-50%);
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  color: rgba(180, 50, 50, 0.7);
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

.grid-ref__info {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(180, 50, 50, 0.3);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: monospace;
  font-size: 11px;
  color: #333;
  line-height: 1.4;
  pointer-events: auto;
}

.grid-ref__hint {
  display: block;
  margin-top: 4px;
  font-style: italic;
  color: #666;
}

/* ==========================================================================
   FONT SAMPLES OVERLAY
   ========================================================================== */
.planning-canvas__font-samples {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--planning-ink-faded);
  border-radius: 8px;
  padding: 20px;
  max-width: 90%;
  max-height: 80%;
  overflow-y: auto;
  z-index: 101;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.planning-canvas__font-samples.font-samples--visible {
  display: block;
}

.font-samples__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.font-sample {
  font-family: var(--planning-font-handwriting);
  color: var(--planning-ink);
  padding: 4px 8px;
  border-bottom: 1px dashed var(--planning-paper-grid);
}

.font-sample__label {
  display: inline-block;
  min-width: 30px;
  font-family: monospace;
  font-size: 12px;
  color: rgba(180, 50, 50, 0.8);
}

.font-sample--stroked {
  -webkit-text-stroke: 0.5px var(--planning-ink);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.font-samples__footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--planning-ink-faded);
  font-family: sans-serif;
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* ==========================================================================
   LEGACY CONTENT STYLES (keep for future use)
   ========================================================================== */
.planning-canvas__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ==========================================================================
   HANDWRITING STYLES
   ========================================================================== */
.handwriting {
  font-family: var(--planning-font-handwriting);
  font-size: 18px;
  color: var(--planning-ink);
  line-height: 1.4;
  margin: 4px 0;
  white-space: pre-wrap;
}

.handwriting--prompt {
  color: var(--planning-ink-faded);
  font-style: italic;
}

.handwriting--goal {
  font-size: 20px;
  font-weight: 600;
}

.handwriting--header {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.handwriting--calc {
  font-size: 17px;
  padding-left: 12px;
}

.handwriting--result {
  font-size: 22px;
  font-weight: 700;
  color: #2a5a2a;
}

.handwriting--assessment {
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
}

.handwriting--divider {
  color: var(--planning-ink-faded);
  font-size: 14px;
  margin: 6px 0;
  opacity: 0.5;
}

.handwriting--table-header {
  font-size: 14px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.1em;
}

.handwriting--table-row {
  font-size: 14px;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.05em;
}

/* Animation: cursor blink while typing */
.handwriting--animating::after {
  content: '|';
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* ==========================================================================
   DISK SKETCHES
   ========================================================================== */
.planning-canvas__content#planningDisks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.disk-sketch {
  width: 140px;
  height: 140px;
}

.disk-sketch__svg {
  width: 100%;
  height: 100%;
}

.disk-sketch__outline {
  fill: none;
  stroke: var(--planning-ink);
  stroke-width: 2;
  stroke-dasharray: 4 2;
}

.disk-sketch__axle {
  fill: var(--planning-ink-faded);
  stroke: var(--planning-ink);
  stroke-width: 1;
}

.disk-sketch__crosshair {
  stroke: var(--planning-ink-faded);
  stroke-width: 1;
  stroke-dasharray: 8 4;
}

.disk-sketch__label {
  font-family: var(--planning-font-handwriting);
  font-size: 12px;
  fill: var(--planning-ink);
  text-anchor: middle;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.planning-canvas__footer {
  padding: 8px 16px;
  margin-top: 12px;
  text-align: center;
}

.planning-canvas__hint {
  font-family: var(--planning-font-handwriting);
  font-size: 16px;
  color: var(--planning-ink-faded);
  font-style: italic;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .planning-canvas__columns {
    flex-direction: column;
  }

  .planning-canvas__column {
    flex: none;
    max-height: 250px;
  }

  .planning-canvas__column--disks {
    flex-direction: row;
    max-height: 160px;
  }

  .planning-canvas__content#planningDisks {
    flex-direction: row;
  }

  .disk-sketch {
    width: 100px;
    height: 100px;
  }
}

/* ==========================================================================
   IDLE DOODLES - Screensaver Easter Eggs
   ========================================================================== */
.planning-canvas__doodles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.doodle {
  position: absolute;
  font-family: var(--planning-font-handwriting);
  color: var(--planning-ink-faded);
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.doodle--entering {
  opacity: 0;
}

.doodle--visible {
  opacity: 0.6;
}

/* Text Doodles */
.doodle--text {
  font-size: 18px;
  white-space: nowrap;
}

.doodle--scratchy {
  font-style: italic;
  letter-spacing: 1px;
}

.doodle--bold {
  font-weight: bold;
  font-size: 22px;
  text-transform: uppercase;
}

.doodle--italic {
  font-style: italic;
  font-size: 16px;
}

/* Heart to Spade Animation */
.doodle--heart-spade {
  font-size: 36px;
}

.doodle__heart {
  color: #cc4444;
  display: inline-block;
  transition:
    opacity 0.5s,
    transform 0.5s;
}

.doodle__spade {
  display: none;
  color: var(--planning-ink);
}

.doodle--phase2 .doodle__heart {
  opacity: 0;
  transform: scale(0.5);
  display: none;
}

.doodle--phase2 .doodle__spade {
  display: inline-block;
  animation: spadeReveal 0.6s ease-out;
}

@keyframes spadeReveal {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-10deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.1) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.doodle__spade-logo {
  width: 50px;
  height: 50px;
}

/* SVG Doodles */
.doodle--svg {
  width: 60px;
  height: 60px;
}

.doodle__drawing {
  width: 100%;
  height: 100%;
  stroke: var(--planning-ink-faded);
  fill: none;
}

.doodle--bigfoot .doodle__drawing {
  width: 50px;
  height: 70px;
}

/* Rainbow Doodle */
.doodle--rainbow {
  width: 100px;
  text-align: center;
}

.doodle__rainbow-arc {
  width: 80px;
  height: 45px;
  display: block;
  margin: 0 auto;
}

.doodle__rainbow-text {
  display: block;
  font-size: 14px;
  font-style: italic;
  color: var(--planning-ink);
  margin-top: 4px;
  letter-spacing: 1px;
}

/* ==========================================================================
   PHASE 1: DAVINCI / TREASURE MAP ARTISTIC FOUNDATION
   
   Inspired by:
   - Leonardo DaVinci's notebook illustrations
   - Children's book treasure maps
   - Hand-drawn graph paper notes
   
   Principles:
   - Every stroke deliberate and compositionally balanced
   - Pencil-like natural imperfection
   - Varied stroke weights (wire-thin to bold emphasis)
   - Organic positioning with slight tilts
   ========================================================================== */

/* --------------------------------------------------------------------------
   PENCIL COLOR PALETTE
   Graphite grays with warmth, aged paper tones
   -------------------------------------------------------------------------- */
:root {
  /* Graphite pencil spectrum (light to dark) */
  --pencil-whisper: rgba(58, 53, 48, 0.15);
  --pencil-light: rgba(58, 53, 48, 0.35);
  --pencil-medium: rgba(58, 53, 48, 0.6);
  --pencil-dark: rgba(58, 53, 48, 0.85);
  --pencil-bold: #1a1510;
  
  /* Warm graphite for emphasis */
  --pencil-warm: #4a3f35;
  --pencil-sepia: #5c4a3a;
  
  /* Wire-line color (very faint for construction lines) */
  --pencil-wire: rgba(58, 53, 48, 0.25);
  
  /* Aged paper accent */
  --paper-aged: #d4c8a8;
  --paper-shadow: rgba(90, 75, 50, 0.12);
}

/* --------------------------------------------------------------------------
   STROKE WEIGHT SYSTEM
   From wire-thin construction lines to bold emphasis
   -------------------------------------------------------------------------- */
.stroke-wire {
  stroke-width: 0.5px;
  stroke: var(--pencil-wire);
}

.stroke-thin {
  stroke-width: 1px;
  stroke: var(--pencil-light);
}

.stroke-normal {
  stroke-width: 1.5px;
  stroke: var(--pencil-medium);
}

.stroke-medium {
  stroke-width: 2px;
  stroke: var(--pencil-dark);
}

.stroke-bold {
  stroke-width: 2.5px;
  stroke: var(--pencil-bold);
}

.stroke-emphasis {
  stroke-width: 3px;
  stroke: var(--pencil-bold);
}

/* --------------------------------------------------------------------------
   FONT SIZE HIERARCHY
   DaVinci-style varied sizing for visual weight
   -------------------------------------------------------------------------- */
.text-whisper {
  font-size: 11px;
  color: var(--pencil-light);
  letter-spacing: 0.02em;
}

.text-annotation {
  font-size: 13px;
  color: var(--pencil-medium);
  font-style: italic;
}

.text-note {
  font-size: 15px;
  color: var(--pencil-dark);
}

.text-body {
  font-size: 18px;
  color: var(--pencil-dark);
}

.text-emphasis {
  font-size: 20px;
  color: var(--pencil-bold);
  font-weight: 600;
}

.text-header {
  font-size: 24px;
  color: var(--pencil-bold);
  font-weight: 700;
}

.text-title {
  font-size: 28px;
  color: var(--pencil-bold);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   DELIBERATE IMPERFECTION
   Organic tilts, slight rotations for hand-drawn feel
   -------------------------------------------------------------------------- */
.tilt-slight-left {
  transform: rotate(-0.5deg);
}

.tilt-slight-right {
  transform: rotate(0.5deg);
}

.tilt-left {
  transform: rotate(-1.2deg);
}

.tilt-right {
  transform: rotate(1.2deg);
}

.tilt-natural {
  transform: rotate(-0.8deg);
}

/* Organic offset - slight position jitter */
.offset-organic {
  transform: translate(1px, -1px) rotate(-0.3deg);
}

/* Pressure variation simulation */
.pressure-light {
  opacity: 0.7;
}

.pressure-normal {
  opacity: 0.85;
}

.pressure-heavy {
  opacity: 1;
  text-shadow: 0 0 0.5px var(--pencil-dark);
}

/* --------------------------------------------------------------------------
   HAND-DRAWN BORDERS
   Wire-line rectangles for UI elements
   -------------------------------------------------------------------------- */
.border-wire {
  border: 1px solid var(--pencil-wire);
  border-radius: 2px;
}

.border-pencil {
  border: 1px solid var(--pencil-light);
  border-radius: 3px;
}

.border-sketch {
  border: 1.5px solid var(--pencil-medium);
  border-radius: 4px;
}

.border-bold {
  border: 2px solid var(--pencil-dark);
  border-radius: 4px;
}

/* Dashed/construction line borders */
.border-construction {
  border: 1px dashed var(--pencil-wire);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   PENCIL-STYLE KEBAB MENU (Phase 1 enhancement)
   Hand-drawn appearance with organic styling
   -------------------------------------------------------------------------- */
.mvp-paper__menu-btn--pencil {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 10px;
  color: var(--pencil-medium);
  opacity: 0.8;
  transition: opacity 0.15s, transform 0.1s;
  border-radius: 3px;
  font-family: 'Caveat', cursive;
  letter-spacing: 2px;
  transform: rotate(-1deg);
}

.mvp-paper__menu-btn--pencil:hover {
  opacity: 1;
  background: var(--pencil-whisper);
  transform: rotate(0deg);
}

.mvp-paper__menu-dropdown--pencil {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--paper-aged);
  border: 1px solid var(--pencil-light);
  border-radius: 6px;
  box-shadow: 
    2px 3px 8px var(--paper-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  min-width: 160px;
  z-index: 100;
  transform: rotate(-0.5deg);
}

.mvp-paper__menu-dropdown--pencil.open {
  display: block;
}

.mvp-paper__menu-item--pencil {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: 'Caveat', cursive;
  font-size: 17px;
  color: var(--pencil-dark);
  cursor: pointer;
  transition: background 0.1s;
  transform: rotate(0.3deg);
}

.mvp-paper__menu-item--pencil:hover {
  background: var(--pencil-whisper);
}

.mvp-paper__menu-item--pencil:first-child {
  border-radius: 6px 6px 0 0;
}

.mvp-paper__menu-item--pencil:last-child {
  border-radius: 0 0 6px 6px;
}

/* --------------------------------------------------------------------------
   PENCIL-STYLE INPUT UNDERLINES
   Natural pencil stroke appearance
   -------------------------------------------------------------------------- */
.input-pencil {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--pencil-light);
  color: var(--pencil-bold);
  font-family: 'Caveat', cursive;
  padding: 4px 8px;
  transition: border-color 0.15s;
}

.input-pencil:focus {
  outline: none;
  border-bottom-color: var(--pencil-dark);
  border-bottom-width: 2px;
}

.input-pencil::placeholder {
  color: var(--pencil-light);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   PENCIL-STYLE BUTTONS
   Hand-drawn appearance with natural hover states
   -------------------------------------------------------------------------- */
.btn-pencil {
  background: transparent;
  border: 1.5px solid var(--pencil-medium);
  color: var(--pencil-dark);
  font-family: 'Caveat', cursive;
  font-size: 17px;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  transform: rotate(-0.5deg);
}

.btn-pencil:hover {
  background: var(--pencil-whisper);
  border-color: var(--pencil-dark);
  transform: rotate(0deg);
}

.btn-pencil--primary {
  background: var(--pencil-dark);
  color: var(--paper-aged);
  border-color: var(--pencil-dark);
}

.btn-pencil--primary:hover {
  background: var(--pencil-bold);
}

/* --------------------------------------------------------------------------
   MARGINAL NOTES ZONE
   DaVinci-style annotations in margins
   -------------------------------------------------------------------------- */
.margin-note {
  position: absolute;
  font-family: 'Patrick Hand', cursive;
  font-size: 13px;
  color: var(--pencil-medium);
  max-width: 120px;
  line-height: 1.4;
  transform: rotate(-2deg);
}

.margin-note--left {
  left: -130px;
  text-align: right;
}

.margin-note--right {
  right: -130px;
  text-align: left;
}

.margin-note::before {
  content: '→';
  margin-right: 4px;
  opacity: 0.6;
}

.margin-note--right::before {
  content: '←';
  margin-left: 4px;
  margin-right: 0;
}

/* --------------------------------------------------------------------------
   COMPOSITION BALANCE HELPERS
   Visual weight distribution utilities
   -------------------------------------------------------------------------- */
.weight-light {
  opacity: 0.5;
  font-weight: 400;
}

.weight-normal {
  opacity: 0.8;
  font-weight: 500;
}

.weight-heavy {
  opacity: 1;
  font-weight: 700;
}

/* Spacing for visual balance */
.space-breath {
  margin: 16px 0;
}

.space-cluster {
  margin: 6px 0;
}

.space-tight {
  margin: 2px 0;
}

/* --------------------------------------------------------------------------
   PERSONA HANDWRITING STYLES (Enhanced)
   Each persona has distinct pencil characteristics
   -------------------------------------------------------------------------- */
.persona-handwriting-litz {
  font-family: 'Architects Daughter', 'Segoe Print', sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.7;
  color: #2E86AB;
  transform: rotate(0deg); /* Precise, no tilt */
}

.persona-handwriting-shockey {
  font-family: 'Coming Soon', 'Segoe Print', sans-serif;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 1.6;
  color: #6B4423;
  transform: rotate(-0.8deg); /* Confident forward lean */
}

.persona-handwriting-tommy {
  font-family: 'Gloria Hallelujah', 'Comic Neue', sans-serif;
  font-weight: 400;
  letter-spacing: 0.3px;
  line-height: 1.8;
  color: #E85D04;
  transform: rotate(0.5deg); /* Eager, slightly tilted */
}

/* --------------------------------------------------------------------------
   SVG ROUGH.JS INTEGRATION STYLES
   For hand-drawn elements rendered via SketchRenderer
   -------------------------------------------------------------------------- */
.rough-element {
  pointer-events: none;
}

.rough-element--interactive {
  pointer-events: auto;
  cursor: pointer;
}

.rough-wire {
  stroke: var(--pencil-wire);
  stroke-width: 0.5;
  fill: none;
}

.rough-pencil {
  stroke: var(--pencil-medium);
  stroke-width: 1.5;
  fill: none;
}

.rough-bold {
  stroke: var(--pencil-bold);
  stroke-width: 2;
  fill: none;
}

/* --------------------------------------------------------------------------
   FLOATING CHAT BUBBLE FOUNDATION
   Wire-line draggable chat within canvas (Phase 3 prep)
   -------------------------------------------------------------------------- */
.chat-bubble {
  position: absolute;
  background: rgba(212, 200, 168, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--pencil-wire);
  border-radius: 8px;
  box-shadow: 
    2px 4px 12px rgba(58, 53, 48, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  min-width: 280px;
  max-width: 360px;
  z-index: 50;
  cursor: move;
  transform: rotate(-0.3deg);
}

.chat-bubble__header {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--pencil-whisper);
}

.chat-bubble__btn {
  background: transparent;
  border: none;
  font-family: 'Caveat', cursive;
  font-size: 16px;
  color: var(--pencil-medium);
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.15s;
}

.chat-bubble__btn:hover {
  color: var(--pencil-bold);
}

.chat-bubble__content {
  padding: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.chat-bubble__input-area {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--pencil-whisper);
}

.chat-bubble__input {
  flex: 1;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid var(--pencil-wire);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: 'Caveat', cursive;
  font-size: 16px;
  color: var(--pencil-dark);
  resize: none;
}

.chat-bubble__input:focus {
  outline: none;
  border-color: var(--pencil-light);
}

.chat-bubble__send {
  background: transparent;
  border: 1px solid var(--pencil-light);
  border-radius: 4px;
  padding: 8px 14px;
  font-family: 'Caveat', cursive;
  font-size: 16px;
  color: var(--pencil-dark);
  cursor: pointer;
  transition: all 0.15s;
  transform: rotate(-1deg);
}

.chat-bubble__send:hover {
  background: var(--pencil-whisper);
  border-color: var(--pencil-medium);
  transform: rotate(0deg);
}

/* Chat bubble message styling */
.chat-bubble__messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100px;
}

.chat-bubble__message {
  padding: 8px 12px;
  border-radius: 6px;
  max-width: 90%;
  font-family: 'Caveat', cursive;
  font-size: 16px;
  line-height: 1.4;
}

.chat-bubble__message--user {
  align-self: flex-end;
  background: var(--pencil-whisper);
  color: var(--pencil-bold);
  border: 1px solid var(--pencil-wire);
}

.chat-bubble__message--oracle {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.4);
  color: var(--pencil-dark);
  border-left: 2px solid var(--pencil-light);
}

/* Persona indicator in header */
.chat-bubble__persona-indicator {
  font-family: 'Caveat', cursive;
  font-size: 15px;
  color: var(--pencil-medium);
}

.chat-bubble__controls {
  display: flex;
  gap: 4px;
}

/* Typing indicator */
.chat-bubble__typing {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  align-self: flex-start;
}

.chat-bubble__typing span {
  width: 6px;
  height: 6px;
  background: var(--pencil-light);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.chat-bubble__typing span:nth-child(1) {
  animation-delay: 0s;
}

.chat-bubble__typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-bubble__typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* ==========================================================================
   CURIOSITY SYSTEM - Clickable Doodles & Explanations
   Hand-drawn sketches that users tap to learn why variables matter
   ========================================================================== */

/* Doodle container in variable margins */
.curiosity-doodle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s ease, transform 0.1s ease;
}

.curiosity-doodle:hover {
  background: rgba(139, 115, 75, 0.12);
  transform: scale(1.02);
}

.curiosity-doodle:active {
  transform: scale(0.98);
}

/* Doodle SVG sprite */
.curiosity-doodle__sprite {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--planning-ink, #1a1a1a);
  transition: color 0.15s ease;
}

/* Summoned variable - dark ink */
.curiosity-doodle--summoned .curiosity-doodle__sprite {
  color: var(--planning-ink-bold, #0a0a0a);
}

/* Skipped variable - faded with strikethrough */
.curiosity-doodle--skipped .curiosity-doodle__sprite {
  color: var(--planning-ink-faded, rgba(26, 26, 26, 0.4));
}

.curiosity-doodle--skipped::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--planning-ink-faded, rgba(26, 26, 26, 0.4));
  transform: rotate(-5deg);
}

/* Doodle label */
.curiosity-doodle__label {
  font-family: var(--planning-font-handwriting, 'Caveat', cursive);
  font-size: 1rem;
  color: var(--planning-ink, #1a1a1a);
}

.curiosity-doodle--skipped .curiosity-doodle__label {
  color: var(--planning-ink-faded, rgba(26, 26, 26, 0.5));
  text-decoration: line-through;
}

/* Tap hint */
.curiosity-doodle__hint {
  font-family: var(--planning-font-handwriting, 'Caveat', cursive);
  font-size: 0.85rem;
  color: var(--planning-ink-faded, rgba(26, 26, 26, 0.5));
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.curiosity-doodle:hover .curiosity-doodle__hint {
  opacity: 1;
}

/* Explained state - checkmark */
.curiosity-doodle--explained::before {
  content: '✓';
  position: absolute;
  right: -8px;
  top: -4px;
  font-size: 12px;
  color: #4a7c4a;
}

/* ==========================================================================
   EXPLANATION AREA - Handwritten explanations unfold here
   ========================================================================== */

.mvp-explanation-area {
  position: relative;
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(232, 220, 184, 0.6);
  border-radius: 8px;
  border: 1px dashed rgba(139, 115, 75, 0.3);
}

/* Handwriting block container */
.handwriting-block {
  font-family: var(--planning-font-handwriting, 'Caveat', cursive);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--planning-ink, #1a1a1a);
}

.handwriting-line {
  margin: 0.25rem 0;
  min-height: 1.5em;
}

.handwriting-line--animating {
  border-right: 2px solid var(--planning-ink, #1a1a1a);
  animation: cursorBlink 0.7s infinite;
}

@keyframes cursorBlink {
  0%, 50% { border-color: var(--planning-ink, #1a1a1a); }
  51%, 100% { border-color: transparent; }
}

.handwriting--emphasis {
  font-weight: 600;
  font-size: 1.2rem;
}

.handwriting-divider {
  color: var(--planning-ink-faded, rgba(26, 26, 26, 0.4));
  letter-spacing: 0.1em;
}

.handwriting-calculation {
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  margin-left: 1rem;
  color: var(--planning-ink-faded, rgba(26, 26, 26, 0.7));
}

/* Doodle + text combo */
.handwriting-with-doodle {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.handwriting-doodle {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.handwriting-doodle--visible {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   VARIABLE MARGIN LIST - Shows summoned/skipped variables
   ========================================================================== */

.variable-margin-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

.variable-margin-list__section {
  margin-bottom: 1rem;
}

.variable-margin-list__header {
  font-family: var(--planning-font-handwriting, 'Caveat', cursive);
  font-size: 1rem;
  font-weight: 600;
  color: var(--planning-ink-bold, #0a0a0a);
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--planning-grid-line, rgba(139, 115, 75, 0.18));
}

.variable-margin-list__items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Completion celebration */
.variable-margin-list__complete {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(74, 124, 74, 0.1);
  border-radius: 6px;
  text-align: center;
}

.variable-margin-list__complete-text {
  font-family: var(--planning-font-handwriting, 'Caveat', cursive);
  font-size: 1.1rem;
  color: #4a7c4a;
  font-weight: 600;
}

/* ==========================================================================
   MVP VARIABLE MARGIN - Right-side panel for curiosity doodles
   ========================================================================== */

.mvp-variable-margin {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 220px;
  max-height: calc(100% - 2rem);
  overflow-y: auto;
  background: rgba(232, 220, 184, 0.7);
  border-radius: 8px;
  border: 1px dashed rgba(139, 115, 75, 0.25);
  z-index: 10;
}

/* Responsive: hide on narrow screens */
@media (max-width: 768px) {
  .mvp-variable-margin {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-height: none;
    margin-top: 1rem;
  }
}

/* ==========================================================================
   DISK VIEW — PRD-44 Req 3: Exploded Blueprint (Two Disks Side by Side)
   ========================================================================== */

.disk-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 100%;
  padding: 16px;
  pointer-events: auto;
  grid-column: 1 / -1; /* Span all columns of planning content grid */
}

.disk-view__row {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  flex: 0 0 auto;
  min-width: max-content;
  min-height: 0;
}

.disk-view__panel {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: clamp(320px, 42vw, 520px);
}

.disk-view__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--planning-ink-faded, rgba(60, 50, 40, 0.35));
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Corner Brackets (Cyberpunk/Destiny targeting UI) ────────────── */
/* Four L-shaped bracket marks at each corner of the viewport       */
.disk-view__viewport::before,
.disk-view__viewport::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--planning-ink, #3c3228);
  border-style: solid;
  z-index: 2;
  pointer-events: none;
}
.disk-view__viewport::before {
  top: 4px;
  left: 4px;
  border-width: 1.5px 0 0 1.5px;
}
.disk-view__viewport::after {
  top: 4px;
  right: 4px;
  border-width: 1.5px 1.5px 0 0;
}

/* Bottom corners via the panel pseudo-elements */
.disk-view__panel::before,
.disk-view__panel::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--planning-ink, #3c3228);
  border-style: solid;
  z-index: 2;
  pointer-events: none;
}
.disk-view__panel::before {
  bottom: 0;
  left: 4px;
  border-width: 0 0 1.5px 1.5px;
}
.disk-view__panel::after {
  bottom: 0;
  right: 4px;
  border-width: 0 1.5px 1.5px 0;
}

.disk-view__viewport .disk-view__svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Drawing number tag — top-left of viewport (engineering drawing convention) */
.disk-view__dwg-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--planning-ink-faded, rgba(60, 50, 40, 0.45));
  pointer-events: none;
}

.disk-view__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: 6px;
}

.disk-view__title {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--planning-ink, #3c3228);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.disk-view__subtitle {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 9px;
  letter-spacing: 0.8px;
  color: var(--planning-ink-faded, rgba(60, 50, 40, 0.55));
}

.disk-view__summary {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--planning-ink, #3c3228);
  text-align: center;
  padding: 8px 16px;
  border-top: 1px solid var(--planning-ink-faded, rgba(60, 50, 40, 0.18));
  width: 100%;
}

/* Placeholder (no build data) */
.disk-view__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  text-align: center;
  padding: 40px;
}

.disk-view__placeholder-text {
  font-family: var(--font-handwriting, 'Patrick Hand', cursive);
  font-size: 18px;
  color: var(--planning-ink, #3c3228);
  line-height: 1.5;
}

.disk-view__placeholder-hint {
  font-family: var(--font-handwriting, 'Patrick Hand', cursive);
  font-size: 13px;
  color: var(--planning-ink-faded, rgba(60, 50, 40, 0.45));
  font-style: italic;
}

/* Annotation notes — handwritten margin labels */
.disk-view__annotations {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 4px 0;
}

.disk-view__note {
  font-family: var(--font-handwriting, 'Patrick Hand', cursive);
  font-size: 12px;
  color: var(--planning-ink, #3c3228);
  opacity: 0;
  animation: noteReveal 0.4s ease-out forwards;
  line-height: 1.3;
  padding: 1px 4px;
}

.disk-view__note--left {
  text-align: left;
}

.disk-view__note--right {
  text-align: right;
}

@keyframes noteReveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 0.75;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Engineering Monochrome — "4th CSS View"
   Day / Night / Storm all render the same SVG with different CSS.
   PLAN is the 4th theme: everything in engineering black, no effects.
   ═══════════════════════════════════════════════════════════════════════ */

.disk-view__svg--engineering {
  --accent-primary: #1a1a1a;
  --accent-secondary: #1a1a1a;
  --spiral-wind: #1a1a1a;
  --spiral-da-low: #1a1a1a;
  --spiral-da-high: #1a1a1a;
  --spiral-main: #1a1a1a;
  --luminova-primary: #1a1a1a;
  --luminova-chalk: #1a1a1a;
  --gt-bg-primary: none;
  --gt-text-primary: #1a1a1a;
  --gt-text-secondary: #1a1a1a;
  --gt-border: #1a1a1a;
}

/* ── Strokes: all black ─────────────────────────────────────────────── */
.disk-view__svg--engineering path,
.disk-view__svg--engineering line,
.disk-view__svg--engineering circle,
.disk-view__svg--engineering ellipse,
.disk-view__svg--engineering rect,
.disk-view__svg--engineering polyline,
.disk-view__svg--engineering polygon {
  stroke: #1a1a1a !important;
}

/* ── Fills: everything black, outlines stay empty ───────────────────── */
.disk-view__svg--engineering path,
.disk-view__svg--engineering circle,
.disk-view__svg--engineering ellipse,
.disk-view__svg--engineering rect,
.disk-view__svg--engineering polygon {
  fill: #1a1a1a !important;
}
.disk-view__svg--engineering [fill="none"] {
  fill: none !important;
}
.disk-view__svg--engineering .spiral-node,
.disk-view__svg--engineering .spoke-node,
.disk-view__svg--engineering .da-node,
.disk-view__svg--engineering .wind-node {
  fill: #1a1a1a !important;
  stroke: none !important;
}

/* ── Text: black, no stroke ─────────────────────────────────────────── */
.disk-view__svg--engineering text {
  fill: #1a1a1a !important;
  stroke: none !important;
}

/* ── Nomenclature overlay exemptions ────────────────────────────────── */
/* The blanket fill/stroke rules above force everything to #1a1a1a.     */
/* Nomenclature callout sub-elements need their own palette preserved.  */
.disk-view__svg--engineering .nomenclature-frame {
  fill: rgba(232, 220, 184, 0.92) !important;
  stroke: #1a1a1a !important;
  stroke-width: 0.4px !important;
}
.disk-view__svg--engineering .nomenclature-badge-num {
  fill: var(--planning-paper-bg, #e8dcb8) !important;
  stroke: none !important;
}
.disk-view__svg--engineering .nomenclature-leader {
  fill: none !important;
  stroke-width: 0.6px !important;
}
.disk-view__svg--engineering .nomenclature-crosshair line {
  stroke-width: 0.5px !important;
}

/* ── Hide LAB-only diagnostic elements (not present in Field view) ────
/* Note: .eggs-overlay is a FIELD view element — kept visible            */
/* Note: .wind-nodes kept visible for blueprint (ghost or active)        */
.disk-view__svg--engineering .spiral-node,
.disk-view__svg--engineering .da-node,
.disk-view__svg--engineering .spokes {
  display: none !important;
}

/* ── Hide basic template-axle — superseded by detailed chamfered axle ─ */
/* renderAllHardware draws axle chamfers + gasket + bolt at higher        */
/* fidelity; the basic template-axle circle creates a double ring.       */
.disk-view__svg--engineering .template-axle {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Ghost Elements — Features available but not selected by user
   Rendered in light gray to show "this option exists on your KNOMAD"
   ═══════════════════════════════════════════════════════════════════════ */

/* Ghost group wrapper — all children inherit ghost styling */
.disk-view__svg--engineering .disk-view__ghost path,
.disk-view__svg--engineering .disk-view__ghost line,
.disk-view__svg--engineering .disk-view__ghost circle,
.disk-view__svg--engineering .disk-view__ghost ellipse,
.disk-view__svg--engineering .disk-view__ghost rect,
.disk-view__svg--engineering .disk-view__ghost polyline,
.disk-view__svg--engineering .disk-view__ghost polygon {
  stroke: #c0c0c0 !important;
  fill: #c0c0c0 !important;
}
.disk-view__svg--engineering .disk-view__ghost [fill="none"] {
  fill: none !important;
}
.disk-view__svg--engineering .disk-view__ghost text {
  fill: #c0c0c0 !important;
  stroke: none !important;
}
.disk-view__svg--engineering .disk-view__ghost .bezel-number-glyph,
.disk-view__svg--engineering .disk-view__ghost .reticle-number-glyph {
  fill: none !important;
  stroke: #c0c0c0 !important;
}

/* Ghost placeholder labels — italic dashed style */
.disk-view__ghost-placeholder-label {
  font-family: 'Courier New', 'Consolas', monospace !important;
  font-size: 3px !important;
  fill: #b0b0b0 !important;
  stroke: none !important;
  font-style: italic;
  letter-spacing: 0.3px;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Ghost placeholder arcs/paths — dashed lines */
.disk-view__ghost-placeholder path,
.disk-view__ghost-placeholder line,
.disk-view__ghost-placeholder circle {
  stroke: #c0c0c0 !important;
  stroke-dasharray: 2 2 !important;
  fill: none !important;
}

/* Ghost cosine fan lines */
.disk-view__ghost .cosine-fan-line,
.disk-view__ghost .cosine-fan-tick {
  stroke: #c0c0c0 !important;
}
.disk-view__ghost .cosine-fan-factor,
.disk-view__ghost text {
  fill: #c0c0c0 !important;
}

/* Ghost nomenclature callout — lighter leader lines and labels */
.nomenclature-callout[data-ghost="true"] .nomenclature-leader {
  stroke: #c0c0c0 !important;
}
.nomenclature-callout[data-ghost="true"] .nomenclature-crosshair line {
  stroke: #c0c0c0 !important;
}
.nomenclature-callout[data-ghost="true"] .nomenclature-dot {
  fill: #c0c0c0 !important;
}
.nomenclature-callout[data-ghost="true"] .nomenclature-badge-circle {
  fill: #c0c0c0 !important;
}
.nomenclature-callout[data-ghost="true"] .nomenclature-text {
  fill: #b0b0b0 !important;
}
.nomenclature-callout[data-ghost="true"] .nomenclature-frame {
  fill: rgba(232, 220, 184, 0.45) !important;
  stroke: #c0c0c0 !important;
}

/* ── Kill ALL effects: filters, glows, gradients, topo bg ───────────── */
.disk-view__svg--engineering [filter] {
  filter: none !important;
}
.disk-view__svg--engineering .glow-effect,
.disk-view__svg--engineering #luminovaGlow,
.disk-view__svg--engineering #luminovaTransmit,
.disk-view__svg--engineering #iridescentEdge,
.disk-view__svg--engineering #invertTopo,
.disk-view__svg--engineering #discShadowGradient,
.disk-view__svg--engineering .topo-background {
  display: none !important;
}

/* ── Bezel grip: single black outline, no polycarbonate layers ───────── */
.disk-view__svg--engineering .bezel-grip-outline {
  stroke: #1a1a1a !important;
  stroke-opacity: 1 !important;
  filter: none !important;
}
.disk-view__svg--engineering .bezel-grip-fill,
.disk-view__svg--engineering .bezel-grip-shadow,
.disk-view__svg--engineering .bezel-grip-edge,
.disk-view__svg--engineering .bezel-grip-reveal,
.disk-view__svg--engineering .bezel-grip-reveal-shadow {
  display: none !important;
}

/* ── Bolt: show hex socket outline, hide 3D shadows ─────────────────── */
/* Class names match disk_geometry.js renderCenterBolt() exactly         */
.disk-view__svg--engineering .hex-interior {
  fill: #1a1a1a !important;
}
.disk-view__svg--engineering .hex-edge,
.disk-view__svg--engineering .hex-chamfer {
  stroke: #1a1a1a !important;
  fill: none !important;
}
.disk-view__svg--engineering .bolt-base {
  fill: none !important;
  stroke: #1a1a1a !important;
}
.disk-view__svg--engineering .bolt-outer-edge {
  fill: none !important;
  stroke: #1a1a1a !important;
}
.disk-view__svg--engineering .bolt-recess-shadow,
.disk-view__svg--engineering .bolt-chamfer,
.disk-view__svg--engineering .bolt-gradient {
  display: none !important;
}

/* ── Gasket & axle: outline only ────────────────────────────────────── */
/* Class names match disk_geometry.js renderers exactly                  */
.disk-view__svg--engineering .gasket-ring,
.disk-view__svg--engineering .gasket-inner-glow {
  fill: none !important;
  stroke: #1a1a1a !important;
  stroke-opacity: 1 !important;
}

/* ── Axle chamfers: outline only (concentric machined rings) ────────── */
.disk-view__svg--engineering .center-axle-fill {
  fill: none !important;
}
.disk-view__svg--engineering .center-axle-outline,
.disk-view__svg--engineering .center-axle-shadow,
.disk-view__svg--engineering .axle-hole-floor,
.disk-view__svg--engineering .axle-inner-chamfer,
.disk-view__svg--engineering .axle-outer-chamfer {
  fill: none !important;
  stroke: #1a1a1a !important;
  stroke-opacity: 1 !important;
}

/* ── Lanyard tabs: outline only, hide polycarbonate fill layers ──────── */
.disk-view__svg--engineering .lanyard-fill {
  fill: none !important;
}
.disk-view__svg--engineering .lanyard-outline {
  fill: none !important;
  stroke: #1a1a1a !important;
  stroke-opacity: 1 !important;
  filter: none !important;
}
.disk-view__svg--engineering .lanyard-shadow,
.disk-view__svg--engineering .lanyard-edge,
.disk-view__svg--engineering .lanyard-reveal,
.disk-view__svg--engineering .lanyard-reveal-shadow {
  display: none !important;
}

/* ── Cord hole: outline only ─────────────────────────────────────────── */
.disk-view__svg--engineering .cord-hole-cutout {
  fill: none !important;
}
.disk-view__svg--engineering .cord-hole-outline {
  fill: none !important;
  stroke: #1a1a1a !important;
  stroke-opacity: 1 !important;
  filter: none !important;
}
.disk-view__svg--engineering .cord-hole-shadow,
.disk-view__svg--engineering .cord-hole-edge {
  display: none !important;
}

/* ── Stroke weight: slightly lighter for engineering-drawing clarity ── */
/* Exclude CNC glyph numbers — their stroke is controlled by VCC slider */
.disk-view__svg--engineering path:not(.bezel-number-glyph):not(.reticle-number-glyph),
.disk-view__svg--engineering line {
  stroke-width: 0.8px;
}

/* ── Number glyphs: stroke-only CNC font — preserve fill:none ───────────────── */
/* These are single-line <path> elements; the blanket path { fill } rule would   */
/* fill them solid.  Explicitly keep fill:none so they render as stroked glyphs. */
/* Reticle glyph SIZE is boosted by planning_disk_view.js via VisualControls     */
/* override during the offscreen render (no CSS transform hack).                 */
.disk-view__svg--engineering .bezel-number-glyph,
.disk-view__svg--engineering .reticle-number-glyph {
  fill: none !important;
  stroke: #1a1a1a !important;
}
/* Also boost <text> fallback labels on the reticle scale */
.disk-view__svg--engineering .scale-label {
  font-size: 4px !important;
  fill: #1a1a1a !important;
  stroke: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Teaching Aid — Nomenclature Labels (SVG callout overlays)
   Toggle-able engineering-drawing callouts with leader lines + dots.
   Hidden by default; revealed via Labels button.
   ═══════════════════════════════════════════════════════════════════════ */

.nomenclature-labels--hidden {
  display: none !important;
}

/* Leader line: solid orthogonal line, game-schematic style */
.nomenclature-leader {
  stroke: var(--planning-ink, #1a1a1a) !important;
  stroke-width: 0.6px !important;
  stroke-dasharray: none;
  fill: none !important;
  stroke-linecap: square;
}

/* Crosshair marker at the anchor point (replaces dot) */
.nomenclature-crosshair {
  stroke: var(--planning-ink, #1a1a1a) !important;
  stroke-width: 0.5px !important;
  fill: none !important;
}

/* Small filled dot at leader elbow */
.nomenclature-dot {
  fill: var(--planning-ink, #1a1a1a) !important;
  stroke: none !important;
}

/* Item number badge — circled index */
.nomenclature-badge-circle {
  fill: var(--planning-ink, #1a1a1a) !important;
  stroke: none !important;
}
.nomenclature-badge-num {
  font-family: 'Courier New', 'Consolas', monospace !important;
  font-size: 5px !important;
  fill: var(--planning-paper-bg, #e8dcb8) !important;
  stroke: none !important;
  text-anchor: middle;
  dominant-baseline: central;
  font-weight: 700;
}

/* Label frame — thin rectangle behind label text */
.nomenclature-frame {
  fill: rgba(232, 220, 184, 0.92) !important;
  stroke: var(--planning-ink, #1a1a1a) !important;
  stroke-width: 0.4px !important;
}

/* Text label: clean monospace, game-schematic style */
.nomenclature-text {
  font-family: 'Courier New', 'Consolas', monospace !important;
  font-size: 5.5px !important;
  fill: var(--planning-ink, #1a1a1a) !important;
  stroke: none !important;
  letter-spacing: 0.3px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── Animated Draw-On (leader lines) + Fade-In (labels) ──────── */
/* Leader line draws itself via stroke-dashoffset animation       */
.nomenclature-labels:not(.nomenclature-labels--hidden) .nomenclature-leader {
  animation: leaderDrawOn 0.5s ease-out forwards;
}
.nomenclature-labels:not(.nomenclature-labels--hidden) .nomenclature-frame,
.nomenclature-labels:not(.nomenclature-labels--hidden) .nomenclature-text,
.nomenclature-labels:not(.nomenclature-labels--hidden) .nomenclature-badge-circle,
.nomenclature-labels:not(.nomenclature-labels--hidden) .nomenclature-badge-num {
  opacity: 0;
  animation: labelFadeIn 0.3s ease-out 0.35s forwards;
}
.nomenclature-labels:not(.nomenclature-labels--hidden) .nomenclature-crosshair {
  opacity: 0;
  animation: labelFadeIn 0.2s ease-out 0.1s forwards;
}
.nomenclature-labels:not(.nomenclature-labels--hidden) .nomenclature-dot {
  opacity: 0;
  animation: labelFadeIn 0.2s ease-out 0.25s forwards;
}

@keyframes leaderDrawOn {
  from { stroke-dashoffset: 200; stroke-dasharray: 200; }
  to   { stroke-dashoffset: 0;   stroke-dasharray: 200; }
}
@keyframes labelFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Labels Toggle Button ─────────────────────────────────────────── */
.disk-view__labels-toggle {
  align-self: flex-end;
  padding: 4px 12px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--planning-ink, #3c3228);
  background: transparent;
  border: 1px solid var(--planning-ink-faded, rgba(60, 50, 40, 0.3));
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 4px;
}

.disk-view__labels-toggle:hover {
  background: rgba(26, 26, 26, 0.06);
  border-color: var(--planning-ink, #3c3228);
}

.disk-view__labels-toggle--active {
  background: var(--planning-ink, #3c3228);
  color: var(--planning-paper-bg, #e8dcb8);
  border-color: var(--planning-ink, #3c3228);
}

.disk-view__labels-toggle--active:hover {
  background: #2a2a2a;
}

/* ── Hover Tooltip — game-schematic style with accent bar ────────── */
.disk-view__tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 280px;
  padding: 8px 12px 8px 14px;
  background: #111;
  color: #f0ebe0;
  border-radius: 2px;
  border-left: 3px solid var(--planning-ink, #3c3228);
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 11px;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.3px;
}

.disk-view__tooltip strong {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.disk-view__tooltip-disk {
  font-size: 10px;
  color: #888;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.disk-view__tooltip-desc {
  font-size: 10px;
  color: #bbb;
  margin-top: 2px;
}

/* Responsive: stack vertically on narrow viewports */
@media (max-width: 900px) {
  .disk-view__row {
    flex-direction: column;
    align-items: center;
  }
  .disk-view__panel {
    max-width: 80%;
  }
}