/* Static SSR preview styles, loaded directly by the landing page. */
.landing-portfolio {
  --landing-preview-ink: var(--landing-ink, #1a1a1a);
  --landing-preview-brand: var(--landing-brand, #ecff79);
  --landing-preview-light: var(--landing-light, #e6e6e6);
  --landing-preview-muted: var(--landing-muted, #9a9a9a);
  --landing-preview-white: #fff;
  --landing-preview-sage: #dae0b4;
  --landing-preview-lilac: #eaafff;
  --landing-preview-surface: color-mix(in srgb, var(--landing-preview-ink) 96.5%, var(--landing-preview-white));
  --landing-preview-line: color-mix(in srgb, var(--landing-preview-light) 10%, transparent);
  --landing-preview-panel: color-mix(in srgb, var(--landing-preview-surface) 80%, transparent);
  min-width: 0;
  border: 1px solid var(--landing-preview-line);
  background: color-mix(in srgb, var(--landing-preview-surface) 60%, transparent);
  color: var(--landing-preview-light);
  font-family: var(--dynahub-body-font, sans-serif);
}

.landing-portfolio__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--landing-preview-line);
  padding: 1rem 1.25rem;
}

.landing-portfolio__title {
  color: var(--landing-preview-white);
  font-family: var(--dynahub-display-font, sans-serif);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.landing-portfolio__subtitle {
  color: var(--landing-preview-muted);
  font-size: 0.75rem;
  line-height: 1rem;
}

.landing-portfolio__badge {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--landing-preview-brand) 40%, transparent);
  padding: 0.25rem 0.625rem;
  color: var(--landing-preview-brand);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-portfolio__kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--landing-preview-line);
}

.landing-portfolio__kpi {
  min-width: 0;
  background: var(--landing-preview-panel);
  padding: 1rem 1.25rem;
}

