/* OMOIKANE-528 — /dashboard Lenses + graph fragment styles.
 *
 * Editorial-almanac register: Cormorant Garamond display, Manrope
 * body, Newsreader long-form. Restrained palette, atmospheric depth,
 * typography-driven hierarchy.
 *
 * Theme-awareness contract: every background / surface / text token
 * is read from the existing site-wide CSS vars that ARE redefined
 * inside `:root[data-theme="dark"]` (see app/static/main.css around
 * line 7593). Specifically:
 *   --c-surface     → light: #fbf9f4   / dark: #1c1f26
 *   --c-page-bg     → light: parchment / dark: #15171c
 *   --c-text        → light: #2a2a2a   / dark: #e0dbcd
 *   --c-text-muted  → light: #857f74   / dark: #9c9588
 *   --c-vermilion   → light: #d44d2a   / dark: #d76549
 *   --c-gold        → light: #b89968   / dark: #c4a36b
 *   --c-navy        → light: #1e2d4f   / dark: #e8e1d0 (note: flips!)
 *   --c-border      → light: #e8e3d8   / dark: #2c2f37
 *
 * The bug we replaced: previously used `var(--c-cream, …)` which is
 * NOT redefined in dark mode → graph frame stayed cream in both
 * themes (audit 2026-05-23 confirmed light + dark PNGs were
 * byte-identical). Switching to --c-surface / --c-page-bg / --c-text
 * means the frame inherits the theme automatically.
 */

/* ── Lenses section heading ─────────────────────────────────────── */

.dash-desk__graphs {
  margin-top: var(--s-5, 2rem);
  padding-top: var(--s-4, 1.5rem);
  border-top: 1px solid var(--c-border, #e8e3d8);
}

.dash-desk__graphs-intro {
  color: var(--c-text-muted, #857f74);
  font-style: normal;
  font-family: var(--font-serif); /* OMOIKANE-1672: Cormorant was never loaded (Georgia fallback) */
  font-size: 1.15em;
  letter-spacing: 0.01em;
  margin: 0 0 var(--s-3, 1rem) 0;
}

/* ── Tab strip ──────────────────────────────────────────────────── */

.dash-graph-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2, 0.5rem);
  margin-bottom: var(--s-4, 1.5rem);
  position: relative;
}

