/*
 * universe.css (Agent C) - Tool Universe section. lp-uni-* classes only.
 * Colours, type sizes, spacing and radii come from the tokens in landing.css.
 */

/* The hidden attribute must win over the display rules below. */
.lp-uni [hidden] { display: none !important; }

/* Group colour: any element carrying data-lp-g gets --lp-uni-c. */
.lp-uni { --lp-uni-c: var(--lp-primary); }
.lp-uni [data-lp-g="flow"] { --lp-uni-c: var(--lp-g-flow); }
.lp-uni [data-lp-g="analytics"] { --lp-uni-c: var(--lp-g-analytics); }
.lp-uni [data-lp-g="strategies"] { --lp-uni-c: var(--lp-g-strategies); }
.lp-uni [data-lp-g="stocks"] { --lp-uni-c: var(--lp-g-stocks); }
.lp-uni [data-lp-g="darkpool"] { --lp-uni-c: var(--lp-g-darkpool); }
.lp-uni [data-lp-g="shorts"] { --lp-uni-c: var(--lp-g-shorts); }
.lp-uni [data-lp-g="investing"] { --lp-uni-c: var(--lp-g-investing); }
.lp-uni [data-lp-g="ai"] { --lp-uni-c: var(--lp-g-ai); }

.lp-uni-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-uni-c);
}

/* ---------- toolbar ---------- */
.lp-uni-toolbar {
  display: grid;
  gap: var(--lp-sp-3);
  margin-bottom: var(--lp-sp-5);
}

.lp-uni-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--lp-sp-3) var(--lp-sp-4);
}

.lp-uni-search {
  display: grid;
  gap: var(--lp-sp-1);
  flex: 1 1 260px;
  max-width: 420px;
  min-width: 0;
}

.lp-uni-search-label {
  font-size: var(--lp-fs-xs);
  font-weight: 600;
  color: var(--lp-muted);
}

.lp-uni-search-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: var(--lp-sp-2) var(--lp-sp-4);
  font: inherit;
  font-size: var(--lp-fs-base);
  color: var(--lp-text);
  background: var(--lp-surface-2);
  border: 1px solid var(--lp-faint); /* 3:1 field boundary */
  border-radius: var(--lp-r-pill);
  transition: border-color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease);
}

.lp-uni-search-input::placeholder { color: var(--lp-muted); opacity: .8; }
.lp-uni-search-input:hover { border-color: var(--lp-muted); }
.lp-uni-search-input:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
  border-color: var(--lp-accent);
  background: var(--lp-surface-3);
}

.lp-uni-count {
  margin: 0 auto 0 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: var(--lp-fs-sm);
  color: var(--lp-muted);
  font-variant-numeric: tabular-nums;
}

.lp-uni-view {
  display: flex;
  gap: var(--lp-sp-2);
  align-items: center;
  min-height: 44px;
}

.lp-uni-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lp-sp-2);
  min-width: 0;
}

.lp-uni-chips .lp-chip,
.lp-uni-view .lp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-sp-2);
  flex: none;
  white-space: nowrap;
}

.lp-uni-chip-n {
  font-size: var(--lp-fs-xs);
  color: var(--lp-muted);
  font-variant-numeric: tabular-nums;
}

.lp-uni-chips-label {
  font-size: var(--lp-fs-xs);
  font-weight: 600;
  color: var(--lp-muted);
  margin-right: var(--lp-sp-1);
}

/* Departments the visitor's interest points at. */
.lp-uni-chip-rec { box-shadow: inset 0 0 0 1px var(--lp-uni-c); }

.lp-uni-note {
  margin: 0;
  font-size: var(--lp-fs-sm);
  color: var(--lp-muted);
}

/* ---------- map stage ---------- */
.lp-uni-stagewrap {
  display: none;
  margin-bottom: var(--lp-sp-6);
}

/* Same conditions scene-boot.js uses, so the poster never flashes where the map cannot run. */
@media (min-width: 768px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lp-uni--js:not([data-view="list"]) .lp-uni-stagewrap { display: block; }
}

.lp-uni-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 640px;
  min-height: 360px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg);
  background:
    radial-gradient(ellipse at 50% 55%, var(--lp-surface-3), transparent 65%),
    var(--lp-bg-2);
}

.lp-uni-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity .6s var(--lp-ease);
}

