/* =========================================================
   LANE OVERRIDES ONLY
   Scope: Universe lane only
========================================================= */
body.lane-universe {}


/* =========================================================
   UNIVERSE TOKENS
   Scope: .universe-app (keeps it from fighting global styles)
========================================================= */
.universe-app{
  --bg:#050509;
  --ink:#F5F5F7;
  --muted:rgba(245,245,247,.72);
  --muted2:rgba(245,245,247,.52);
  --line:rgba(245,245,247,.12);

  --violet:#6D3BFF;
  --violet2:rgba(109,59,255,.22);
  --violet3:rgba(109,59,255,.12);

  --card:rgba(8,8,12,.62);
  --card2:rgba(12,12,18,.72);

  --shadow:0 16px 48px rgba(0,0,0,.55);
  --radius:18px;

  --max:1100px;
  --viewerW:440px;
}

/* =========================================================
   LOCAL BOX MODEL SAFETY
   Scope: Universe app only
========================================================= */
.universe-app,
.universe-app *{ box-sizing:border-box; }

.universe-app a{ color:inherit; }


/* =========================================================
   BACKGROUND: COSMIC LAYERS
   Affects: fixed starfield + violet haze + vignette
========================================================= */
.universe-app .u-bg{position:fixed; inset:0; z-index:-1; overflow:hidden}
.universe-app .u-bg-stars{
  position:absolute; inset:-30%;
  background:
    radial-gradient(circle at 10% 20%, rgba(245,245,247,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 10%, rgba(245,245,247,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 70%, rgba(245,245,247,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 60%, rgba(245,245,247,.10) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 40%, rgba(245,245,247,.10) 0 1px, transparent 2px);
  opacity:.28;
  filter:blur(.2px);
  transform:scale(1.2);
}
.universe-app .u-bg-violet{
  position:absolute; inset:-12%;
  background:
    radial-gradient(circle at 20% 10%, rgba(109,59,255,.30), transparent 60%),
    radial-gradient(circle at 85% 65%, rgba(109,59,255,.18), transparent 55%),
    radial-gradient(circle at 40% 85%, rgba(109,59,255,.12), transparent 55%);
  opacity:.95;
}
.universe-app .u-bg-vignette{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 30%, transparent 0 45%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.82) 100%);
}

/* never let the cosmic bg steal clicks */
.universe-app .u-bg,
.universe-app .u-bg *{ pointer-events:none; }



/* =========================================================
   APP WRAP
   Affects: page width + vertical padding
========================================================= */
.universe-app .u-wrap{
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
  padding:200px 0 80px;
}


/* =========================================================
   INTRO PANEL
   Affects: top “Universe” intro container + its internal grid
========================================================= */
.universe-app .u-intro{
  padding:22px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(12,12,18,.55), rgba(8,8,12,.35));
  box-shadow: var(--shadow);
}
.universe-app .u-intro-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:18px;
  align-items: start;
}
@media (max-width: 980px){
  .universe-app .u-intro-grid{grid-template-columns: 1fr}
}
.universe-app .u-h1{
  margin:0 0 10px 0;
  font-size:34px;
  letter-spacing:.4px;
}
.universe-app .u-lead{
  margin:0 0 16px 0;
  color:var(--muted);
  line-height:1.55;
  max-width:72ch;
}
.universe-app .u-intro-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 980px){
  .universe-app .u-intro-cards{grid-template-columns: 1fr}
}
.universe-app .u-card{
  border:1px solid var(--line);
  border-radius: 16px;
  background: rgba(6,6,10,.55);
  padding:14px 14px 12px;
}
.universe-app .u-card-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color: rgba(245,245,247,.68);
  margin-bottom:8px;
}
.universe-app .u-card-body{
  font-size:13px;
  color: var(--muted);
  line-height:1.6;
}


/* =========================================================
   SIGNAL FRAME (left panel)
   Affects: Signal Index box + scroll area + note
========================================================= */
.universe-app .u-signal-frame{
  border:1px solid var(--line);
  border-radius: 16px;
  background: radial-gradient(circle at 20% 20%, rgba(109,59,255,.25), transparent 55%), rgba(8,8,12,.45);
  padding:14px;

  display:flex;
  flex-direction:column;

  /* stable card size: Slot 01 and Slot 02 never change it */
  height: clamp(360px, 54vh, 620px);
  overflow:hidden;
}
.universe-app .u-signal-title{
  font-size:12px;
  color: rgba(245,245,247,.78);
  letter-spacing:.8px;
  font-weight:700;
  margin-bottom:12px;
}
.universe-app .u-signal-lines{display:flex; flex-direction:column; gap:10px}
.universe-app .signal-line{
  display:grid;
  grid-template-columns: 14px 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border:1px solid rgba(245,245,247,.10);
  border-radius: 14px;
  background: rgba(5,5,9,.35);
}
.universe-app .dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(109,59,255,.95);
  box-shadow: 0 0 18px rgba(109,59,255,.28);
}
.universe-app .label{font-size:12px; color: rgba(245,245,247,.80)}
.universe-app .value{font-size:12px; color: rgba(245,245,247,.55)}
.universe-app .u-signal-note{
  margin-top:12px;
  font-size:12px;
  color: var(--muted2);
  line-height:1.55;
  padding-top:12px;
  border-top:1px solid rgba(245,245,247,.10);
}
.universe-app .u-signal-scroll{
  max-height: 260px;
  overflow: auto;
  padding-right: 6px;
}


/* =========================================================
   RESULTS SECTIONS
   Affects: bordered “results box” containers + row dividers inside
========================================================= */
.universe-app .u-results-title{
  margin: 14px 4px 10px;
  font-weight: 800;
  letter-spacing: .8px;
  color: rgba(245,245,247,.92);
}
.universe-app .u-results-box{
  border: 1px solid rgba(245,245,247,.10);
  border-radius: 16px;
  background: rgba(8,8,12,.38);
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
  overflow: hidden;
}
.universe-app .u-results-box .u-row:last-child{
  border-bottom: 0;
}



/* =========================================================
   ARCHIVE HEADER
   Affects: title/subtitle + right-side controls container
========================================================= */
.universe-app .u-archive{margin-top:18px}
.universe-app .u-archive-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:0 4px 10px;
}
.universe-app .u-section-title{
  font-weight:800;
  letter-spacing:.8px;
}
.universe-app .u-section-sub{
  font-size:12px;
  color: var(--muted2);
  margin-top:4px;
}
.universe-app .u-archive-head-right{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  justify-content:flex-end;
}


/* =========================================================
   SEARCH CONTROL (input + hint + buttons)
   Affects: injected search bar UI
========================================================= */
.universe-app .u-search{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius: 14px;
  padding:10px 12px;
  background: rgba(10,10,16,.42);
  min-width: 280px;
}
.universe-app .u-search input{
  flex: 1 1 auto;
  min-width: 0;
  border:0;
  outline:0;
  background:transparent;
  color: var(--ink);
  font-size:13px;
}
.universe-app .u-search .hint{
  font-size:11px;
  color: rgba(245,245,247,.40);
  white-space:nowrap;
}

/* Search buttons – shared base */
.universe-app .u-search .u-enterbtn,
.universe-app .u-clearbtn{
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Clear button */
.universe-app .u-clearbtn{
  border: 1px solid rgba(245,245,247,.14);
  background: rgba(5,5,9,.25);
  color: rgba(245,245,247,.75);
}
.universe-app .u-clearbtn:hover{border-color: rgba(109,59,255,.35)}

/* Enter button */
.universe-app .u-search .u-enterbtn{
  border: 1px solid rgba(245,245,247,.14);
  background: rgba(5,5,9,.18);
  color: rgba(245,245,247,.40);
  white-space: nowrap;
}
.universe-app .u-search .u-enterbtn:hover{
  color: rgba(245,245,247,.80);
  border-color: rgba(109,59,255,.45);
  background: rgba(109,59,255,.10);
}
.universe-app .u-search .u-enterbtn:active{
  transform: translateY(1px);
}


/* search bar shake */
.u-search.is-shake #searchInput {
  box-shadow: 0 0 0 2px rgba(255, 70, 70, 0.45);
}