.landing-portfolio__eyebrow {
  color: var(--landing-preview-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.landing-portfolio__counter {
  margin-top: 0.5rem;
  color: var(--landing-preview-white);
  font-family: var(--dynahub-display-font, sans-serif);
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.landing-portfolio__kpi[data-tone="brand"] .landing-portfolio__counter {
  color: var(--landing-preview-brand);
}

.landing-portfolio__kpi[data-tone="lilac"] .landing-portfolio__counter {
  color: var(--landing-preview-lilac);
}

.landing-portfolio__details {
  display: grid;
  gap: 1px;
  background: var(--landing-preview-line);
}

.landing-portfolio__geography,
.landing-portfolio__activity {
  min-width: 0;
  background: var(--landing-preview-panel);
  padding: 1.25rem;
}

.landing-portfolio__map-title {
  margin-bottom: 1rem;
}

.landing-portfolio__map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--landing-preview-line);
  background: var(--landing-preview-surface);
}

.landing-portfolio__map-art,
.landing-portfolio__map-controls {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.landing-portfolio__grid-line {
  fill: none;
  stroke: var(--landing-preview-light);
  stroke-opacity: 0.07;
  stroke-width: 0.3;
}

.landing-portfolio__glow-start {
  stop-color: var(--landing-preview-brand);
  stop-opacity: 0.25;
}

.landing-portfolio__glow-end {
  stop-color: var(--landing-preview-brand);
  stop-opacity: 0;
}

.landing-portfolio__contours {
  fill: none;
  stroke: var(--landing-preview-light);
  stroke-opacity: 0.12;
  stroke-width: 0.3;
}

.landing-portfolio__zone {
  fill: var(--landing-preview-brand);
  fill-opacity: 0.04;
  stroke: var(--landing-preview-brand);
  stroke-opacity: 0.4;
  stroke-width: 0.3;
  stroke-dasharray: 1.2 1;
}

.landing-portfolio [data-status="active"] {
  --landing-preview-status-color: var(--landing-preview-brand);
}

.landing-portfolio [data-status="idle"] {
  --landing-preview-status-color: var(--landing-preview-sage);
}

.landing-portfolio [data-status="noData"] {
  --landing-preview-status-color: color-mix(in srgb, var(--landing-preview-light) 35%, transparent);
}

.landing-portfolio [data-status="alert"] {
  --landing-preview-status-color: var(--landing-preview-lilac);
}

.landing-portfolio__point {
  fill: var(--landing-preview-status-color);
}

.landing-portfolio [data-preview-point][data-selected="true"] .landing-portfolio__point {
  r: 1.6px;
}

.landing-portfolio__selection-ring {
  fill: none;
  stroke: var(--landing-preview-white);
  stroke-width: 0.3;
  opacity: 0;
}

.landing-portfolio [data-preview-point][data-selected="true"] .landing-portfolio__selection-ring {
  opacity: 0.8;
}

.landing-portfolio__alert-ring {
  fill: none;
  stroke: var(--landing-preview-lilac);
  stroke-width: 0.3;
  opacity: 0.8;
}

.landing-portfolio__map-controls {
  list-style: none;
}

.landing-portfolio__map-marker {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* The illustrative coordinates match the SVG; no inline styles are needed. */
.landing-portfolio__map-marker[data-marker="A-1042"] { left: 22%; top: 38%; }
.landing-portfolio__map-marker[data-marker="A-1057"] { left: 31%; top: 52%; }
.landing-portfolio__map-marker[data-marker="A-1063"] { left: 44%; top: 30%; }
.landing-portfolio__map-marker[data-marker="A-1071"] { left: 52%; top: 61%; }
.landing-portfolio__map-marker[data-marker="A-1088"] { left: 61%; top: 42%; }
.landing-portfolio__map-marker[data-marker="A-1094"] { left: 72%; top: 26%; }
.landing-portfolio__map-marker[data-marker="A-1101"] { left: 83%; top: 70%; }
.landing-portfolio__map-marker[data-marker="A-1110"] { left: 38%; top: 74%; }
.landing-portfolio__map-marker[data-marker="A-1123"] { left: 67%; top: 58%; }

.landing-portfolio__map-button {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.landing-portfolio__map-button:focus-visible {
  outline: 2px solid var(--landing-preview-brand);
  outline-offset: 3px;
}

.landing-portfolio__activity {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.landing-portfolio__signals-title {
  margin-bottom: 0.75rem;
}

.landing-portfolio__signals {
  border-block: 1px solid var(--landing-preview-line);
  list-style: none;
}

.landing-portfolio__signal {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.625rem;
  color: color-mix(in srgb, var(--landing-preview-light) 85%, transparent);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.landing-portfolio__signal + .landing-portfolio__signal {
  border-top: 1px solid var(--landing-preview-line);
}

.landing-portfolio__signal-text {
  min-width: 0;
}

.landing-portfolio__signal-id {
  margin-left: auto;
  color: var(--landing-preview-muted);
  font-family: var(--dynahub-display-font, sans-serif);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.landing-portfolio__status-dot {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--landing-preview-status-color);
}

.landing-portfolio__status-dot[data-status="idle"] {
  background: color-mix(in srgb, var(--landing-preview-sage) 70%, transparent);
}

.landing-portfolio__status-dot[data-status="noData"] {
  background: color-mix(in srgb, var(--landing-preview-light) 30%, transparent);
}

.landing-portfolio__table-wrap {
  overflow-x: auto;
}

.landing-portfolio__table {
  width: 100%;
  min-width: 18rem;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.landing-portfolio__table th {
  padding-bottom: 0.5rem;
  font-weight: 500;
}

.landing-portfolio__table tbody tr {
  border-top: 1px solid var(--landing-preview-line);
}

.landing-portfolio__table td {
  padding-block: 0.5rem;
  white-space: nowrap;
}

.landing-portfolio__table th:not(:last-child),
.landing-portfolio__table td:not(:last-child) {
  padding-right: 0.5rem;
}

.landing-portfolio__table th:last-child,
.landing-portfolio__updated {
  text-align: right;
}

.landing-portfolio__asset-id {
  font-family: var(--dynahub-display-font, sans-serif);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.landing-portfolio__asset-type {
  color: color-mix(in srgb, var(--landing-preview-light) 70%, transparent);
}

.landing-portfolio__asset-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: color-mix(in srgb, var(--landing-preview-light) 85%, transparent);
}

.landing-portfolio__updated {
  color: var(--landing-preview-muted);
  font-variant-numeric: tabular-nums;
}

.landing-portfolio [data-preview-row][data-selected="true"] {
  background: color-mix(in srgb, var(--landing-preview-brand) 6%, transparent);
}

.landing-portfolio__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) {
  .landing-portfolio__kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .landing-portfolio__details {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .landing-portfolio__alert-ring {
    animation: landing-portfolio-alert 1.8s ease-out 1.2s infinite;
  }

  .landing-portfolio__status-dot[data-pulse="true"]::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--landing-preview-brand) 60%, transparent);
    content: "";
    animation: landing-portfolio-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
}

@keyframes landing-portfolio-alert {
  from { r: 1.5px; opacity: 0.8; }
  to { r: 4px; opacity: 0; }
}

@keyframes landing-portfolio-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

.landing-exposure {
  --landing-preview-ink: var(--landing-ink, #1a1a1a);
  --landing-preview-brand: var(--landing-brand, #ecff79);
  --landing-preview-light: var(--landing-light, #e6e6e6);
  --landing-preview-white: #fff;
  position: relative;
  display: grid;
  gap: 1.5rem;
  list-style: none;
  font-family: var(--dynahub-body-font, sans-serif);
}

.landing-exposure__node {
  position: relative;
  display: flex;
  min-width: 0;
}

.landing-exposure__connector {
  position: absolute;
  top: 3.5rem;
  left: 1.75rem;
  width: 1px;
  height: calc(100% + 1.5rem - 3.5rem);
  stroke: var(--landing-preview-brand);
  stroke-opacity: 0.6;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.landing-exposure__icon-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid color-mix(in srgb, var(--landing-preview-light) 15%, transparent);
  background: var(--landing-preview-ink);
  color: var(--landing-preview-light);
}

.landing-exposure__icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

/* The shared icon includes a background; its mark occupies 5/9 of its width. */
.landing-exposure__logo {
  display: block;
  width: 3.15rem;
  height: 3.15rem;
}

.landing-exposure__copy {
  min-width: 0;
  margin-left: 1.25rem;
}

.landing-exposure__title {
  color: var(--landing-preview-white);
  font-family: var(--dynahub-display-font, sans-serif);
  font-size: 1rem;
  line-height: 1.5rem;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.landing-exposure__body {
  margin-top: 0.25rem;
  color: color-mix(in srgb, var(--landing-preview-light) 65%, transparent);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 768px) {
  .landing-exposure {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .landing-exposure__node {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-exposure__connector {
    top: 1.75rem;
    left: 3.5rem;
    width: calc(100% - 3.5rem);
    height: 1px;
  }

  .landing-exposure__copy {
    margin-top: 1.25rem;
    margin-left: 0;
    padding-right: 2.5rem;
  }
}