/* ============================================================================
   ideaglobe.css — the Ideas globe module (decision 99)
   Ported from the approved mockup (templates/mockup_knowledge_globe.html).
   Scoped under .ideaglobe; token-only (tokens.css layer 1 → dreamy.css layer 2).
   Two variants in one module: .ig-globe (the rotating sphere, wide screens)
   and .ig-thread (the linear story thread, narrow screens). CSS decides which
   shows; the JS drives whichever is visible.
   ============================================================================ */
.ideaglobe{--ig-ease:cubic-bezier(.33,.66,.35,1)}
.ideaglobe i[data-lucide],.ideaglobe svg.lucide{width:16px;height:16px;vertical-align:-3px}

/* ---------- tabs ---------- */
.ideaglobe .gtabs{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap;align-items:center}
.ideaglobe .gtab{font:inherit;font-weight:700;font-size:.86rem;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule);background:var(--surface);color:var(--fg2);border-radius:999px;padding:6px 15px;cursor:pointer;transition:all .18s var(--ig-ease)}
.ideaglobe .gtab:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ideaglobe .gtab.on{background:var(--fg1);color:var(--bg);border-color:var(--fg1)}
.ideaglobe .gtabs .tally{margin-left:auto;font-size:.78rem;color:var(--fg3);font-style:italic;font-family:var(--font-prose)}

/* ---------- the globe stage ---------- */
.ideaglobe .stage{position:relative;height:min(640px,74vh);border-radius:var(--radius-frame);border:1px solid var(--rule-soft);overflow:hidden;touch-action:none;cursor:grab;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 62%,var(--bg)),var(--bg))}
.ideaglobe .stage.grabbing{cursor:grabbing}
.ideaglobe .stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(color-mix(in srgb,var(--fg1) 14%,transparent) .7px,transparent .8px);background-size:26px 26px}
.ideaglobe .stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .25s var(--ig-ease)}
.ideaglobe .stage.swap canvas{opacity:.12}
.ideaglobe .stage .hint{position:absolute;right:18px;bottom:12px;z-index:5;font-size:.78rem;color:var(--fg3);font-style:italic;font-family:var(--font-prose);pointer-events:none}

/* front-of-globe word chips (the news-globe markers) */
.ideaglobe .chips{position:absolute;inset:0;z-index:3;pointer-events:none}
.ideaglobe .chip{position:absolute;pointer-events:auto;cursor:pointer;
  background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(2px);
  border:1px solid color-mix(in srgb,var(--teach) 35%,transparent);border-radius:999px;padding:3px 10px 3px 8px;
  box-shadow:var(--shadow-sm);white-space:nowrap;
  opacity:0;transition:opacity .3s var(--ig-ease),background .28s var(--ig-ease),border-color .28s var(--ig-ease),padding .28s var(--ig-ease);will-change:left,top}
.ideaglobe .chip.show{opacity:1}
.ideaglobe .chip.gold{border-color:color-mix(in srgb,var(--magic) 55%,transparent)}
.ideaglobe .chip .body{display:flex;align-items:center;gap:6px;transition:opacity .28s var(--ig-ease),transform .28s var(--ig-ease)}
.ideaglobe .chip .dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;
  background:var(--teach);box-shadow:0 0 5px color-mix(in srgb,var(--teach) 60%,transparent);opacity:0;transition:opacity .28s var(--ig-ease)}
.ideaglobe .chip.gold .dot{background:var(--magic);box-shadow:0 0 7px color-mix(in srgb,var(--magic) 70%,transparent)}
.ideaglobe .chip .cw{font-size:.76rem;font-weight:800;color:var(--fg1)}
.ideaglobe .chip img{width:17px;height:22px;object-fit:cover;border-radius:3px}
.ideaglobe .chip .cn{font-size:.66rem;font-weight:800;color:var(--magic-deep)}
.ideaglobe .chip:hover{border-color:var(--teach)}
/* mini = a presence blip on the side of the viewing zone (there, but unreadable);
   it grows to a full readable chip as it rotates into the front, shrinks on the way out */
.ideaglobe .chip.mini{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;padding:0;pointer-events:none}
.ideaglobe .chip.mini .body{opacity:0;transform:scale(.55)}
.ideaglobe .chip.mini .dot{opacity:1}
.ideaglobe .stage.hold .chip:not(.hot){opacity:.25}

