/*
 * Production Allocation chart -- the one-ring portfolio map (sector arcs,
 * company logos floating inside them). Every selector is prefixed
 * .snapshot-radial__ so nothing collides with the archived three-level
 * chart's .snapshot3__ namespace (snapshot-sunburst.css).
 *
 * .snapshot-flow-stage-wrap (the outer stage frame -- border, background,
 * shadow) is defined for the Allocation tab in portfolio.html's own <style>
 * block; the public band's copy of that frame is the
 * .allocation-radial-embed--public block below. This file makes the stage
 * and #snapshotFlow (the chart's mount point) a two-level flex-centering
 * container so the SVG's width:100% resolves against a real width instead
 * of a shrink-to-fit 0.
 *
 * The JS sizes the viewBox to the stage's width in CSS px (and the height
 * the layout needs), so the SVG draws 1:1 and every size here is an
 * on-screen size.
 */
.snapshot-flow-stage-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
#snapshotFlow {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* the phone legend sits under the ring */
  align-items: center;
  justify-content: center;
}

.snapshot-radial__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: manipulation;
}
/* A still chart (`interactive: false`, public pages, C44) is a picture: the
   pointer passes through it, so no mark shows a pointer cursor or the hover
   look that says "click me". */
.snapshot-radial__svg--static,
.snapshot-radial__legend--static {
  pointer-events: none;
}

