/* ============================================================
   ONE EVIDENCE BASE → MANY PRODUCTS
   ------------------------------------------------------------
   A constellation, not a card grid: one governed evidence base at the centre,
   the nine canonical public areas around it, every count and every availability
   state read from /api/public/product-universe.

   MATURITY IS NOT DECORATION HERE. The canonical public availability axis has
   exactly three states and none of them means "available now". Each gets its
   own treatment, and all three stay premium — a planned architecture must look
   governed and intentional, never broken or disabled.
   ============================================================ */

.viuni { display: grid; gap: var(--space-5, 1.5rem); }
.viuni * { min-width: 0; }

/* ---- the constellation ---- */
.viuni-map { position: relative; display: grid; place-items: center; }
.viuni-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.viuni-lines line { stroke: var(--border-strong); stroke-width: 1; }
.viuni-lines line[data-on="true"] { stroke: var(--accent); stroke-width: 1.6; }

/* SIZED TO ITS CONTENT, WHICH IT WAS NOT AT FIRST. At 13.5rem the copy spilled
   past the circle and the kicker clipped to the single word "BASE". A circle
   crops its own corners, so it needs noticeably more room than the text
   occupies — hence the larger disc, the tighter type and the shorter sentence
   the script now writes. */
.viuni-core {
  position: relative; z-index: 2; width: 17rem; height: 17rem; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 2.1rem 2.3rem;
  background: var(--surface-emerald); color: var(--on-emerald); overflow: hidden;
  box-shadow: 0 20px 44px -26px rgba(6, 78, 59, .6);
}
.viuni-core .viuni-core-k {
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--on-emerald-muted); margin: 0 0 .35rem;
}
.viuni-core strong { display: block; font-size: .92rem; line-height: 1.3; font-weight: 650; overflow-wrap: anywhere; }
.viuni-core span { display: block; margin-top: .4rem; font-size: .68rem; color: var(--on-emerald-muted); line-height: 1.45; }

.viuni-node {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  display: grid; gap: .25rem; justify-items: center; text-align: center;
  width: 8.4rem; padding: .5rem .45rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  background: var(--surface); color: var(--text-muted);
  font: inherit; font-size: .7rem; line-height: 1.25;
  transition: border-color var(--motion-base, .18s ease), color var(--motion-base, .18s ease), background var(--motion-base, .18s ease);
}
.viuni-node:hover { border-color: var(--accent-text); color: var(--accent-text); }
.viuni-node:focus-visible { outline: var(--focus-ring, 2px solid var(--accent)); outline-offset: 2px; }
.viuni-node[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); color: var(--text); }
.viuni-node .viuni-ico { color: var(--accent-text); display: inline-flex; }
.viuni-node .viuni-ico svg { width: 17px; height: 17px; }
.viuni-node b { font-weight: 650; font-size: .72rem; }
.viuni-node em { font-style: normal; font-size: .64rem; color: var(--text-dim); }

/* ---- detail ---- */
.viuni-detail {
  border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  background: var(--surface); padding: 1.05rem 1.15rem; display: grid; gap: .75rem;
}
.viuni-detail h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; color: var(--text); }
.viuni-kicker { margin: 0; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--accent-text); }
.viuni-lede { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-muted); }