.lp-uni-stage[data-scene-state="ready"] .lp-uni-canvas { opacity: 1; }

/* poster */
.lp-uni-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: opacity .6s var(--lp-ease), visibility 0s linear .6s;
}

.lp-uni-stage[data-scene-state="ready"] .lp-uni-poster {
  opacity: 0;
  visibility: hidden;
}

.lp-uni-poster-ring {
  position: absolute;
  left: 14%;
  top: 20%;
  width: 72%;
  height: 60%;
  border: 1px solid var(--lp-border);
  border-radius: 50%;
}

.lp-uni-poster-node {
  position: absolute;
  width: 0;
  height: 0;
}

.lp-uni-poster-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(120px, 20vw, 230px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--lp-uni-c) 0%, transparent 68%);
  opacity: .3;
}

.lp-uni-poster-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: var(--lp-fs-sm);
  font-weight: 600;
  color: var(--lp-text);
}

.lp-uni-poster-n {
  margin-left: var(--lp-sp-1);
  font-weight: 500;
  color: var(--lp-muted);
  font-variant-numeric: tabular-nums;
}

/* Eight positions on the ring, first group at the front (bottom centre). */
.lp-uni-poster-node:nth-of-type(1) { left: 50%; top: 80%; }
.lp-uni-poster-node:nth-of-type(2) { left: 75.5%; top: 71.2%; }
.lp-uni-poster-node:nth-of-type(3) { left: 86%; top: 50%; }
.lp-uni-poster-node:nth-of-type(4) { left: 75.5%; top: 28.8%; }
.lp-uni-poster-node:nth-of-type(5) { left: 50%; top: 20%; }
.lp-uni-poster-node:nth-of-type(6) { left: 24.5%; top: 28.8%; }
.lp-uni-poster-node:nth-of-type(7) { left: 14%; top: 50%; }
.lp-uni-poster-node:nth-of-type(8) { left: 24.5%; top: 71.2%; }

/* labels moved by the scene */
.lp-uni-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--lp-ease);
}

.lp-uni-stage[data-scene-state="ready"] .lp-uni-labels {
  opacity: 1;
  visibility: visible;
}

.lp-uni-label {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--lp-sp-2);
  padding: var(--lp-sp-1) var(--lp-sp-3);
  font: inherit;
  font-size: var(--lp-fs-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--lp-text);
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-pill);
  cursor: pointer;
  pointer-events: auto;
  will-change: transform;
  transition: opacity var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease);
}

.lp-uni-label:hover,
.lp-uni-label[data-active] { border-color: var(--lp-uni-c); }
.lp-uni-label[data-far] { opacity: .55; }
.lp-uni-label[data-empty] { opacity: .3; }

.lp-uni-label-n {
  font-weight: 500;
  color: var(--lp-muted);
  font-variant-numeric: tabular-nums;
}

/* hover card */
.lp-uni .lp-uni-hover {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 264px;
  max-width: calc(100% - var(--lp-sp-4));
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  box-shadow: var(--lp-shadow);
  border-color: var(--lp-border-strong);
}

.lp-uni-hover-shot {
  aspect-ratio: 1024 / 600;
  overflow: hidden;
  background: var(--lp-bg-2);
  border-bottom: 1px solid var(--lp-border);
}

.lp-uni-hover-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.lp-uni-hover-body {
  display: grid;
  gap: var(--lp-sp-1);
  padding: var(--lp-sp-3);
  border-top: 1px solid var(--lp-uni-c);
}

.lp-uni-hover-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lp-sp-2);
  margin: 0;
}

.lp-uni-hover-title {
  font-size: var(--lp-fs-sm);
  font-weight: 600;
  color: var(--lp-text);
}

.lp-uni-hover-tag {
  margin: 0;
  font-size: var(--lp-fs-xs);
  line-height: 1.45;
  color: var(--lp-muted);
}

/* hint + pause, only once the map is live */
.lp-uni-controls {
  position: absolute;
  left: var(--lp-sp-4);
  right: var(--lp-sp-4);
  bottom: var(--lp-sp-4);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-sp-3);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--lp-ease);
}

.lp-uni-stage[data-scene-state="ready"] .lp-uni-controls {
  opacity: 1;
  visibility: visible;
}

.lp-uni-hint {
  margin: 0;
  font-size: var(--lp-fs-xs);
  color: var(--lp-muted);
}