.snapshot-radial__hole {
  fill: transparent;
  stroke: rgba(148, 166, 190, 0.18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
/* Keyboard focus is drawn as a stroke in the focus colour, distinct from the
   hover look: WebKit paints `outline` on SVG shapes unreliably (A56). */
.snapshot-radial__hole:focus-visible {
  stroke: var(--ss-focus-ring);
  stroke-width: 2;
}

/* Sector arcs */
.snapshot-radial__arc {
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 150ms ease, filter 150ms ease;
}
.snapshot-radial__arc:hover {
  filter: brightness(1.14);
}
.snapshot-radial__arc.is-selected {
  filter: brightness(1.3);
  stroke-width: 2.5;
}
.snapshot-radial__arc:focus-visible {
  stroke: var(--ss-focus-ring);
  stroke-width: 2;
}
.snapshot-radial__arc.is-dimmed {
  opacity: 0.55;
}

/* Sector text, wide viewports: a callout beside the ring. */
.snapshot-radial__callout text {
  fill: rgba(241, 246, 252, 0.92);
}
.snapshot-radial__label-name--sector {
  font-size: 13px;
  font-weight: 700;
  fill: rgba(255, 255, 255, 0.97);
}
.snapshot-radial__label-value--sector {
  font-size: 12px;
  font-weight: 600;
  fill: rgba(226, 236, 248, 0.86);
}
.snapshot-radial__callout.is-dimmed {
  opacity: 0.45;
}

.snapshot-radial__callout {
  cursor: pointer;
  transition: opacity 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.snapshot-radial__callout-leader {
  fill: none;
  stroke: rgba(196, 212, 236, 0.62);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.snapshot-radial__callout-dot {
  pointer-events: none;
}
.snapshot-radial__callout-hit {
  fill: transparent;
}
.snapshot-radial__callout:hover .snapshot-radial__callout-leader,
.snapshot-radial__callout.is-selected .snapshot-radial__callout-leader {
  stroke: rgba(226, 236, 250, 0.9);
}
.snapshot-radial__callout.is-selected .snapshot-radial__label-name--sector {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sector legend, phone viewports: one row per arc, directly under the ring.
   Rows are contiguous full-width buttons, so the whole row is the touch
   target (28px tall, ~stage-wide) without spending more height than the
   text needs. Selection mirrors the arc: the selected row gets a tint, the
   rest dim like the arcs out of focus. */
.snapshot-radial__legend {
  align-self: stretch;
  display: grid;
  margin: 2px 0 0;
  padding: 0 4px 6px;
  list-style: none;
}
.snapshot-radial__legend[hidden] {
  display: none;
}
.snapshot-radial__legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 150ms ease, background-color 150ms ease;
}
.snapshot-radial__legend-row:focus-visible {
  outline: 2px solid var(--ss-focus-ring);
  outline-offset: -2px;
}
.snapshot-radial__legend-row.is-selected {
  background: rgba(148, 166, 190, 0.12);
}
.snapshot-radial__legend-row.is-dimmed {
  opacity: 0.55;
}
.snapshot-radial__legend-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.snapshot-radial__legend-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary, rgba(214, 226, 242, 0.78));
  font-size: var(--fs-small, 12px);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.snapshot-radial__legend-row.is-selected .snapshot-radial__legend-name {
  color: var(--text-primary, #eef4fb);
}
.snapshot-radial__legend-value {
  flex: 0 0 auto;
  color: var(--text-primary, #eef4fb);
  font-size: var(--fs-small, 12px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Holding markers, one look on every surface (founder 2026-10-08, C30): a
   company logo fills its disc and a thin ring in the sector colour (its
   stroke, set in JS) draws the edge, so tile-shaped and transparent logo
   files share one round edge; the navy disc underneath keeps a transparent
   logo off the arc behind it. A fund's ticker badge is the same disc and
   ring with its ticker inside. The ring carries hover, selection and
   keyboard focus. */
.snapshot-radial__logo {
  cursor: pointer;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 150ms ease;
}
.snapshot-radial__logo-hit {
  fill: transparent;
}
.snapshot-radial__holding-logo-bg {
  fill: rgba(11, 23, 44, 0.95);
}
.snapshot-radial__holding-logo {
  pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(8, 16, 32, 0.85));
}
.snapshot-radial__logo-ticker {
  pointer-events: none;
  fill: #e6eefb;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.snapshot-radial__holding-logo-ring {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: stroke 150ms ease, stroke-width 150ms ease;
}
.snapshot-radial__logo:hover .snapshot-radial__holding-logo-ring {
  stroke: rgba(214, 229, 249, 0.95);
  stroke-width: 2;
}
.snapshot-radial__logo.is-selected .snapshot-radial__holding-logo-ring {
  stroke: #eef5ff;
  stroke-width: 2.5;
}
/* The focused group itself carries the focus stroke, as an arc does (ruling
   17), and its ring paints it; the disc, hit area and ticker opt out of the
   inherited stroke so the ring stays the one mark that changes. */
.snapshot-radial__logo:focus-visible {
  stroke: var(--ss-focus-ring);
  stroke-width: 2;
}
.snapshot-radial__logo-hit,
.snapshot-radial__holding-logo-bg,
.snapshot-radial__logo-ticker {
  stroke: none;
}
.snapshot-radial__logo:focus-visible .snapshot-radial__holding-logo-ring {
  stroke: inherit;
  stroke-width: inherit;
}
.snapshot-radial__logo.is-dimmed {
  opacity: 0.5;
}

.snapshot-radial__measure {
  pointer-events: none;
}

/* The public band's stage (C2): its own copy of the Allocation tab's frame
   (same colours and shadow), sized for a marketing column. Public-site pages
   drop the frame (public-site.css). */
.allocation-radial-embed--public {
  margin: 0 auto;
}
.allocation-radial-embed--public .snapshot-flow-stage-wrap {
  position: relative;
  min-height: clamp(360px, 44vh, 460px);
  overflow: hidden;
  border: 1px solid rgba(116, 143, 181, 0.22);
  border-radius: var(--ss-radius-lg);
  background:
    radial-gradient(circle at 25% 18%, rgba(31, 70, 130, 0.16), transparent 34%),
    radial-gradient(circle at 78% 82%, rgba(143, 73, 30, 0.10), transparent 30%),
    #040b18;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38);
}
.allocation-radial-caption {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted, #a3b6c8);
}

.snapshot-radial__empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted, #8fa0b8);
}

/*
 * First-run interaction discovery cue -- same design language as the
 * archived three-level chart's own cue (snapshot-sunburst.css's
 * .snapshot3__cue*), copied rather than shared so this file has no
 * runtime dependency on that one. Sits in the stage's top-left corner,
 * always empty for a centered square chart whose ring never reaches it.
 */
.snapshot-radial__cue {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation: snapshot-radial-cue-in 320ms ease-out 800ms both;
}
.snapshot-radial__cue.is-dismissed {
  animation: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.snapshot-radial__cue-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(139, 172, 216, 0.34);
  border-radius: 999px;
  background: rgba(11, 24, 45, 0.88);
  box-shadow: 0 2px 10px rgba(2, 8, 20, 0.42);
  color: #eef4fb;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  animation: snapshot-radial-cue-pulse 900ms ease-in-out 1180ms 1 both;
}
.snapshot-radial__cue-icon {
  width: 12px;
  height: 12px;
  flex: none;
  color: rgba(147, 185, 240, 0.95);
}

@keyframes snapshot-radial-cue-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes snapshot-radial-cue-pulse {
  0% { transform: scale(1); box-shadow: 0 2px 10px rgba(2, 8, 20, 0.42); }
  45% { transform: scale(1.045); box-shadow: 0 2px 16px rgba(88, 140, 216, 0.42); }
  100% { transform: scale(1); box-shadow: 0 2px 10px rgba(2, 8, 20, 0.42); }
}

@media (max-width: 767.98px) {
  .snapshot-radial__cue {
    top: 8px;
    left: 8px;
  }
  .snapshot-radial__cue-pill {
    padding: 4px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snapshot-radial__arc,
  .snapshot-radial__logo,
  .snapshot-radial__legend-row,
  .snapshot-radial__callout {
    transition: none;
  }
  .snapshot-radial__cue {
    animation: none;
    opacity: 1;
  }
  .snapshot-radial__cue-pill {
    animation: none;
  }
  .snapshot-radial__cue.is-dismissed {
    transition: none;
  }
}