.u-search.is-shake {
  animation: dexShake 0.42s ease;
}

@keyframes dexShake {
  0% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* =========================================================
   MODE BAR + MODE CHIP
   Affects: “MODE” chip alignment + explore row spacing
========================================================= */
.universe-app .u-modebar{
  display:flex;
  align-items:center;
  margin: 0 0 8px 0;
}
.universe-app .u-modechip{
  position: relative;

  display:grid;
  grid-template-columns: 45px 1fr;
  align-items:center;

  width: 132px;
  flex: 0 0 132px;
  min-width: 132px;

  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  opacity:.8;
  pointer-events:none;
  transform: translateY(4px);

  justify-items: start;
  text-align: center;
}
.universe-app .u-modechip::before{
  content:"MODE";
  grid-column: 1;
  font-size:10px;
  letter-spacing:.18em;
  opacity:.65;
}


/* =========================================================
   EXPLORE CHIPS
   Affects: the row of filter chips on the right
========================================================= */
.universe-app .u-explore{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  max-width: 520px;
}
.universe-app .u-explore-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color: rgba(245,245,247,.55);
  margin-right:6px;
  padding-top:1px;
}
.universe-app .u-chip{
  appearance:none;
  border:1px solid rgba(245,245,247,.14);
  background: rgba(5,5,9,.18);
  color: rgba(245,245,247,.72);
  border-radius: 999px;
  padding:7px 10px;
  font-size:11px;
  cursor:pointer;
  text-decoration:none;
  line-height:1;
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.universe-app .u-chip:hover{
  border-color: rgba(109,59,255,.45);
  background: rgba(109,59,255,.10);
}
.universe-app .u-chip:active{transform: translateY(1px)}
.universe-app .u-chip.active{
  border-color: rgba(109,59,255,.60);
  background: rgba(109,59,255,.18);
  color: rgba(245,245,247,.86);
  box-shadow: 0 10px 26px rgba(109,59,255,.12);
}

@media (max-width: 700px){
  .universe-app .u-archive-head-right{align-items:stretch}
  .universe-app .u-search{min-width: 0; width:100%}
  .universe-app .u-explore{justify-content:flex-start; max-width:none}
  .universe-app .u-explore-label{width:100%; margin-right:0; color: rgba(245,245,247,.48)}
}


/* =========================================================
   ALPHA INDEX
   Affects: A-Z nav pill row
========================================================= */
.universe-app .u-alpha{
  border:1px solid var(--line);
  border-radius: 14px;
  padding:8px 10px;
  background: rgba(10,10,16,.35);
  display:flex;
  gap:6px;
  align-items:center;
}
.universe-app .u-alpha a{
  text-decoration:none;
  font-size:11px;
  color: rgba(245,245,247,.55);
  padding:6px 7px;
  border-radius:10px;
  border:1px solid transparent;
}
.universe-app .u-alpha a:hover{
  color: rgba(245,245,247,.86);
  border-color: rgba(109,59,255,.35);
  background: rgba(109,59,255,.08);
}
.universe-app .u-alpha a.active{
  color: rgba(245,245,247,.95);
  border-color: rgba(109,59,255,.65);
  background: rgba(109,59,255,.12);
  box-shadow: inset 0 0 0 1px rgba(245,245,247,.15);
}
.universe-app .u-alpha a[aria-disabled="true"]{opacity:.28; pointer-events:none}


/* =========================================================
   CATEGORY GRID
   Affects: the “cards” grid under categories
========================================================= */
.universe-app .u-category-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
  margin-top:8px;
}
@media (max-width: 980px){
  .universe-app .u-category-row{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 520px){
  .universe-app .u-category-row{grid-template-columns: 1fr}
}
.universe-app .u-category{
  border:1px solid var(--line);
  border-radius: 16px;
  padding:14px 14px 12px;
  background: linear-gradient(180deg, rgba(10,10,16,.55), rgba(6,6,10,.35));
  cursor:pointer;
  position:relative;
  overflow:hidden;
  min-height:86px;
}
.universe-app .u-category::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: radial-gradient(circle at 30% 30%, rgba(109,59,255,.20), transparent 55%);
  opacity:.9;
  transform: rotate(15deg);
}
.universe-app .u-category > *{position:relative}
.universe-app .u-category-title{
  font-weight:800;
  letter-spacing:.6px;
  margin-bottom:6px;
}
.universe-app .u-category-desc{
  font-size:12px;
  color: var(--muted);
  line-height:1.5;
  max-width:42ch;
}
.universe-app .u-category-meta{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color: rgba(245,245,247,.55);
}
.universe-app .u-category-meta .u-pill{
  flex: 0 0 auto;
  white-space: nowrap;
}
.universe-app .u-category-meta > :last-child{
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}
.universe-app .u-pill{
  border:1px solid rgba(245,245,247,.14);
  background: rgba(5,5,9,.22);
  border-radius: 999px;
  padding:6px 10px;
  color: rgba(245,245,247,.68);
}
.universe-app .u-category.active{
  border-color: rgba(109,59,255,.55);
  box-shadow: 0 14px 38px rgba(109,59,255,.14);
}


/* =========================================================
   SIGNAL SLOT 01: INTRO NOTE + TOC
   Affects: the Slot 01 “Archive Index” layout + scrolling TOC
========================================================= */
.universe-app #introNote .u-signal-title{
  margin:8px 0 12px;
  font-size:20px;
  font-weight:800;
  letter-spacing:.25px;
  color:rgba(245,245,247,.95);
}
.universe-app #introNote .u-signal-body{
  margin:0;
  max-width:60ch;
  font-size:13px;
  line-height:1.6;
  color:rgba(245,245,247,.70);
}

/* TOC row primitives */
.universe-app #introNote .u-toc-row{
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  color:inherit;
  font:inherit;
  text-align:left;
}
.universe-app #introNote .u-toc-row:hover{ text-decoration:underline; }
.universe-app #introNote .u-toc-slot{ opacity:.90; }
.universe-app #introNote .u-toc-sep{ opacity:.60; margin:0 6px; }
.universe-app #introNote .u-toc-label{ opacity:.95; }

/* Slot 01 TOC – Centered 2-column block */
.universe-app #introNote.is-slot01 .u-toc.u-toc-split{
  margin: 14px auto 0;

  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: 36px;
  row-gap: 8px;

  max-height: 180px;
  overflow: auto;
  padding-right: 10px;
  scrollbar-gutter: stable;

  scrollbar-width: thin;
  scrollbar-color: rgba(109,59,255,.55) rgba(5,5,9,.18);
}
.universe-app #introNote.is-slot01 .u-toc-col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.universe-app #introNote.is-slot01 .u-toc-row{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: #F5F5F7;
  text-decoration: none;
}
.universe-app #introNote.is-slot01 .u-toc-row:hover{
  color: #FFFFFF;
  text-decoration: underline;
}
.universe-app #introNote.is-slot01 .u-toc-slot,
.universe-app #introNote.is-slot01 .u-toc-label{
  color: #F5F5F7;
  opacity: 1;
}
.universe-app #introNote.is-slot01 .u-toc-sep{
  color: rgba(245,245,247,.70);
  opacity: 1;
  margin: 0 6px;
}