.lp-uni-pause { pointer-events: auto; }

/* ---------- list ---------- */
.lp-uni-list {
  display: grid;
  gap: var(--lp-sp-6);
}

.lp-uni-group {
  min-width: 0;
  scroll-margin-top: var(--lp-sp-8);
}

.lp-uni-group-title {
  display: flex;
  align-items: center;
  gap: var(--lp-sp-2);
  margin: 0 0 var(--lp-sp-3);
  font-family: var(--lp-font-title);
  font-size: var(--lp-fs-md);
  font-weight: 600;
  color: var(--lp-text);
}

.lp-uni-group-count {
  padding: 0 var(--lp-sp-2);
  font-family: var(--lp-font);
  font-size: var(--lp-fs-xs);
  font-weight: 600;
  line-height: 1.8;
  color: var(--lp-muted);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-pill);
  font-variant-numeric: tabular-nums;
}

.lp-uni-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lp-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-uni-item { min-width: 0; }

.lp-uni-tool {
  display: flex;
  flex-direction: column;
  gap: var(--lp-sp-2);
  height: 100%;
  padding: var(--lp-sp-3) var(--lp-sp-4);
  color: var(--lp-text);
  text-decoration: none;
  background: var(--lp-surface-2);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r);
  transition: border-color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease);
}

.lp-uni-tool:hover {
  color: var(--lp-text);
  text-decoration: none;
  background: var(--lp-surface-3);
  border-color: var(--lp-border-strong);
}

.lp-uni-tool:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
}

.lp-uni-item[data-foryou] .lp-uni-tool { border-color: var(--lp-border-strong); }

.lp-uni-tool-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lp-sp-2);
}

.lp-uni-tool-title {
  min-width: 0;
  font-size: var(--lp-fs-sm);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.lp-uni-tool-top .lp-tier { flex: none; }

.lp-uni-tool-tag {
  font-size: var(--lp-fs-xs);
  line-height: 1.5;
  color: var(--lp-muted);
}

.lp-uni-tool-marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-sp-2);
  margin-top: auto;
}

.lp-uni-tool-marks:empty { display: none; }

.lp-uni-free,
.lp-uni-foryou {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-sp-1);
  font-size: var(--lp-fs-xs);
  font-weight: 600;
  line-height: 1.4;
}

.lp-uni-free { color: var(--lp-green); }

.lp-uni-free::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--lp-r-pill);
  background: currentColor;
}

.lp-uni-foryou {
  padding: 0 var(--lp-sp-2);
  color: var(--lp-accent);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-pill);
}

/* "Show all N" / "Show fewer" under a group (added by universe.js). */
.lp-uni-more { margin-top: var(--lp-sp-3); }

.lp-uni-empty {
  display: grid;
  justify-items: center;
  gap: var(--lp-sp-3);
  padding: var(--lp-sp-7) var(--lp-sp-4);
  text-align: center;
  color: var(--lp-muted);
  border: 1px dashed var(--lp-border);
  border-radius: var(--lp-r-lg);
}

.lp-uni-empty p { margin: 0; }

@media (max-width: 1099.98px) {
  .lp-uni-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899.98px) {
  .lp-uni-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: still two columns, compact cards without the tag line (it is in the drawer). */
@media (max-width: 479.98px) {
  .lp-uni-grid { gap: var(--lp-sp-2); }
  .lp-uni-tool { padding: var(--lp-sp-3); }
  .lp-uni-tool-top { flex-direction: column; gap: var(--lp-sp-1); }
  .lp-uni-tool-tag { display: none; }
}

/* Phones: chips scroll sideways inside their own row instead of stacking. */
@media (max-width: 640px) {
  .lp-uni-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Room for the focus ring and the pressed ring, which the scroller would clip. */
    padding: var(--lp-sp-1);
    margin: calc(var(--lp-sp-1) * -1);
  }
  .lp-uni-chips::-webkit-scrollbar { display: none; }
  .lp-uni-search { max-width: none; flex-basis: 100%; }
  .lp-uni-count { min-height: 0; }
}

/* ---------- drawer ---------- */
.lp-uni-drawer {
  width: min(880px, calc(100vw - 2 * var(--lp-gutter)));
  max-width: none;
  max-height: min(88vh, 900px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--lp-text);
  background: var(--lp-surface);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-lg);
  box-shadow: var(--lp-shadow);
}