/* the lens (item card + story cards) — zooms out of a node */
.ideaglobe .peek{position:absolute;z-index:8;width:308px;background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);padding:16px 16px 12px;
  transform:scale(.5);opacity:0;pointer-events:none;transition:transform .3s var(--ig-ease),opacity .22s var(--ig-ease)}
.ideaglobe .peek.show{transform:scale(1);opacity:1;pointer-events:auto}
.ideaglobe .peek .eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teach-ink)}
.ideaglobe .peek h3{font-family:var(--font-display);font-size:1.35rem;font-weight:600;margin:2px 0 8px}
.ideaglobe .peekcards{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.ideaglobe .pcard{flex:0 0 128px;background:var(--surface-2);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .18s var(--ig-ease);text-decoration:none;display:block}
.ideaglobe .pcard:hover{transform:translateY(-2px)}
.ideaglobe .pcard img{width:100%;height:76px;object-fit:cover;display:block}
.ideaglobe .pcard .t{font-size:.74rem;font-weight:700;color:var(--fg1);padding:6px 8px 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
.ideaglobe .pcard .a{font-size:.66rem;color:var(--fg3);padding:0 8px 7px}
.ideaglobe .peek .foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.ideaglobe .peek .more{font-size:.78rem;font-weight:800;color:var(--magic-deep)}
.ideaglobe .peek .go{font-size:.82rem;font-weight:800;color:var(--accent-ink);text-decoration:none}
.ideaglobe .peek .none{font-family:var(--font-prose);font-style:italic;color:var(--fg3);font-size:.9rem;margin:4px 0 6px}
.ideaglobe .peek .x{position:absolute;top:10px;right:12px;border:0;background:none;color:var(--fg3);cursor:pointer;font-size:1rem;line-height:1}

.ideaglobe .legend{display:flex;gap:16px;flex-wrap:wrap;margin:10px 2px 0;font-size:.8rem;color:var(--fg3);align-items:center}
.ideaglobe .legend .k{display:inline-flex;align-items:center;gap:6px}
.ideaglobe .legend .dotk{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--surface),var(--teach-soft));border:2px solid var(--teach)}
.ideaglobe .legend .dotk.gold{border-color:var(--magic);box-shadow:0 0 6px color-mix(in srgb,var(--magic) 55%,transparent)}
.ideaglobe .legend .goldk{color:var(--magic-deep);font-weight:800}