.dash-graph-picker__tab {
  background: transparent;
  border: 1px solid var(--c-border, #e8e3d8);
  color: var(--c-text, #2a2a2a);
  padding: var(--s-2, 0.5rem) var(--s-3, 1rem);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  border-radius: 4px;
  position: relative;
  transition: background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

.dash-graph-picker__tab:hover:not([disabled]) {
  background: var(--c-surface, #fbf9f4);
  border-color: var(--c-gold, #b89968);
}

.dash-graph-picker__tab:focus-visible {
  outline: 2px solid var(--c-gold, #b89968);
  outline-offset: 2px;
}

.dash-graph-picker__tab.is-active,
.dash-graph-picker__tab[aria-pressed="true"] {
  background: var(--c-navy, #1e2d4f);
  border-color: var(--c-navy, #1e2d4f);
  color: var(--c-page-bg, #f5f1e8);
}

:root[data-theme="dark"] .dash-graph-picker__tab.is-active,
:root[data-theme="dark"] .dash-graph-picker__tab[aria-pressed="true"] {
  background: var(--c-gold-darker, #9c7e4f);
  border-color: var(--c-gold-darker, #9c7e4f);
  color: #15171c;
}

/* ── Slideshow progress bar (OMOIKANE-528) ──────────────────────── */

.dash-graph-picker__progress {
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
}

/* OMOIKANE-534 — the v1 progress bar used `transition: width 10s linear`,
 * which animates a LAYOUT property and forces a reflow + paint every
 * frame for 10 seconds straight. That kicked the whole .dash-graph
 * container into the compositor every frame; combined with the
 * drop-shadow filter on .dash-graph__svg below, SVG text + edges
 * re-rasterised continuously → operator saw "trembling pixels around
 * fonts and edges of the graphics".
 *
 * Fix: animate `transform: scaleX(0→1)` instead. `transform` is a
 * compositor-only property — no layout, no paint, no font
 * re-rasterisation. Same visual result, ~0 CPU cost.
 */
.dash-graph-picker__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    var(--c-gold, #b89968) 0%,
    var(--c-gold-darker, #9c7e4f) 100%);
  opacity: 0.8;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 10s linear;
  will-change: transform;
}

.dash-graph-picker__progress[data-active="true"] .dash-graph-picker__progress-fill {
  transform: scaleX(1);
}

.dash-graph-picker__progress[data-paused="true"] .dash-graph-picker__progress-fill {
  transition: none;
}

/* ── Graph frame ────────────────────────────────────────────────── */

.dash-graph {
  background: var(--c-surface, #fbf9f4);
  background-image:
    radial-gradient(1200px 600px at 80% -10%,
      color-mix(in srgb, var(--c-gold, #b89968) 6%, transparent) 0%,
      transparent 60%),
    radial-gradient(800px 500px at -10% 110%,
      color-mix(in srgb, var(--c-gold-darker, #9c7e4f) 5%, transparent) 0%,
      transparent 55%);
  border: 1px solid var(--c-border, #e8e3d8);
  border-radius: 6px;
  padding: var(--s-4, 1.5rem);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  color: var(--c-text, #2a2a2a);
  position: relative;
  overflow: hidden;
}

/* Hairline gold corner accents — editorial-almanac flourish. */
.dash-graph::before,
.dash-graph::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--c-gold, #b89968);
  opacity: 0.45;
  pointer-events: none;
}
.dash-graph::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.dash-graph::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.dash-graph--placeholder {
  align-items: center;
  justify-content: center;
  background: transparent;
  background-image: none;
  border-style: dashed;
}

/* OMOIKANE-NNN — zoom button + modal. Operator-requested. */
.dash-graph__zoom-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--c-border, #e8e3d8);
  background: var(--c-surface, #fbf9f4);
  color: var(--c-text, #2a2a2a);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}
.dash-graph__zoom-btn:hover {
  background: color-mix(in srgb, var(--c-surface, #fbf9f4) 70%, var(--c-gold, #b89968) 10%);
  border-color: var(--c-gold, #b89968);
}
.dash-graph__zoom-btn:focus-visible {
  outline: 2px solid var(--c-gold, #b89968);
  outline-offset: 2px;
}

/* OMOIKANE-NNN — view toggle (bubbles + ikigai). Sits to the left of
 * the zoom button. Italic Cormorant pill, transparent until hover. */
.dash-graph__view-toggle {
  position: absolute;
  top: 12px;
  right: 52px;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid var(--c-border, #e8e3d8);
  background: var(--c-surface, #fbf9f4);
  color: var(--c-text, #2a2a2a);
  font-family: var(--font-serif); /* OMOIKANE-1672: Cormorant was never loaded (Georgia fallback) */
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  z-index: 2;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}
.dash-graph__view-toggle:hover {
  background: color-mix(in srgb, var(--c-surface, #fbf9f4) 70%, var(--c-gold, #b89968) 10%);
  border-color: var(--c-gold, #b89968);
}
.dash-graph__view-toggle:focus-visible {
  outline: 2px solid var(--c-gold, #b89968);
  outline-offset: 2px;
}

/* OMOIKANE-575 — empty-state chip when Personalised was clicked but
 * the user has no target_role_families set. Sits centered at the top
 * of the frame, below the toggle/zoom row. */
.dash-graph__view-chip {
  position: absolute;
  top: 56px;
  right: 12px;
  max-width: min(60ch, calc(100% - 24px));
  padding: 8px 14px;
  border-radius: 18px;
  border: 1px solid var(--c-gold, #b89968);
  background: color-mix(in srgb, var(--c-surface, #fbf9f4) 80%, var(--c-gold, #b89968) 8%);
  color: var(--c-text, #2a2a2a);
  font-family: var(--font-serif); /* OMOIKANE-1672: Cormorant was never loaded (Georgia fallback) */
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.01em;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dash-graph__view-chip a {
  color: var(--c-gold-darker, #9c7e4f);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.dash-graph__view-chip a:hover {
  border-bottom-style: solid;
}

.dash-graph-zoom__overlay {
  position: fixed; inset: 0;
  background: color-mix(in srgb, #000 70%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 4vh 4vw;
}
.dash-graph-zoom__panel {
  position: relative;
  width: 75vw;
  max-width: 1600px;
  min-height: 75vh;
  max-height: 95vh;
  background: var(--c-surface, #fbf9f4);
  border: 1px solid var(--c-border, #e8e3d8);
  border-radius: 8px;
  padding: 40px 24px 24px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dash-graph-zoom__close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: var(--c-text, #2a2a2a);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.dash-graph-zoom__close:hover {
  background: color-mix(in srgb, var(--c-text, #000) 8%, transparent);
}
.dash-graph-zoom__close:focus-visible {
  outline: 2px solid var(--c-gold, #b89968);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .dash-graph-zoom__panel { width: 92vw; min-height: 70vh; }
}

.dash-graph__placeholder {
  margin: 0;
  font-family: var(--font-serif); /* OMOIKANE-1672: Cormorant was never loaded (Georgia fallback) */
  font-style: normal;
  font-size: 1.3em;
  color: var(--c-text-muted, #857f74);
  text-align: center;
  letter-spacing: 0.015em;
}

.dash-graph__desc {
  margin: 0 0 var(--s-3, 1rem) 0;
  color: var(--c-text, #2a2a2a);
  font-family: var(--font-sans); /* OMOIKANE-1672: Newsreader was never loaded (Georgia fallback) */
  font-size: 0.95em;
  line-height: 1.55;
  max-width: 78ch;
}

.dash-graph__svg {
  width: 100%;
  height: auto;
  max-height: 560px;
  display: block;
  /* OMOIKANE-534: drop-shadow filter removed. The filter promoted the
   * SVG into its own GPU layer that re-rasterised text + edges every
   * compositor frame, especially while the slideshow progress bar was
   * transitioning — operator saw "trembling pixels around fonts +
   * edges". The visual lift it provided wasn't worth the cost; we
   * already have the hairline gold corner accents + the radial
   * gradient on .dash-graph for depth. */
}

.dash-graph__empty {
  margin: var(--s-3, 1rem) 0;
  padding: var(--s-3, 1rem) var(--s-4, 1.5rem);
  background: color-mix(in srgb, var(--c-surface, #fbf9f4) 80%, var(--c-gold, #b89968) 8%);
  border-left: 3px solid var(--c-gold, #b89968);
  font-family: var(--font-sans); /* OMOIKANE-1672: Newsreader was never loaded (Georgia fallback) */
  color: var(--c-text, #2a2a2a);
  font-style: normal;
  border-radius: 0 4px 4px 0;
}

.dash-graph__fallback {
  margin-top: var(--s-3, 1rem);
  font-size: 0.9em;
  text-align: right;
}

.dash-graph__fallback a {
  color: var(--c-text-muted, #857f74);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: 0.02em;
  border-bottom: 1px dashed currentColor;
  text-decoration: none;
}
.dash-graph__fallback a:hover { color: var(--c-gold, #b89968); }

.dash-graph--coming-soon {
  background: transparent;
  background-image: none;
  border-style: dashed;
}

.dash-graph--error {
  border-left: 4px solid var(--c-gold-darker, #9c7e4f);
}

/* ── SVG: focus rings + glyph interactivity ─────────────────────── */

.dash-sankey__node,
.dash-constellation__node,
.dash-bubbles__bubble,
.dash-ikigai__cell {
  cursor: pointer;
}

.dash-sankey__node:focus-visible rect,
.dash-constellation__node:focus-visible circle,
.dash-bubbles__bubble:focus-visible circle,
.dash-ikigai__cell:focus-visible circle {
  outline: 2px solid var(--c-gold, #b89968);
  outline-offset: 3px;
}

.dash-sankey__links path,
.dash-horizon__paths polygon {
  transition: stroke-opacity 180ms ease-out, fill-opacity 180ms ease-out;
}

/* OMOIKANE-534: sweet-spot glow no longer uses drop-shadow filter
 * (compositor-heavy). The vermilion halo from the renderer's
 * surrounding circle carries the emphasis on its own. */

.dash-constellation__ring {
  fill: none;
  stroke: var(--c-gold, #b89968);
  stroke-opacity: 0.18;
  stroke-dasharray: 2 4;
  stroke-width: 1;
}

.dash-bubbles__grid line {
  stroke: var(--c-border, #e8e3d8);
  stroke-opacity: 0.6;
  stroke-dasharray: 1 3;
  stroke-width: 1;
}

.dash-horizon__paths polygon:hover {
  fill-opacity: 0.30;
}

/* OMOIKANE-534: staggered entry animation removed. With 30-80
 * elements per graph + the 10s slideshow re-rendering every cycle,
 * the cascading opacity + translateY tweens fired ~80 times per
 * cycle and (because each animated element promoted itself into
 * a compositor layer) compounded into the "Mario Bros pixels"
 * shimmer the operator flagged. Static paint is cleaner. */
.dash-graph svg [data-stagger] {
  opacity: 1;
}

/* ── Tabular fallback ───────────────────────────────────────────── */

.dash-graph-table {
  max-width: 960px;
  margin: var(--s-4, 1.5rem) auto;
  color: var(--c-text, #2a2a2a);
}

.dash-graph-table__sub {
  font-family: var(--font-sans); /* OMOIKANE-1672: Newsreader was never loaded (Georgia fallback) */
  font-style: normal;
  margin-bottom: var(--s-3, 1rem);
  color: var(--c-text-muted, #857f74);
}

.dash-graph-table__table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.95em;
  background: var(--c-surface, #fbf9f4);
}

.dash-graph-table__table th,
.dash-graph-table__table td {
  padding: var(--s-2, 0.5rem) var(--s-3, 1rem);
  text-align: left;
  border-bottom: 1px solid var(--c-border, #e8e3d8);
  color: var(--c-text, #2a2a2a);
}

.dash-graph-table__table th {
  background: color-mix(in srgb, var(--c-surface, #fbf9f4) 70%, var(--c-gold, #b89968) 10%);
  font-weight: 600;
  color: var(--c-text, #2a2a2a);
  font-family: var(--font-sans); /* OMOIKANE-1672: Cormorant was never loaded (Georgia fallback); a column label, like every th */
  font-size: 1.05em;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.dash-graph-table__table tbody tr:hover {
  background: color-mix(in srgb, var(--c-surface, #fbf9f4) 70%, var(--c-gold, #b89968) 5%);
}

.dash-graph-table__back {
  margin-top: var(--s-4, 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .dash-graph-picker__tab,
  .dash-sankey__links path,
  .dash-horizon__paths polygon,
  .dash-graph svg [data-stagger],
  .dash-graph-picker__progress-fill {
    transition: none !important;
    animation: none !important;
  }
  .dash-graph svg [data-stagger] {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .dash-graph-picker { flex-direction: column; }
  .dash-graph-picker__tab { text-align: left; }
  .dash-graph-table__table { font-size: 0.85em; }
  .dash-graph-table__table th,
  .dash-graph-table__table td { padding: var(--s-2, 0.5rem); }
  .dash-graph::before,
  .dash-graph::after { display: none; }
}

/* OMOIKANE-1350 — label legibility + a real mobile fallback.
   Halo behind every graph label so overlapping labels + connector lines stay
   individually readable. The radial lenses pack 20-30 occupation labels that
   overprint on desktop; paint-order:stroke draws a surface-coloured stroke
   UNDER the fill, giving each label a small cut-out halo. */
.dash-graph__svg text {
  paint-order: stroke;
  stroke: var(--c-surface, #fbf9f4);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* On phones the fixed 960x540 viewBox scales down so far the ~10px labels
   render at ~3px (unreadable). Hide the in-chart labels there — the chart stays
   a visual impression, node aria-labels still serve screen readers, and the
   "Read the underlying data as a table" fallback is promoted to a clear,
   un-muted action so the full detail is one tap away. */
@media (max-width: 560px) {
  .dash-graph__svg text { display: none; }
  .dash-graph__fallback a {
    display: inline-block;
    margin-top: var(--s-2, 0.5rem);
    color: var(--c-vermilion, #c75135);
    font-weight: 600;
    text-decoration: underline;
  }
}