/* Webkit scrollbar (Slot 01 only) */
.universe-app #introNote.is-slot01 .u-toc.u-toc-split::-webkit-scrollbar{ width: 10px; }
.universe-app #introNote.is-slot01 .u-toc.u-toc-split::-webkit-scrollbar-track{
  background: rgba(5,5,9,.18);
  border-radius: 999px;
}
.universe-app #introNote.is-slot01 .u-toc.u-toc-split::-webkit-scrollbar-thumb{
  background: rgba(109,59,255,.45);
  border-radius: 999px;
  border: 2px solid rgba(5,5,9,.18);
  box-shadow: 0 0 18px rgba(109,59,255,.14);
}
.universe-app #introNote.is-slot01 .u-toc.u-toc-split::-webkit-scrollbar-thumb:hover{ background: rgba(109,59,255,.65); }
.universe-app #introNote.is-slot01 .u-toc.u-toc-split::-webkit-scrollbar-thumb:active{ background: rgba(109,59,255,.85); }

@media (max-width: 560px){
  .universe-app #introNote.is-slot01 .u-toc.u-toc-split{
    grid-template-columns: auto;
    justify-content: center;
  }
}


/* =========================================================
   SIGNAL SLOT BASE: INTERNAL SCROLL HOOK
   Goal: Slot content scrolls inside fixed card
========================================================= */

/* #introNote is the flex child inside the fixed-height .u-signal-frame */
.universe-app .u-signal-frame > #introNote{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  /* keep your centered look */
  align-items: center;
  text-align: center;
}

/* header stays fixed, scroll area takes the rest */
.universe-app #introNote .u-signal-head{
  flex: 0 0 auto;
}

/* THIS is the actual scroll container your JS creates */
.universe-app #introNote .u-signal-slotScroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* If these exist (from your HTML), prevent flex overflow issues */
.universe-app .u-signal-panel,
.universe-app .u-signal-note{
  min-height: 0;
}


/* =========================================================
   SIGNAL SLOT 02: CHAPTER MODE
   Affects: Slot 02 prose formatting
   Rule: do not change the Signal card size, only scroll inside it
========================================================= */
.universe-app #introNote.is-slot02 .u-signal-head{
  text-align: center;
}

/* Slot 02: keep chapter text left-aligned while leaving the title centered */
.universe-app #introNote.is-slot02 .u-signal-slotScroll{
  text-align: left;
}

/* Make terms area consume remaining space (no nested scroll region) */
.universe-app #introNote.is-slot02 .u-terms{
  margin-top: 16px;
  width: 100%;
  max-width: 72ch;
  text-align: left;

  flex: 1 1 auto;
  min-height: 0;        /* critical */

  padding-right: 10px;
  scrollbar-gutter: stable;

  overflow: visible;
  max-height: none;
}

.universe-app #introNote.is-slot02 .u-term{
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.universe-app #introNote.is-slot02 .u-term-word{
  display: none;
}
.universe-app #introNote.is-slot02 .u-term-def{
  margin: 0 0 10px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245,245,247,.84);
}
.universe-app #introNote.is-slot02 .u-term:last-child .u-term-def{
  margin-bottom: 0;
}

/* =========================================================
   SLOT 02: numbered step spacing (scan-friendly)
   Affects: #introNote.is-slot02 .u-term-def (the prose blocks)
========================================================= */

/* Slot 02: spacing between 1) 2) 3) blocks (if you still use .u-term wrappers) */
.universe-app #introNote.is-slot02 .u-term + .u-term{
  margin-top: 12px;
}

/* Slot 02: definition paragraph tuning (if you still render .u-term-def) */
.universe-app #introNote.is-slot02 .u-term-def{
  word-spacing: .06em;
  line-height: 1.72;
}

/* Slot 02: numbered step blocks (new .u-step output) */
.universe-app #introNote.is-slot02 .u-step{
  margin: 0 0 14px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245,245,247,.78);
}
.universe-app #introNote.is-slot02 .u-step:last-child{
  margin-bottom: 0;
}

.universe-app #introNote.is-slot02 .u-step-num{
  color: rgba(245,245,247,.96);
  font-weight: 800;
  margin-right: 6px;
}


/* =========================================================
   SLOT 03
========================================================= */

/* Slot 03: match Slot 02 typography + brighter text */
.universe-app #introNote.is-slot03 .u-signal-body{
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245,245,247,.84); /* brighter */
  max-width: 72ch;
  margin: 0 auto;
}

.universe-app #introNote.is-slot03 .u-terms{
  margin-top: 16px;
  width: 100%;
  max-width: 72ch;

  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245,245,247,.84); /* brighter */
  text-align: left;

  /* keep scroll behavior consistent with your slot scroll */
  overflow: visible;
  max-height: none;
}

/* Slot 03 headings inside terms */
.universe-app #introNote.is-slot03 .u-step{
  margin: 0 0 14px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245,245,247,.84); /* brighter */
}

/* If you want headings slightly brighter without changing size */
.universe-app #introNote.is-slot03 .u-step strong{
  color: rgba(245,245,247,.95);
}


/* =========================================================
   SIGNAL SLOT 04: REALM ATLAS
   Goal: match Slot 03 color + Slot 02 typography
========================================================= */

/* Title stays centered */
.universe-app #introNote.is-slot04 .u-signal-head{
  text-align: center;
}

/* Slot scroll area left aligned (title can stay centered above) */
.universe-app #introNote.is-slot04 .u-signal-slotScroll{
  text-align: left;

  scrollbar-width: thin;
  scrollbar-color: rgba(245,245,247,.22) rgba(5,5,9,.18);
}

/* Match Slot 03 body tone */
.universe-app #introNote.is-slot04 .u-signal-body{
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245,245,247,.84);
  max-width: 72ch;
  margin: 0 auto;
}

/* Terms container matches Slot 03 */
.universe-app #introNote.is-slot04 .u-terms{
  margin-top: 16px;
  width: 100%;
  max-width: 72ch;

  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245,245,247,.84);
  text-align: left;

  overflow: visible;
  max-height: none;
}

/* Each line rendered as .u-step */
.universe-app #introNote.is-slot04 .u-step{
  margin: 0 0 14px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245,245,247,.84);
  font-weight: 400;
  letter-spacing: 0;
}
.universe-app #introNote.is-slot04 .u-step:last-child{
  margin-bottom: 0;
}

/* If you ever use <strong> inside Slot 04, match Slot 03 behavior */
.universe-app #introNote.is-slot04 .u-step strong{
  color: rgba(245,245,247,.95);
}

/* Webkit scrollbar skin */
.universe-app #introNote.is-slot04 .u-signal-slotScroll::-webkit-scrollbar{ width: 10px; }
.universe-app #introNote.is-slot04 .u-signal-slotScroll::-webkit-scrollbar-track{
  background: rgba(5,5,9,.18);
  border-radius: 999px;
}
.universe-app #introNote.is-slot04 .u-signal-slotScroll::-webkit-scrollbar-thumb{
  background: rgba(245,245,247,.18);
  border-radius: 999px;
  border: 2px solid rgba(5,5,9,.18);
}
.universe-app #introNote.is-slot04 .u-signal-slotScroll::-webkit-scrollbar-thumb:hover{
  background: rgba(245,245,247,.26);
}
.universe-app #introNote.is-slot04 .u-signal-slotScroll::-webkit-scrollbar-thumb:active{
  background: rgba(245,245,247,.34);
}

/* =========================================================
   SIGNAL SLOT 05: THE FREQUENCY CORE MODEL
   Goal: match Slot 03 typography + color exactly
========================================================= */

/* Title stays centered */
.universe-app #introNote.is-slot05 .u-signal-head{
  text-align: center;
}

/* Content area left aligned */
.universe-app #introNote.is-slot05 .u-signal-slotScroll{
  text-align: left;

  /* keep scrollbars consistent */
  scrollbar-width: thin;
  scrollbar-color: rgba(245,245,247,.22) rgba(5,5,9,.18);
}

/* Body paragraph under title (if present) */
.universe-app #introNote.is-slot05 .u-signal-body{
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245,245,247,.84); /* MATCH Slot 03 */
  max-width: 72ch;
  margin: 0 auto;
}

