/* ============================================================
   Career Launchpad — shared IKIGAI diagram component (styles)
   ------------------------------------------------------------
   Scoped entirely under .ikigai-diagram so it can be dropped into
   any page. Colors are CSS custom properties that read the
   Direction-D palette (public/career-shared/dd.css) when present,
   with hex fallbacks so the component still renders sanely on a
   page that hasn't loaded dd.css (e.g. a future interview-app
   integration with its own theme).
   ============================================================ */

.ikigai-diagram {
  --ikigai-line: var(--line, #232323);
  --ikigai-fg: var(--fg, #ededed);
  --ikigai-dim: var(--dim, #9a9a9a);
  --ikigai-faint: var(--faint, #8a8a8a);
  --ikigai-cardbg: var(--cardbg, #0a0a0a);
  --ikigai-font-mono: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
  --ikigai-font-sans: var(--font-sans, system-ui, -apple-system, sans-serif);

  /* one color per circle — reuses existing DD palette variables (red/green
     plus two of the domain accents already defined in dd.css) rather than
     inventing a new palette. */
  --ikigai-c-love: var(--red, #ff2a1a);
  --ikigai-c-goodAt: var(--green, #3ddc84);
  --ikigai-c-paidFor: var(--dom-secops, #9B6BFF);
  --ikigai-c-worldNeeds: var(--dom-ot, #FF9F45);

  position: relative;
  width: 100%;
}

.ikigai-diagram__svg {
  display: block;
  width: 100%;
  height: auto;
}

.ikigai-diagram__circle {
  stroke-width: 1.5;
  fill-opacity: 0.05;
  transition: fill-opacity 0.3s ease, stroke-dasharray 0.3s ease;
}
.ikigai-diagram__circle--love { fill: var(--ikigai-c-love); stroke: var(--ikigai-c-love); }
.ikigai-diagram__circle--goodAt { fill: var(--ikigai-c-goodAt); stroke: var(--ikigai-c-goodAt); }
.ikigai-diagram__circle--paidFor { fill: var(--ikigai-c-paidFor); stroke: var(--ikigai-c-paidFor); }
.ikigai-diagram__circle--worldNeeds { fill: var(--ikigai-c-worldNeeds); stroke: var(--ikigai-c-worldNeeds); }

.ikigai-diagram__circle.is-untouched { stroke-dasharray: 4 4; fill-opacity: 0.05; }
.ikigai-diagram__circle.is-partial { fill-opacity: 0.14; }
.ikigai-diagram__circle.is-complete { fill-opacity: 0.24; }

/* results mode: fill intensity is driven by the per-lens contribution
   (set via setResult -> --ikigai-fill-opacity). Higher specificity than
   the .is-partial/.is-complete rules above so it wins once results are
   shown; stroke-dasharray is intentionally left alone so an untouched
   lens still reads as dashed even on the results screen. */
.ikigai-diagram.is-results .ikigai-diagram__circle {
  fill-opacity: var(--ikigai-fill-opacity, 0.16);
}

.ikigai-diagram__label {
  font-family: var(--ikigai-font-mono);
  /* SVG text scales with the rendered width via the 400x400 viewBox, so a
     flat font-size can't be right for every host: the Navigator sidebar
     "Your diagram so far" card is only ~222px wide at desktop (~0.56x),
     while the results diagram is capped at 460px (~1.15x). --ikigai-label-
     size lets each host correct for its own scale; the default (20) is
     tuned for the narrower sidebar and results overrides it below.
     C3 (RO-3): short word only (see ikigai-diagram.js), not the full
     wrapped phrase, so this single size reads clearly without colliding
     with the circle stroke or answer dots. */
  font-size: var(--ikigai-label-size, 20px);
  letter-spacing: 0.06em;
  fill: var(--ikigai-faint);
  text-transform: uppercase;
}

/* Results host renders at up to 460px (vs. the ~222px sidebar default
   above), so the same user-unit value would look oversized there; 15
   still clears 11 real px at the narrowest (~316px at a 390px viewport). */
#resultsDiagram {
  --ikigai-label-size: 15px;
}

.ikigai-diagram__overlap-label {
  font-family: var(--ikigai-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  fill: var(--ikigai-dim);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.ikigai-diagram.is-results .ikigai-diagram__overlap-label { opacity: 1; }

.ikigai-diagram__center-label {
  font-family: var(--ikigai-font-sans);
  font-size: 13px;
  font-weight: 600;
  fill: var(--ikigai-fg);
  letter-spacing: 0.04em;
}
.ikigai-diagram__center-sub {
  font-family: var(--ikigai-font-mono);
  font-size: 10px;
  fill: var(--ikigai-dim);
}

.ikigai-diagram__dot {
  fill: var(--ikigai-fg);
  stroke: var(--ikigai-cardbg);
  stroke-width: 1.5;
  cursor: pointer;
  opacity: 0;
  /* transform carries the dot's real position (cx/cy stay at 0) so an
     upsert that moves an existing dot animates smoothly -- spec v2 §A. */
  transition: transform 0.3s ease, r 0.3s ease, opacity 0.3s ease;
  outline-offset: 2px;
}
.ikigai-diagram__dot.is-in { opacity: 1; }
.ikigai-diagram__dot:focus-visible { outline: 2px solid var(--ikigai-fg); }
.ikigai-diagram__dot--passion { stroke: var(--ikigai-c-love); }
.ikigai-diagram__dot--skill { stroke: var(--ikigai-c-goodAt); }
.ikigai-diagram__dot--market { stroke: var(--ikigai-c-paidFor); }
.ikigai-diagram__dot--purpose { stroke: var(--ikigai-c-worldNeeds); }
.ikigai-diagram__dot--character { stroke: var(--ikigai-fg); }

/* Results-mode domain markers (spec v2 §B6): plotted at the weighted
   average of the four circle centers. Primary = filled + labeled; the
   other four = small ghost markers, name on hover/focus via the same
   tooltip system as answer dots. */
.ikigai-diagram__marker {
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
  outline-offset: 2px;
}
.ikigai-diagram__marker:focus-visible { outline: 2px solid var(--ikigai-fg); }
.ikigai-diagram__marker--ghost {
  fill: var(--ikigai-cardbg);
  stroke: var(--ikigai-faint);
  stroke-width: 1.5;
  opacity: 0.85;
}
.ikigai-diagram__marker--primary {
  fill: var(--ikigai-fg);
  stroke: var(--ikigai-cardbg);
  stroke-width: 2;
}
.ikigai-diagram__marker-label {
  font-family: var(--ikigai-font-sans);
  font-size: 11px;
  font-weight: 600;
  fill: var(--ikigai-fg);
  text-anchor: middle;
  pointer-events: none;
}

.ikigai-diagram__legend {
  margin: 10px 0 0;
  font-family: var(--ikigai-font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ikigai-faint);
}

/* Canonical-phrase legend (spec C2/C3) — the four full phrases at body
   size (>=16px desktop, >=15px phone) with a colour swatch per circle.
   Overrides the caption's 11px mono; this is real body copy, not a
   caption, so it uses the sans font like the rest of the page body. */
.ikigai-diagram__legend--map {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--ikigai-font-sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ikigai-fg);
}
.ikigai-diagram__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ikigai-diagram__legend-swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
}
@media (max-width: 640px) {
  .ikigai-diagram__legend--map {
    font-size: 15px;
  }
}

.ikigai-diagram__tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  max-width: 240px;
  background: var(--ikigai-cardbg);
  color: var(--ikigai-fg);
  border: 1px solid var(--ikigai-line);
  font-family: var(--ikigai-font-mono);
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.ikigai-diagram__tooltip-q { font-weight: 600; margin-bottom: 4px; color: var(--ikigai-fg); }
.ikigai-diagram__tooltip-a { color: var(--ikigai-dim); }

@media (prefers-reduced-motion: reduce) {
  .ikigai-diagram__circle,
  .ikigai-diagram__overlap-label,
  .ikigai-diagram__dot {
    transition-duration: 0.001ms !important;
  }
}

/* Click-to-zoom overlay (round 2A item #4) — presentation only, no dot
   placement logic here. `el` (the same .ikigai-diagram node, dots and all)
   is reparented into the frame below and FLIP-animated via inline
   transform/transition set by ikigai-diagram.js. */
.ikigai-diagram__svg { cursor: zoom-in; }
.ikigai-diagram.is-zoomed .ikigai-diagram__svg { cursor: default; }
.ikigai-diagram.is-zoomed { width: 100%; max-width: none; margin: 0; }

.ikigai-diagram__zoom-placeholder { visibility: hidden; }

.ikigai-diagram-zoom-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ikigai-diagram-zoom-frame {
  position: relative;
  width: 90vmin;
  max-height: 90vh;
  overflow: auto;
}
.ikigai-diagram-zoom-close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ikigai-cardbg);
  color: var(--ikigai-fg);
  border: 1px solid var(--ikigai-line);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ikigai-diagram-zoom-close:hover { color: var(--red, #ff2a1a); border-color: var(--red, #ff2a1a); }

@media (prefers-reduced-motion: reduce) {
  .ikigai-diagram.is-zoomed { transition: none !important; }
}

/* Mobile: the SVG already scales via viewBox; the tooltip becomes a fixed
   bottom sheet instead of a positioned popover (the JS skips inline
   top/left placement at this width — see ikigai-diagram.js). */
@media (max-width: 640px) {
  .ikigai-diagram__tooltip {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
    max-width: none;
  }
}