/* ---- availability: three real states, three premium treatments ---- */
.viuni-avail { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.viuni-avail > li {
  display: grid; grid-template-columns: auto 1fr auto; gap: .55rem .8rem; align-items: center;
  padding: .55rem .7rem; border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: .82rem; line-height: 1.45;
}
/* configured — solid, fully active */
.viuni-avail > li[data-state="CONFIGURED_CAPABILITY"] { border-color: var(--accent); background: var(--surface-2); }
.viuni-avail > li[data-state="CONFIGURED_CAPABILITY"] .viuni-pip { background: var(--accent); border-color: var(--accent); }
/* demonstration — active, but visibly a demonstration */
.viuni-avail > li[data-state="DEMONSTRATION_ONLY"] { border-color: var(--accent-warm); }
.viuni-avail > li[data-state="DEMONSTRATION_ONLY"] .viuni-pip { background: var(--accent-warm); border-color: var(--accent-warm); }
/* planned — governed roadmap: a drawn outline, never a greyed-out ruin */
.viuni-avail > li[data-state="PLANNED"] { border-style: dashed; border-color: var(--border-strong); }
.viuni-avail > li[data-state="PLANNED"] .viuni-pip { background: transparent; border-color: var(--text-dim); border-style: dashed; }
.viuni-pip { width: .72rem; height: .72rem; border-radius: 50%; border: 2px solid var(--border-strong); }
.viuni-avail .viuni-n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.viuni-avail .viuni-lbl { color: var(--text); font-weight: 600; }
.viuni-avail .viuni-sub { display: block; font-weight: 400; font-size: .75rem; color: var(--text-dim); }

.viuni-facts { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.viuni-facts > li { display: grid; grid-template-columns: minmax(7rem, 9.5rem) 1fr; gap: .25rem .9rem; font-size: .8rem; line-height: 1.55; }
.viuni-facts .k { color: var(--text-dim); font-weight: 600; }
.viuni-facts .v { color: var(--text); }

.viuni-note, .viuni-formats {
  font-size: .76rem; line-height: 1.55; color: var(--text-dim);
  padding: .55rem .75rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm, 6px);
}
.viuni-formats b { color: var(--text-muted); }

.viuni-state { padding: 1.4rem 1rem; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm, 6px); color: var(--text-muted); font-size: .86rem; }
.viuni-state[data-tone="error"] { border-style: solid; border-color: var(--danger); color: var(--danger); }

/* ---- MOBILE IS A DIFFERENT MENTAL MODEL, NOT A SHRUNK ORBIT ----
   Below 900px the constellation becomes a stacked list: the evidence base, then
   what you need, then the area. A scaled-down radial is unreadable and
   untappable, so it is not attempted. */
@media (max-width: 900px) {
  .viuni-map { display: grid; gap: .55rem; place-items: stretch; height: auto !important; }
  .viuni-lines { display: none; }
  .viuni-core { width: 100%; height: auto; border-radius: var(--radius-sm, 6px); padding: 1rem 1.1rem; }
  .viuni-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; }
  .viuni-node { position: static !important; transform: none !important; width: auto; left: auto !important; top: auto !important;
    grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; padding: .6rem .7rem; }
  .viuni-node b { font-size: .76rem; }
  .viuni-facts > li { grid-template-columns: 1fr; gap: .1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .viuni-node { transition: none; }
}

/* ============================================================
   WHAT THE AREA ACTUALLY PRODUCES
   ------------------------------------------------------------
   The merge target for the retired story-products section. That section named
   concrete outputs, which is the one thing the constellation could not do —
   but it named them in hand-written markup. These rows come from the same
   canonical selection that produces each area's count, so the names, the
   maturity and the formats cannot drift from the registry.
   ============================================================ */
.viuni-products {
  margin-top: 1.1rem; padding-top: .95rem;
  border-top: 1px solid var(--border);
}
.viuni-prod-head-line {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin: 0 0 .7rem;
}
.viuni-prod-head-line b { font-size: .9rem; color: var(--text); }
.viuni-prod-head-line span { font-size: .74rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.viuni-prod-list {
  display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.viuni-prod {
  padding: .65rem .8rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  background: var(--surface);
}
.viuni-prod-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.viuni-prod-head b { font-size: .84rem; line-height: 1.3; color: var(--text); }
.viuni-chip {
  flex: none;
  padding: .12rem .5rem; border-radius: 999px;
  font-size: .64rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--surface-2);
}
.viuni-chip[data-state="DEMONSTRATION_ONLY"] { border-color: var(--success); color: var(--success); background: transparent; }
.viuni-chip[data-state="PLANNED"] { border-style: dashed; }
.viuni-prod-why { margin: .3rem 0 0; font-size: .72rem; line-height: 1.5; color: var(--text-muted); }
.viuni-prod-fmt { margin: .35rem 0 0; font-size: .68rem; line-height: 1.5; color: var(--text-dim); overflow-wrap: anywhere; }
.viuni-prod-fmt span { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .6rem; }
.viuni-prod-more { margin: .65rem 0 0; font-size: .72rem; color: var(--text-dim); }

@media (max-width: 640px) {
  .viuni-prod-list { grid-template-columns: 1fr; }
}

/* The three onward routes inherited from the retired story-products section. */
.viuni-onward {
  display: flex; flex-wrap: wrap; gap: .35rem 1.6rem;
  margin: 1.5rem 0 0;
  font-size: .86rem;
}
.viuni-onward a { color: var(--accent-text); font-weight: 650; text-decoration: none; }
.viuni-onward a:hover { text-decoration: underline; }