/* Terms container */
.universe-app #introNote.is-slot05 .u-terms{
  margin-top: 16px;
  width: 100%;
  max-width: 72ch;

  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245,245,247,.84); /* MATCH Slot 03 */
  text-align: left;

  /* no nested scroll region */
  overflow: visible;
  max-height: none;
}

/* Each line rendered as .u-step */
.universe-app #introNote.is-slot05 .u-step{
  margin: 0 0 14px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245,245,247,.84); /* MATCH Slot 03 */
  font-weight: 400;
  letter-spacing: 0;
}
.universe-app #introNote.is-slot05 .u-step:last-child{
  margin-bottom: 0;
}

/* Optional: if you bold any headings inside lines */
.universe-app #introNote.is-slot05 .u-step strong{
  color: rgba(245,245,247,.95);
}

/* Webkit scrollbar skin */
.universe-app #introNote.is-slot05 .u-signal-slotScroll::-webkit-scrollbar{ width: 10px; }
.universe-app #introNote.is-slot05 .u-signal-slotScroll::-webkit-scrollbar-track{
  background: rgba(5,5,9,.18);
  border-radius: 999px;
}
.universe-app #introNote.is-slot05 .u-signal-slotScroll::-webkit-scrollbar-thumb{
  background: rgba(245,245,247,.18);
  border-radius: 999px;
  border: 2px solid rgba(5,5,9,.18);
}
.universe-app #introNote.is-slot05 .u-signal-slotScroll::-webkit-scrollbar-thumb:hover{
  background: rgba(245,245,247,.26);
}
.universe-app #introNote.is-slot05 .u-signal-slotScroll::-webkit-scrollbar-thumb:active{
  background: rgba(245,245,247,.34);
}

/* =========================================================
   SEARCH ROWS: OUTER GRID
   Affects: each result row layout (left text + right meta lane)
========================================================= */
.universe-app .u-row{
  display: grid;
  grid-template-columns: 1fr clamp(320px, 40vw, 460px);
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(245,245,247,.08);
  cursor: pointer;
  background: rgba(0,0,0,0);
}
.universe-app .u-row:hover{ background: rgba(109,59,255,.06); }
.universe-app .u-row:last-child{ border-bottom: 0; }

/* Title + NEW badge + summary */
.universe-app .u-row-title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.universe-app .u-badge-new{
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid rgba(109,59,255,.45);
  background: rgba(109,59,255,.10);
  color: rgba(245,245,247,.78);
  padding: 4px 7px;
  border-radius: 999px;
}
.universe-app .u-row-sub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(245,245,247,.62);
  line-height: 1.45;
}


/* =========================================================
   ROW META: 3-COLUMN GRID (FIXED)
   Col 1: optional type/class
   Col 2: appears/origin/release
   Col 3: kind + count stack (always locked)
========================================================= */
.universe-app .u-row-meta{
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 132px;
  column-gap: 18px;
  align-items: start;
  justify-items: end;
  align-self: stretch;
  height: 100%;
}



/* Meta column structure */
.universe-app .u-row-col{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 0;
}

/* Kind + Count stack */
.universe-app .u-row-meta-stack{
  display: grid;
  width: 132px;
  justify-items: center;
  row-gap: 6px;
  text-align: center;
  justify-self: end;
}

/* ---------------------------------------------------------
   HARD LOCK PLACEMENT (prevents stack dropping / misalignment)
   Affects: Terminology, Concepts, Characters rows staying aligned
--------------------------------------------------------- */
.universe-app .u-row-meta > *{
  grid-row: 1;
  align-self: start;
}
.universe-app .u-row-meta > .u-row-col:nth-of-type(1){
  grid-column: 1;
}
.universe-app .u-row-meta > .u-row-col:nth-of-type(2){
  grid-column: 2;
}
.universe-app .u-row-meta > .u-row-meta-stack{
  grid-column: 3;
  grid-row: 1;
}

/* no-ctype: single meta column goes to column 2 */
.universe-app .u-row-meta.no-ctype > .u-row-col:nth-of-type(1){
  grid-column: 1;
}
.universe-app .u-row-meta.no-ctype > .u-row-col:nth-of-type(2){
  grid-column: 2;
}

/* but if there's ONLY ONE meta col, move it to column 2 */
.universe-app .u-row-meta.no-ctype > .u-row-col:only-of-type{
  grid-column: 2;
}

/* Label + value typography */
.universe-app .u-row-label{
  font-size: 11px;
  letter-spacing: .6px;
  color: rgba(245,245,247,.52);
}
.universe-app .u-row-value{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(245,245,247,.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* Responsive: collapse */
@media (max-width: 640px){
  .universe-app .u-row{
    grid-template-columns: 1fr;
  }
  .universe-app .u-row-meta.no-ctype,
  .universe-app .u-row-meta.has-ctype,
  .universe-app .u-row-meta.is-song,
  .universe-app .u-row-meta.is-term{
    grid-template-columns: 1fr;
    row-gap: 6px;
    justify-items: end;
  }
}

/* Chips */
.universe-app .u-kindchip{
  border: 1px solid rgba(245,245,247,.12);
  background: rgba(5,5,9,.18);
  border-radius: 999px;
  padding: 6px 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  color: rgba(245,245,247,.62);
}
.universe-app .u-countchip{
  color: rgba(245,245,247,.55);
}

/* Lock the Kind + Count stack typography */
.universe-app .u-row-meta-stack{
  line-height: 1.05;
}

.universe-app .u-row-meta-stack .u-kindchip{
  font-size: 10px;          /* keep it tight */
  line-height: 1;
}

.universe-app .u-row-meta-stack .u-countchip{
  font-size: 11px;          /* or 10px if you want it smaller */
  line-height: 1;
  white-space: nowrap;
}


/* =========================================================
   EMPTY RESULTS
   Affects: “no results” state
========================================================= */
.universe-app .u-empty{
  padding:32px 18px;
  text-align:center;
}
.universe-app .u-empty-title{
  font-weight:800;
  letter-spacing:.6px;
}
.universe-app .u-empty-sub{
  margin-top:8px;
  color: rgba(245,245,247,.58);
  font-size:12px;
}


/* =========================================================
   VIEWER PANEL (right slide-in)
   Affects: viewer sizing, head, body, blocks, backdrop
========================================================= */
.universe-app .u-viewer{
  position:fixed;
  top:0;
  right:0;
  width: min(var(--viewerW), 92vw);
  height:100%;
  z-index:10;
  background: rgba(5,5,9,.88);
  border-left:1px solid rgba(245,245,247,.12);
  backdrop-filter: blur(14px);
  transform: translateX(110%);
  transition: transform .22s ease;
  box-shadow: -20px 0 60px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
}
.universe-app .u-viewer.open{transform: translateX(0)}
.universe-app .u-viewer-head{
  padding:14px 14px 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(245,245,247,.10);
}

/* CRITICAL: allow left side to shrink so buttons never drop */
.universe-app .u-viewer-head-left{
  flex: 1 1 auto;
  min-width: 0;
}

/* CRITICAL: keep actions pinned and never shrinking */
.universe-app .u-viewer-actions{
  flex: 0 0 auto;
  display: inline-flex;
  gap: 8px;
  align-items: flex-start;
}

/* Make long titles wrap instead of forcing layout break */
.universe-app .u-viewer-title{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.15;
  max-width: 100%;
}
.universe-app .u-viewer-kind{
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color: rgba(245,245,247,.55);
}
.universe-app .u-viewer-title{
  margin-top:4px;
  font-weight:900;
  font-size:18px;
  letter-spacing:.4px;
}
.universe-app .u-iconbtn{
  border:1px solid rgba(245,245,247,.14);
  background: rgba(10,10,16,.35);
  color: rgba(245,245,247,.78);
  border-radius: 12px;
  padding:10px 12px;
  cursor:pointer;
}
.universe-app .u-iconbtn:hover{border-color: rgba(109,59,255,.45)}
.universe-app .u-viewer-body{
  padding:14px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.universe-app .u-viewer-image{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:16px;
  overflow:hidden;
  flex: 0 0 auto;
}
.universe-app .u-viewer-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


.universe-app .u-viewer-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.95;
}
.universe-app .u-viewer-block{
  border:1px solid rgba(245,245,247,.10);
  border-radius: 16px;
  padding:12px 12px 10px;
  background: rgba(10,10,16,.30);
}
.universe-app .u-viewer-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color: rgba(245,245,247,.62);
  margin-bottom:8px;
}
.universe-app .u-viewer-text{
  font-size:13px;
  line-height:1.6;
  color: rgba(245,245,247,.78);
}
.universe-app .u-chiprow{display:flex; flex-wrap:wrap; gap:8px}
.universe-app .u-viewer .u-chip{
  border:1px solid rgba(245,245,247,.14);
  background: rgba(5,5,9,.18);
  color: rgba(245,245,247,.72);
  border-radius: 999px;
  padding:8px 10px;
  font-size:12px;
  cursor:pointer;
  text-decoration:none;
}
.universe-app .u-viewer .u-chip:hover{border-color: rgba(109,59,255,.45); background: rgba(109,59,255,.10)}
.universe-app .u-viewer .u-chip.small{font-size:11px; padding:7px 10px}

.universe-app .u-backdrop{
  position:fixed;
  inset:0;
  z-index:9;
  background: rgba(0,0,0,.55);
}
@media (max-width: 820px){
  .universe-app .u-viewer{width:100vw}
}

/* Universe viewer should start below the global nav */
.universe-app .u-viewer{
  top: var(--nav-h, 56px);
  height: calc(100% - var(--nav-h, 56px));
}

/* Only this entry Dexxtra Productions: do not crop */
.universe-app #viewer[data-entry="project:dexxtra-productions"] #viewerImage img{
  height: auto;
  object-fit: contain;
}