/* ---------- the story thread (narrow screens) ---------- */
.ideaglobe .ig-thread{max-width:480px;margin:0 auto}
.ideaglobe .screen{height:calc(100dvh - 200px);min-height:420px;overflow-y:auto;padding:0 4px 26px;scrollbar-width:thin;position:relative}
.ideaglobe .pcount{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:8px;margin:0 -4px 8px;padding:9px 8px 8px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule-soft)}
.ideaglobe .pcount .pt{font-family:var(--font-display);font-weight:600;font-size:1rem}
.ideaglobe .pcount .pc{margin-left:auto;font-size:.7rem;font-weight:800;color:var(--teach-ink);background:var(--teach-soft);border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums}
.ideaglobe .psub{font-family:var(--font-prose);font-style:italic;font-size:.8rem;color:var(--fg3);margin:0 2px 10px}
.ideaglobe .ptabs{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.ideaglobe .ptab{font:inherit;font-size:.72rem;font-weight:800;border-radius:999px;padding:4px 11px;background:var(--surface);border:1px solid var(--rule);color:var(--fg3);cursor:pointer}
.ideaglobe .ptab.on{background:var(--fg1);color:var(--bg);border-color:var(--fg1)}

.ideaglobe .rail{position:relative;padding:6px 0 10px}
.ideaglobe .rail::before{content:"";position:absolute;left:32%;top:0;bottom:0;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--teach-soft),var(--teach),var(--teach-soft))}
.ideaglobe .ritem{position:relative;min-height:118px;margin:0 0 22px}
.ideaglobe .ritem::before{content:"";position:absolute;left:25%;width:16%;top:50%;height:2px;background:color-mix(in srgb,var(--teach) 45%,transparent)}
.ideaglobe .ritem .jdot{position:absolute;left:32%;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:var(--surface);border:2.5px solid var(--teach);z-index:1}
.ideaglobe .rleft{position:absolute;left:0;width:25%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.ideaglobe .rpill{font-size:.78rem;font-weight:800;color:var(--teach-ink);background:var(--teach-soft);border-radius:999px;padding:4px 11px;max-width:100%;overflow-wrap:break-word}
.ideaglobe .rleft .rn{font-size:.66rem;font-weight:700;color:var(--fg3)}
.ideaglobe .rright{margin-left:41%;position:relative}
.ideaglobe .railend{text-align:center;font-family:var(--font-prose);font-style:italic;font-size:.78rem;color:var(--fg3);padding:10px 0 4px}
/* a catalogue item still waiting for a story: muted rail, dashed placeholder card */
.ideaglobe .ritem.isempty::before{background:color-mix(in srgb,var(--teach) 22%,transparent)}
.ideaglobe .ritem.isempty .jdot{border-color:color-mix(in srgb,var(--teach) 45%,transparent)}
.ideaglobe .rleft .rn.soon{opacity:.75}
.ideaglobe .scard.empty{background:color-mix(in srgb,var(--surface) 55%,transparent);border:1.5px dashed var(--rule);box-shadow:none;
  display:flex;align-items:center;justify-content:center;gap:6px;min-height:74px;padding:14px 12px;text-align:center}
.ideaglobe .scard.empty .spark{color:var(--magic-deep);font-weight:800}
.ideaglobe .scard.empty .emsg{font-family:var(--font-prose);font-style:italic;color:var(--fg3);font-size:.82rem}

/* ---------- concept thread: full sentences, so a clean idea list (no pills) ---------- */
.ideaglobe .rail.concept::before{left:15px}                     /* journey line hugs the far left */
.ideaglobe .ritem.concept{min-height:0;margin:0 0 17px;padding-left:34px}
.ideaglobe .ritem.concept::before{display:none}                 /* no left-column connector */
.ideaglobe .ritem.concept .jdot{left:15px;top:9px;transform:translate(-50%,0)}
.ideaglobe .ritem.concept .clead{position:static;width:auto;transform:none;display:block;text-align:left}
.ideaglobe .ritem.concept .ctext{display:block;font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--fg1);line-height:1.3}
.ideaglobe .ritem.concept .cnote{display:block;margin-top:3px;font-size:.68rem;font-weight:800;color:var(--magic-deep)}
.ideaglobe .ritem.concept .cnote.soon{font-family:var(--font-prose);font-style:italic;font-weight:400;color:var(--fg3);opacity:.85}
.ideaglobe .ritem.concept .rright{margin-left:0;margin-top:9px;max-width:300px}

.ideaglobe .scard{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-md);overflow:hidden;width:100%}
.ideaglobe .scard .lnk{display:block;color:inherit;text-decoration:none}
.ideaglobe .scard img{width:100%;height:96px;object-fit:cover;display:block}
.ideaglobe .scard .t{font-size:.8rem;font-weight:800;color:var(--fg1);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:8px 10px 0}
.ideaglobe .scard .meta{display:flex;align-items:center;gap:6px;padding:5px 10px 9px}
.ideaglobe .scard .age{font-size:.64rem;font-weight:800;color:var(--fg3);background:var(--surface-2);border-radius:999px;padding:2px 8px}
.ideaglobe .scard .more{font:inherit;font-size:.66rem;font-weight:800;color:var(--magic-deep);margin-left:auto;border:0;background:none;cursor:pointer;padding:0}
.ideaglobe .pagedots{display:flex;gap:4px;justify-content:center;margin-top:7px}
.ideaglobe .pagedots i{width:5px;height:5px;border-radius:50%;background:var(--rule)}
.ideaglobe .pagedots i.on{background:var(--teach)}

.ideaglobe .flipwrap{perspective:900px}
.ideaglobe .flip3d{position:relative;transform-style:preserve-3d;transition:transform .55s var(--ig-ease)}
.ideaglobe .flip3d.turnY{transform:rotateY(-180deg)}
.ideaglobe .flip3d.snap{transition:none}
.ideaglobe .face{backface-visibility:hidden}
.ideaglobe .face.back{position:absolute;inset:0}
.ideaglobe .face.backY{transform:rotateY(180deg)}

/* ---------- which variant shows ---------- */
@media(max-width:760px){.ideaglobe .ig-globe{display:none}}
@media(min-width:761px){.ideaglobe .ig-thread{display:none}}

@media(prefers-reduced-motion:reduce){
  .ideaglobe .flip3d{transition:none}
  .ideaglobe .chip{transition:none}
}