.lp-uni-drawer:not([open]) { display: none; }

/* ::backdrop cannot read :root custom properties in older browsers, so this is
   the --lp-shadow colour written out. */
.lp-uni-drawer::backdrop { background: rgba(4, 2, 18, .72); }

.lp-uni-drawer-in {
  display: grid;
  gap: var(--lp-sp-4);
  max-height: min(88vh, 900px);
  padding: var(--lp-sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lp-uni-d-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-sp-3);
}

.lp-uni-d-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lp-sp-2);
  margin: 0;
  font-size: var(--lp-fs-sm);
  font-weight: 600;
  color: var(--lp-text);
}

.lp-uni-d-cat {
  font-weight: 400;
  color: var(--lp-muted);
}

.lp-uni-d-cat::before {
  content: "/";
  margin-right: var(--lp-sp-2);
  color: var(--lp-faint);
}

.lp-uni-d-close {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: calc(var(--lp-sp-2) * -1);
  padding: 0;
  color: var(--lp-muted);
  background: transparent;
  border: 0;
  border-radius: var(--lp-r-pill);
  cursor: pointer;
  transition: color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease);
}

.lp-uni-d-close:hover { color: var(--lp-text); background: var(--lp-surface-3); }
.lp-uni-d-close:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

.lp-uni-d-titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lp-sp-3);
}

.lp-uni-d-title {
  margin: 0;
  font-family: var(--lp-font-title);
  font-size: var(--lp-fs-xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--lp-text);
  overflow-wrap: anywhere;
}

.lp-uni-d-tagline {
  margin: 0;
  max-width: 62ch;
  font-size: var(--lp-fs-base);
  line-height: 1.55;
  color: var(--lp-muted);
}

.lp-uni-d-figure { margin: 0; }

.lp-uni-d-shot { aspect-ratio: 1024 / 600; }

.lp-uni-d-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-uni-d-caption {
  margin-top: var(--lp-sp-2);
  font-size: var(--lp-fs-xs);
  color: var(--lp-muted);
}

.lp-uni-d-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-sp-2);
}

.lp-uni-d-thumb {
  flex: none;
  width: 104px;
  padding: 0;
  overflow: hidden;
  background: var(--lp-bg-2);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-sm);
  cursor: pointer;
  opacity: .7;
  transition: opacity var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease);
}

.lp-uni-d-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 600;
  object-fit: cover;
  object-position: top left;
}

.lp-uni-d-thumb:hover { opacity: 1; }
.lp-uni-d-thumb[aria-pressed="true"] { opacity: 1; border-color: var(--lp-accent); }
.lp-uni-d-thumb:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

.lp-uni-d-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lp-sp-3);
}

.lp-uni-d-freenote {
  font-size: var(--lp-fs-xs);
  color: var(--lp-muted);
}

.lp-uni-d-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-sp-3);
  padding-top: var(--lp-sp-4);
  border-top: 1px solid var(--lp-border);
}

.lp-uni-d-pos {
  margin: 0;
  font-size: var(--lp-fs-sm);
  color: var(--lp-muted);
  font-variant-numeric: tabular-nums;
}

/* Phones: bottom sheet. */
@media (max-width: 640px) {
  .lp-uni-drawer {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--lp-r-lg) var(--lp-r-lg) 0 0;
  }
  .lp-uni-drawer-in {
    max-height: 92vh;
    max-height: 92dvh;
    padding: var(--lp-sp-4);
  }
  .lp-uni-d-title { font-size: var(--lp-fs-lg); }
  .lp-uni-d-thumb { width: 84px; }
  .lp-uni-d-actions .lp-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lp-uni-drawer[open] { animation: lp-uni-in var(--lp-dur) var(--lp-ease); }
  .lp-uni-drawer[open]::backdrop { animation: lp-uni-fade var(--lp-dur) ease-out; }
}

@keyframes lp-uni-in {
  from { opacity: 0; transform: translateY(var(--lp-sp-3)); }
  to { opacity: 1; transform: none; }
}

@keyframes lp-uni-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-uni-search-input,
  .lp-uni-tool,
  .lp-uni-label,
  .lp-uni-canvas,
  .lp-uni-poster,
  .lp-uni-labels,
  .lp-uni-controls,
  .lp-uni-d-close,
  .lp-uni-d-thumb { transition: none; }
}