/* Viewer header: keep arrows + X pinned, let long titles wrap */
.u-viewer-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.u-viewer-head-left {
  flex: 1 1 auto;
  min-width: 0; /* critical: allows shrinking instead of pushing buttons */
}

.u-viewer-kind {
  white-space: nowrap;
  opacity: 0.85;
}

.u-viewer-title {
  white-space: normal;        /* allow wrap */
  overflow-wrap: anywhere;    /* break long strings safely */
  word-break: break-word;
  line-height: 1.15;
  max-width: 100%;
}

/* right side buttons */
.u-viewer-head-right {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}

.u-viewer-head-right .u-iconbtn {
  flex: 0 0 auto;
}



/* =========================================================
   TERMINOLOGY VIEWER: CARD STACK
   Affects: terminology definitions inside the viewer
========================================================= */

/* Base record card (used elsewhere too) */
.universe-app .u-record-card{
  border: 1px solid var(--line, rgba(245,245,247,.12));
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
}
.universe-app .u-record-text{
  font-size: 14px;
  line-height: 1.5;
  margin-top: 8px;
}

/* Terminology wrapper should NOT be a box */
.universe-app #viewerTermBlock.u-viewer-block{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Each definition its own box */
.universe-app #viewerTermBlock .u-record-card{
  border: 1px solid var(--line, rgba(245,245,247,.12));
  background: rgba(10,10,16,.30);
  border-radius: 16px;
  padding: 12px 12px 10px;
  margin-top: 12px;
}
.universe-app #viewerTermBlock .u-record-card:first-child{
  margin-top: 0;
}


/* =========================================================
   TERMINOLOGY ROW META: ALIGNMENT
   Goal: Class column nudge + Origin centered consistently
========================================================= */

/* Class column: keep your nudge, center stack */
.universe-app .u-row-meta.is-term > .u-row-col:nth-of-type(1){
  justify-self: end;
  transform: translateX(22px); /* tweak */
  align-items: center;
  text-align: center;
}
.universe-app .u-row-meta.is-term > .u-row-col:nth-of-type(1) .u-row-label,
.universe-app .u-row-meta.is-term > .u-row-col:nth-of-type(1) .u-row-value{
  width: 100%;
  text-align: center;
}

/* Origin column: stretch so "Both" and "Universe" center the same */
.universe-app .u-row-meta.is-term > .u-row-col:nth-of-type(2){
  justify-self: stretch;         /* critical */
  width: 100%;                   /* critical */
  transform: translateX(24px);  /* keep your placement tweak */
  align-items: center;
  text-align: center;
}

/* Force full-width label/value so text-align works */
.universe-app .u-row-meta.is-term > .u-row-col:nth-of-type(2) .u-row-label,
.universe-app .u-row-meta.is-term > .u-row-col:nth-of-type(2) .u-row-value{
  width: 100%;
  text-align: center;
}

/* =========================================================
   TERMINOLOGY ROW META: make Class values line up
   Fix: give the Class column a fixed box so "Protocol" and
   "Signal State" share the same centerline
========================================================= */

.universe-app .u-row-meta.is-term > .u-row-col:nth-of-type(1){
  width: 170px;              /* match your grid col 1 (170px) */
  justify-self: end;
  transform: translateX(75px); /* keep your nudge */
  display: grid;             /* tighter centering than flex for text stacks */
  justify-items: center;
  text-align: center;
}

.universe-app .u-row-meta.is-term > .u-row-col:nth-of-type(1) .u-row-label,
.universe-app .u-row-meta.is-term > .u-row-col:nth-of-type(1) .u-row-value{
  width: 100%;
  text-align: center;
}

/* =========================================================
   EVENTS ROW META: ALIGNMENT
   Col 1: Appears in
   Col 2: Severity
   Goal: keep both stacks centered and stop long titles shifting
========================================================= */

/* Severity column (col 2): slight left nudge + centered stack */
.universe-app .u-row-meta.is-event > .u-row-col:nth-of-type(2){
  justify-self: end;
  transform: translateX(-10px);     /* tweak */
  display: grid;
  justify-items: center;
  text-align: center;
}
.universe-app .u-row-meta.is-event > .u-row-col:nth-of-type(2) .u-row-label,
.universe-app .u-row-meta.is-event > .u-row-col:nth-of-type(2) .u-row-value{
  width: 100%;
  text-align: center;
}

/* Appears in column (col 1): lock width + centered stack + right nudge */
.universe-app .u-row-meta.is-event > .u-row-col:nth-of-type(1),
.universe-app .u-row-meta.is-events > .u-row-col:nth-of-type(1){
  width: 170px;                     /* match grid col 1 */
  justify-self: end;
  transform: translateX(75px);      /* tweak */
  display: grid;
  justify-items: center;
  text-align: center;
}
.universe-app .u-row-meta.is-event > .u-row-col:nth-of-type(1) .u-row-label,
.universe-app .u-row-meta.is-event > .u-row-col:nth-of-type(1) .u-row-value,
.universe-app .u-row-meta.is-events > .u-row-col:nth-of-type(1) .u-row-label,
.universe-app .u-row-meta.is-events > .u-row-col:nth-of-type(1) .u-row-value{
  width: 100%;
  text-align: center;
}

/* =========================================================
   Project section
========================================================= */


/* Project: center "Format" stack (and nudge slightly) */
.universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(1){
  justify-self: end;            /* stays in col 1 */
  transform: translateX(10px);  /* tweak if needed */
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: center;
}

.universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(1) .u-row-label,
.universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(1) .u-row-value{
  width: 100%;
  text-align: center;
}

/* Project: Release column (centered stack + bumped LEFT) */
.universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(2){
  justify-self: end;             /* stays in col 2 */
  transform: translateX(-4px);  /* bump LEFT (tweak -10 to -28) */
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: center;
}

.universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(2) .u-row-label,
.universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(2) .u-row-value{
  width: 100%;
  text-align: center;
  transform: none;
}

/* Project Release value: prevent global ellipsis/max-width from shifting centering */
.universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(2) .u-row-value{
  max-width: none;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}

/* Project: lock Release column width so — and dates align perfectly */
.universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(2){
  width: 170px;                 /* lock the column box */
  justify-self: end;
  transform: translateX(50px); /* keep your left bump */
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: center;
}

.universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(2) .u-row-label,
.universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(2) .u-row-value{
  width: 100%;
  text-align: center;
}
/* =========================================================
   Character section
========================================================= */

/* Characters: center value under "Appears in" */
.universe-app .u-row-meta.is-character > 
.u-row-col:nth-of-type(2){
  align-items: center;
  text-align: center;
}


/* Characters: center values under labels (Character Type/Entity, Appears in/...) */
.universe-app .u-row-meta.is-character > .u-row-col,
.universe-app .u-row-meta.is-characters > .u-row-col{
  align-items: center;
  text-align: center;
}

.universe-app .u-row-meta.is-character > .u-row-col .u-row-label,
.universe-app .u-row-meta.is-character > .u-row-col .u-row-value,
.universe-app .u-row-meta.is-characters > .u-row-col .u-row-label,
.universe-app .u-row-meta.is-characters > .u-row-col .u-row-value{
  text-align: center;
}


/* Characters: nudge the Character Type column to the RIGHT */
.universe-app .u-row-meta.is-character > .u-row-col:nth-of-type(1),
.universe-app .u-row-meta.is-characters > .u-row-col:nth-of-type(1){
  justify-self: end;              /* keep it anchored in column 1 */
  transform: translateX(35px);    /* increase/decrease until perfect */
}


/* Dexxtra Productions appears in for character */
.universe-app .u-row-meta.is-character.appears-wide > .u-row-col:nth-of-type(2){
  transform: translateX(22px);
}


/* =========================================================
   Concept section
========================================================= */


/* Concepts: center values under their labels (Polarity/Dark, Appears in/Polar Night) */
.universe-app .u-row-meta.is-concept > .u-row-col,
.universe-app .u-row-meta.is-concepts > .u-row-col{
  align-items: center;
  text-align: center;
}


.universe-app .u-row-meta.is-concept > .u-row-col .u-row-label,
.universe-app .u-row-meta.is-concept > .u-row-col .u-row-value,
.universe-app .u-row-meta.is-concepts > .u-row-col .u-row-label,
.universe-app .u-row-meta.is-concepts > .u-row-col .u-row-value{
  text-align: center;
}

/* Concepts: nudge Polarity/Dark column slightly RIGHT */
.universe-app .u-row-meta.is-concept > .u-row-col:nth-of-type(1){
  justify-self: end;
  transform: translateX(13px); /* tweak: 6 to 14px */
}


/* =========================================================
   Location section
========================================================= */

/* Locations: center Stability value under Stability label */
.universe-app .u-row-meta.is-location > .u-row-col:nth-of-type(1){
  display: grid;
  justify-items: center;
  text-align: center;
  transform: translateX(14px);
}

/* Locations: move the whole "Appears in / promo-reel" column left */
.universe-app .u-row-meta.is-location > .u-row-col:nth-of-type(2){
  transform: translateX(-3px);
}

/* =========================================================
   SCROLLBAR SKIN: gray (Slot scroll)
   Affects: #introNote .u-signal-slotScroll
========================================================= */

/* Firefox */
.universe-app #introNote .u-signal-slotScroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(245,245,247,.22) rgba(5,5,9,.18);
}

/* Webkit */
.universe-app #introNote .u-signal-slotScroll::-webkit-scrollbar{
  width: 10px;
}
.universe-app #introNote .u-signal-slotScroll::-webkit-scrollbar-track{
  background: rgba(5,5,9,.18);
  border-radius: 999px;
}
.universe-app #introNote .u-signal-slotScroll::-webkit-scrollbar-thumb{
  background: rgba(245,245,247,.18);
  border-radius: 999px;
  border: 2px solid rgba(5,5,9,.18);
}
.universe-app #introNote .u-signal-slotScroll::-webkit-scrollbar-thumb:hover{
  background: rgba(245,245,247,.26);
}
.universe-app #introNote .u-signal-slotScroll::-webkit-scrollbar-thumb:active{
  background: rgba(245,245,247,.34);
}

/* =========================================================
   MOBILE OVERRIDES
   820: viewer width
   700: header controls stack
   640: row meta collapse
   560: slot01 toc
   520: category grid / alpha scroll
========================================================= */

/* MOBILE: make Archive header stack so search never gets clipped */
@media (max-width: 700px){
  .universe-app .u-archive-head{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .universe-app .u-archive-head-left,
  .universe-app .u-archive-head-right{
    width: 100%;
    align-items: stretch;
  }

  .universe-app .u-search{
    width: 100%;
    min-width: 0;
  }

  .universe-app .u-search input{
    min-width: 0;
    width: 100%;
  }
}

/* tighter phones: remove the hint so it cannot force overflow */
@media (max-width: 420px){
  .universe-app .u-search .hint{
    display: none;
  }

  .universe-app .u-search{
    gap: 8px;
    padding: 10px 10px;
  }

  .universe-app .u-search .u-enterbtn,
  .universe-app .u-clearbtn{
    padding: 0 10px;
  }
}
@media (max-width: 700px){
  .universe-app .u-search input::placeholder{
    content: "Search";
  }
}

/* Mobile: hide alpha index (A–Z) */
@media (max-width: 700px){
  .universe-app .u-alpha{
    display: none;
  }
}

/* Mobile: brighten category card right-side tags */
@media (max-width: 640px){
  /* right meta text: "identity, observers, entities" etc */
  .universe-app .u-category-meta > :last-child{
    color: rgba(245,245,247,.72); /* was around .55 */
  }

  /* optional: tiny bump in size for faster scan */
  .universe-app .u-category-meta > :last-child{
    font-size: 11.5px;
  }

  /* optional: keep the "recorded" pill readable too */
  .universe-app .u-category-meta .u-pill{
    color: rgba(245,245,247,.74);
  }
}

/* Mobile: add breathing room before Results */
@media (max-width: 640px){
  .universe-app .u-results-title{
    margin-top: 28px; /* increase from 14px */
  }
}

@media (max-width: 640px){

  /* Collapse applies to ALL row metas */
  .universe-app .u-row-meta{
    grid-template-columns: 1fr;
    row-gap: 6px;
    justify-items: end;
  }

  /* IMPORTANT: remove the hard lock that pins everything to grid-row: 1 */
  .universe-app .u-row-meta > *{
    grid-row: auto;
    grid-column: auto;
    align-self: start;
  }

  /* Kill every alignment nudge on phones */
  .universe-app .u-row-meta[class] > .u-row-col:nth-of-type(n),
  .universe-app .u-row-meta[class] > .u-row-meta-stack{
    transform: none;
    width: auto;
  }

  /* Let values breathe a little more on mobile */
  .universe-app .u-row-value{
    max-width: 100%;
  }
}

@media (max-width: 820px){

  /* Mobile meta becomes a locked 3-lane grid */
  .universe-app .u-row-meta{
    display: grid;
    grid-template-columns: 1fr 1fr 132px;
    column-gap: 14px;
    align-items: center;
    justify-items: stretch;
  }

  /* Remove placement locks */
  .universe-app .u-row-meta[class] > *{
    grid-row: auto;
    grid-column: auto;
  }
  
  /* Remove nudges */
  .universe-app .u-row-meta[class] > .u-row-col:nth-of-type(n),
  .universe-app .u-row-meta[class] > .u-row-meta-stack{
    transform: none;
    width: auto;
  }

  /* Stack always on the right */
  .universe-app .u-row-meta .u-row-meta-stack{
    grid-column: 3;
    justify-self: end;
    align-self: center;
  }

  /* Meta columns */
  .universe-app .u-row-meta .u-row-col{
    align-items: center;
    text-align: center;
    justify-self: stretch;
    min-width: 0;
  }

  .universe-app .u-row-meta .u-row-col:nth-of-type(1){ grid-column: 1; }
  .universe-app .u-row-meta .u-row-col:nth-of-type(2){ grid-column: 2; }
  .universe-app .u-row-meta .u-row-col:only-of-type{ grid-column: 2; }

  .universe-app .u-row-value{
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 700px){

  /* Meta becomes a single footer row */
  .universe-app .u-row-meta{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;

    /* kill desktop grid stuff */
    grid-template-columns: none;
    column-gap: 0;
  }

  /* Remove your hard lock placement rules */
  .universe-app .u-row-meta[class] > *{
    grid-row: auto;
    grid-column: auto;
  }
  
  /* Remove nudges */
  .universe-app .u-row-meta[class] > .u-row-col:nth-of-type(n),
  .universe-app .u-row-meta[class] > .u-row-meta-stack{
    transform: none;
    width: auto;
  }

  /* Each meta chunk gets equal space */
  .universe-app .u-row-col,
  .universe-app .u-row-meta-stack{
    flex: 1 1 0;
    min-width: 0;

    align-items: center;
    text-align: center;
  }

  /* Keep the kind chip stack centered */
  .universe-app .u-row-meta-stack{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }

  /* Let values truncate instead of pushing layout */
  .universe-app .u-row-value{
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Optional: tighten labels a touch on phones */
  .universe-app .u-row-label{ font-size: 10px; }
  .universe-app .u-row-value{ font-size: 11.5px; }
}


/* =========================================================
   Universe Results: Mobile Landscape Layout Fix
   Prevents right-side meta columns from crushing/overlapping
========================================================= */

@media (max-width: 980px) and (orientation: landscape) {
  /* Make each result row stack: text first, meta second */
  .u-row {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
    align-items: start;
  }

  /* Let meta become a wrapping strip instead of a tight grid */
  .u-row-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 14px;
    width: 100%;
  }

  /* Each meta column gets a safe minimum width */
  .u-row-meta .u-row-col {
    min-width: 130px;
    flex: 0 0 auto;
  }

  /* Keep the chip stack readable and not crushed */
  .u-row-meta .u-row-meta-stack {
    margin-left: auto;
    flex: 0 0 auto;
  }

  /* Stop values from smashing into each other */
  .u-row-meta .u-row-value {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (orientation: landscape) and (max-width: 1000px) {
  /* 1) Universal meta grid for ALL rows */
  .u-row .u-row-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 18px;
    align-items: center;
    justify-items: start;
  }

  /* 2) Ensure the stack always sits on the far right and aligns consistently */
  .u-row .u-row-meta .u-row-meta-stack {
    justify-self: end;
    text-align: right;
    align-items: flex-end;
  }

  /* 3) Hard neutralize any special landscape widening behavior */
  .u-row .u-row-meta.appears-wide,
  .u-row .u-row-meta.is-character.appears-wide,
  .u-row .u-row-meta.is-project.appears-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 4) Prevent label/value pairs from squeezing weirdly */
  .u-row .u-row-col {
    min-width: 0;
  }
  .u-row .u-row-label,
  .u-row .u-row-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Viewer swipe motion layer */
.universe-app .u-viewer{
  overflow: hidden;
}

/* This is what we physically drag */
.universe-app .u-viewer .u-swipe-layer{
  will-change: transform, opacity;
  transform: translateX(0) rotate(0deg);
  transition: transform .18s ease, opacity .18s ease;
}

/* While dragging, remove transition so it tracks finger */
.universe-app .u-viewer.is-dragging .u-swipe-layer{
  transition: none;
}

/* Optional: subtle edge glow when dragging */
.universe-app .u-viewer.is-dragging{
  box-shadow: -20px 0 60px rgba(0,0,0,.55), 0 0 0 1px rgba(109,59,255,.18);
}

@media (orientation: landscape) and (max-width: 980px) {
  /* Locations only: fine alignment nudges */
  .universe-app .u-row-meta.is-location > .u-row-col:nth-of-type(1){
    transform: translateX(75px);   /* Stability */
  }

  .universe-app .u-row-meta.is-location > .u-row-col:nth-of-type(2){
    transform: translateX(45px); /* Appears in: move left more */
  }
}

/* =========================================================
  Ipads
========================================================= */

@media (hover: none) and (pointer: coarse) and (min-width: 981px) and (max-width: 1366px) {
  /* Tablet layout: keep desktop grid, but stabilize columns */
  .universe-app .u-row {
    grid-template-columns: 1fr clamp(320px, 46vw, 520px);
  }

  .universe-app .u-row-meta{
    grid-template-columns: 170px minmax(0, 1fr) 132px;
    column-gap: 18px;
  }

  /* Kill the micro misalign only for iPad touch widths */
  .universe-app .u-row-meta.is-location > .u-row-col:nth-of-type(1){
    transform: translateX(0px);
  }
  .universe-app .u-row-meta.is-location > .u-row-col:nth-of-type(2){
    transform: translateX(-12px);
  }
}

/* =========================================================
   TABLET LOCK: iPad alignment (portrait + landscape)
   Goal: keep a stable 3-column meta grid and neutralize per-kind nudges
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .universe-app .u-row {
    /* keep 2-column row layout like desktop, but give meta a stable width */
    grid-template-columns: 1fr 460px;
  }

  .universe-app .u-row-meta {
    /* lock meta columns to consistent boxes */
    display: grid;
    grid-template-columns: 170px 170px 132px;
    column-gap: 18px;

    align-items: center;
    justify-items: center;
  }

  .universe-app .u-row-col {
    align-items: center;
    text-align: center;
    justify-self: center;
  }

  .universe-app .u-row-label,
  .universe-app .u-row-value {
    width: 100%;
    text-align: center;
  }

  /* keep values from pushing columns */
  .universe-app .u-row-value {
    max-width: 150px;
  }

  /* stack stays perfectly centered in its fixed 132px column */
  .universe-app .u-row-meta-stack {
    justify-self: center;
    text-align: center;
    align-items: center;
  }

  /* HARD: neutralize every special nudge on iPad only */
  .universe-app .u-row-meta[class] > .u-row-col:nth-of-type(n),
  .universe-app .u-row-meta[class] > .u-row-meta-stack {
    transform: none;
  }
}

@media (orientation: landscape) and (min-width: 768px) and (max-width: 1366px){
  /* force desktop row split */
  .universe-app .u-row{
    grid-template-columns: 1fr clamp(320px, 40vw, 460px);
  }

  /* force desktop meta grid */
  .universe-app .u-row-meta{
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 132px;
    column-gap: 18px;
    align-items: start;
    justify-items: end;
  }
}

@media (orientation: landscape)
  and (min-width: 980px) and (max-width: 1060px)
  and (min-height: 700px) and (max-height: 820px){

  /* iPad mini landscape: remove per-kind nudges that break perfect column alignment */
  .universe-app .u-row-meta.is-location > .u-row-col:nth-of-type(1),
  .universe-app .u-row-meta.is-location > .u-row-col:nth-of-type(2),
  .universe-app .u-row-meta.is-character > .u-row-col:nth-of-type(1),
  .universe-app .u-row-meta.is-character.appears-wide > .u-row-col:nth-of-type(2),
  .universe-app .u-row-meta.is-term > .u-row-col:nth-of-type(1),
  .universe-app .u-row-meta.is-term > .u-row-col:nth-of-type(2),
  .universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(1),
  .universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(2),
  .universe-app .u-row-meta.is-event > .u-row-col:nth-of-type(1),
  .universe-app .u-row-meta.is-event > .u-row-col:nth-of-type(2),
  .universe-app .u-row-meta.is-concept > .u-row-col:nth-of-type(1){
    transform: none;
  }
}

/* =========================================================
   iPAD: disable A–Z alpha index
========================================================= */
@media (min-width: 768px) and (max-width: 1366px){
  .universe-app .u-alpha{
    display: none;
  }
}

@media (orientation: landscape)
  and (min-width: 980px) and (max-width: 1060px)
  and (min-height: 700px) and (max-height: 820px){

  /* PROJECT ONLY: manual alignment knobs */
  .universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(1){
    transform: translateX(-63px);   /* Format column: +right, -left */
  }

  .universe-app .u-row-meta.is-project > .u-row-col:nth-of-type(2){
    transform: translateX(49px);   /* Release column: +right, -left */
  }
}

@media (orientation: landscape)
  and (min-width: 980px) and (max-width: 1060px)
  and (min-height: 700px) and (max-height: 820px){

  /* CHARACTER ONLY: move Character Type (col 1) LEFT */
  .universe-app .u-row-meta.is-character > .u-row-col:nth-of-type(1){
    transform: translateX(-38px); /* more negative = more left */
  }
}

@media (orientation: landscape)
  and (min-width: 980px) and (max-width: 1060px)
  and (min-height: 700px) and (max-height: 820px){

  /* EVENTS ONLY: move Severity (col 2) LEFT */
  .universe-app .u-row-meta.is-event > .u-row-col:nth-of-type(2){
    transform: translateX(-12px); /* more negative = more left */
  }
}

/* =========================================================
   MOBILE: DISABLE LANDSCAPE VIEW (phones only) fold
   Fix: allow unfolded foldables/tablets (taller landscape)
========================================================= */
@media (orientation: landscape) and (max-width: 980px) and (max-height: 520px){

  /* hide the actual UI */
  .universe-app .u-wrap{
    display: none;
  }

  /* show an overlay message */
  .universe-app::before{
    content: "Rotate to portrait for the Universe view.";
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    font-size: 14px;
    color: rgba(245,245,247,.88);
    background: #050509;
    z-index: 999999;
  }
}

/* =========================================================
   iPAD PORTRAIT: FINAL DIAL IN
   Fix: right meta lane too narrow for 3-col meta grid
   Scope: iPad portrait only
========================================================= */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px){

  /* Allow shrink without clipping */
  .universe-app .u-row > *{ min-width: 0; }
  .universe-app .u-row-meta{ min-width: 0; }

  /* Give the meta lane a real minimum so col 2 is not crushed */
  .universe-app .u-row{
    grid-template-columns: minmax(0, 1fr) clamp(400px, 50vw, 480px);
  }

  /* Slim fixed columns a touch so the middle column always exists */
  .universe-app .u-row-meta{
    grid-template-columns: 140px minmax(0, 1fr) 120px;
    column-gap: 14px;
    justify-items: center;
  }

  /* Keep the stack perfectly centered in its fixed column */
  .universe-app .u-row-meta-stack{
    width: 120px;
    justify-self: center;
    align-items: center;
    text-align: center;
  }

  /* Center the two meta columns cleanly */
  .universe-app .u-row-col{
    align-items: center;
    text-align: center;
    justify-self: center;
  }

  .universe-app .u-row-label,
  .universe-app .u-row-value{
    width: 100%;
    text-align: center;
  }

  /* Let values truncate inside their own column instead of pushing layout */
  .universe-app .u-row-value{
    max-width: 100%;
  }

  /* HARD: neutralize all per-kind nudges on iPad portrait */
  .universe-app .u-row-meta[class] > .u-row-col:nth-of-type(n),
  .universe-app .u-row-meta[class] > .u-row-meta-stack {
    transform: none;
  }
}

/* =========================================================
   iPAD PORTRAIT ONLY: PERFECT META COLUMN ALIGNMENT
   Goal: Class + Origin columns line up pixel-perfect across rows
========================================================= */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px){

  /* Keep the row split stable */
  .universe-app .u-row{
    grid-template-columns: minmax(0, 1fr) 472px; /* stable right lane */
  }

  /* Lock meta grid into equal fixed boxes */
  .universe-app .u-row-meta{
    display: grid;
    grid-template-columns: 170px 170px 132px;
    column-gap: 18px;
    align-items: start;
    justify-items: center;
  }

  /* Force the two meta columns to be identical containers */
  .universe-app .u-row-meta[class] > .u-row-col:nth-of-type(1),
  .universe-app .u-row-meta[class] > .u-row-col:nth-of-type(2){
    width: 170px;
    justify-self: center;
    align-items: center;
    text-align: center;
  }

  /* Force label/value to center inside those boxes */
  .universe-app .u-row-meta[class] > .u-row-col:nth-of-type(1) .u-row-label,
  .universe-app .u-row-meta[class] > .u-row-col:nth-of-type(1) .u-row-value,
  .universe-app .u-row-meta[class] > .u-row-col:nth-of-type(2) .u-row-label,
  .universe-app .u-row-meta[class] > .u-row-col:nth-of-type(2) .u-row-value{
    width: 100%;
    text-align: center;
  }

  /* Lock the chip stack column perfectly */
  .universe-app .u-row-meta[class] > .u-row-meta-stack{
    width: 132px;
    justify-self: center;
    align-items: center;
    text-align: center;
  }

  /* Prevent long values from shifting layout */
  .universe-app .u-row-value{
    max-width: 100%;
  }

  /* HARD: kill every per-kind nudge on iPad portrait */
  .universe-app .u-row-meta[class] > .u-row-col:nth-of-type(n){
    transform: none;
  }
}

/* =========================================================
   Mobile + iPad: nudge Character "Appears in" content LEFT
   Works because your resets only zero transforms on .u-row-col,
   not the children inside it. DO NOT DELETE THIS
========================================================= */

/* Mobile + small tablets */
@media (max-width: 820px){
  .universe-app .u-row-meta.is-character > .u-row-col:nth-of-type(2) .u-row-label,
  .universe-app .u-row-meta.is-character > .u-row-col:nth-of-type(2) .u-row-value{
    transform: translateX(-26px);
  }
}

/* All iPads (touch tablets) */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1366px){
  .universe-app .u-row-meta.is-character > .u-row-col:nth-of-type(2) .u-row-label,
  .universe-app .u-row-meta.is-character > .u-row-col:nth-of-type(2) .u-row-value{
    transform: translateX(-20px);
  }
}



/* =========================================================
   Animations
========================================================= */
/* =========================================================
   Universe: one time enter animation (content only)
   Animates .u-wrap, not the whole app container
========================================================= */
/* 1) Keep container stable */
.universe-app .u-wrap{
  opacity: 1;
}

/* 2) Animate the actual content blocks */
.universe-app .u-intro,
.universe-app .u-archive,
.universe-app .u-results-title,
.universe-app .u-results-box,
.universe-app .u-category{
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .75s ease, transform .75s ease;
  will-change: opacity, transform;
}

/* 3) Stagger using --i (optional) */
.universe-app .u-category,
.universe-app .u-results-title,
.universe-app .u-results-box{
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* 4) When ready */
.universe-app.is-enter .u-intro,
.universe-app.is-enter .u-archive,
.universe-app.is-enter .u-results-title,
.universe-app.is-enter .u-results-box,
.universe-app.is-enter .u-category{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .universe-app .u-intro,
  .universe-app .u-archive,
  .universe-app .u-results-title,
  .universe-app .u-results-box,
  .universe-app .u-category{
    transition: none;
    opacity: 1;
    transform: none;
  }
}
/* =========================================================
   Results: staggered row enter (Dexxtra subtle)
========================================================= */
.universe-app .u-row{
  animation: dexRowIn .28s ease both;
  animation-delay: calc(var(--i, 0) * 22ms);
  will-change: transform, opacity;
}

@keyframes dexRowIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .universe-app .u-row{
    animation: none;
    transform: none;
  }
}