/* ════════════════════════════════════════════════════════════
   GLOBO DELLA GENEALOGIA — lineage-world.css (/lineage su desktop, public/js/lineage-world.js)
   Piano docs/plans/LINEAGE_GLOBO.md; nato dal prototipo scripts/lineage/prototype-globo.html (provato dall'utente il 2026-11-10).
   Colori solo da token (theme.css: --sog-globe-*, --sog-lineage-1…4). Su telefono e tablet resta il grafico verticale (lineage.css):
   la stessa media query del loader (lineage-loader.js) decide quale dei due contenitori si vede.
════════════════════════════════════════════════════════════ */

.lw, .lw-seo-desk { display: none; }
@media (min-width: 1024px) and (pointer: fine) {
  .lw { display: block; }
  .lw-seo-desk { display: block; }
  /* sotto il globo restano le landrace (in cima all'elenco dei capostipiti) e il grafico verticale di sempre; l'intro serve solo senza globo */
  .lineage-page .lf-intro { display: none; }
  /* "Albero completo" del globo scorre fin qui: un po' d'aria sotto l'header */
  .lineage-page .lf-box { scroll-margin-top: 90px; }
  /* il globo non è partito (lineage-world.js → fallback): torna la pagina di prima */
  .lineage-page.lw-failed .lw, .lineage-page.lw-failed .lw-seo-desk { display: none; }
  .lineage-page.lw-failed .lf-intro { display: block; }
}

/* ── esploratore ── */
/* dentro .lineage-page (max 1200 px): riquadro alto quanto lo schermo meno header, briciole e titolo */
.lw { position: relative; height: max(600px, calc(100vh - 230px)); margin: 0 0 32px; overflow: hidden; user-select: none; -webkit-user-select: none;
  border: 1px solid var(--sog-border-soft); border-radius: var(--sog-radius); background: var(--sog-bg); }
.lw-seo-desk { margin: 0 0 14px; color: var(--sog-text-muted); max-width: 820px; }
/* prima che il JS disegni: un cerchio dello stesso gradiente e della stessa misura (la pagina non salta) */
.lw-pre { position: absolute; top: 50%; left: calc((100% - 368px) / 2 + 10px); width: min(72vh, 58vw); max-width: 720px; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); background: radial-gradient(circle at 31% 29%, var(--sog-globe-ocean-hi), var(--sog-globe-ocean) 70%); opacity: .9; }
.lw.is-ready .lw-pre { display: none; }
.lw canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.lw canvas.is-drag { cursor: grabbing; }
.lw canvas.is-hot { cursor: pointer; }
.lw-probe { display: none; }
.lw-err { position: absolute; left: 24px; bottom: 24px; margin: 0; color: var(--sog-text-muted); }

.lw-panel { position: absolute; z-index: 3; top: 24px; right: 24px; bottom: 24px; width: 320px; display: flex; flex-direction: column; overflow: hidden;
  background: var(--sog-panel); border: 1px solid var(--sog-border-soft); border-radius: var(--sog-radius); box-shadow: var(--sog-shadow);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.lw-panel.is-off { transform: translateX(48px); opacity: 0; pointer-events: none; }
.lw-pbody { flex: 1; overflow: auto; padding: 18px 18px 22px; scrollbar-width: thin; }
.lw-h { display: block; margin: 20px 0 8px; color: var(--sog-text-muted); font: 700 .7rem var(--sog-font-head); letter-spacing: .12em; text-transform: uppercase; }
.lw-h:first-child { margin-top: 0; }
.lw-sbox { position: relative; }
.lw-search { box-sizing: border-box; width: 100%; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--sog-border); background: var(--sog-bg-2); color: var(--sog-text);
  font: inherit; outline: none; }
.lw-search:focus { border-color: var(--sog-border-strong); box-shadow: 0 0 0 3px var(--sog-accent-soft); }
.lw-results { margin: 6px 0 0; }
.lw-results:empty { display: none; }
.lw-list { list-style: none; margin: 0; padding: 0; }
.lw-item { display: flex; box-sizing: border-box; width: 100%; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 10px; background: none;
  color: var(--sog-text); font: inherit; text-align: left; cursor: pointer; }
.lw-item:hover, .lw-item:focus-visible { background: var(--sog-surface-hover); outline: none; }
.lw-item:focus-visible { box-shadow: inset 0 0 0 2px var(--sog-accent-text); }
.lw-item .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-item .n { margin-left: auto; padding-left: 8px; color: var(--sog-text-muted); font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lw-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sog-gold); }
.lw-dot.is-small { background: none; box-shadow: inset 0 0 0 1.5px var(--sog-gold); }
.lw-dot.is-strain { background: none; box-shadow: inset 0 0 0 1.5px var(--sog-accent-text); }
.lw-x { color: var(--sog-text-faint); }
.lw-more summary { padding: 6px 8px; color: var(--sog-accent-text); font-size: .88rem; cursor: pointer; }
.lw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lw-help { margin: 22px 0 0; color: var(--sog-text-faint); font-size: .82rem; }
.lw-plus { margin: 6px 4px; color: var(--sog-text-faint); font-size: .82rem; }
.lw-back { padding: 0; border: 0; background: none; color: var(--sog-accent-text); font: 600 .86rem var(--sog-font-body); cursor: pointer; }
.lw-back:hover { text-decoration: underline; }
.lw-ptitle { margin: 10px 0 2px; font: 800 1.5rem/1.15 var(--sog-font-head); color: var(--sog-gold-text); }
.lw-psub { margin: 0 0 12px; color: var(--sog-text-muted); font-size: .9rem; }

.lw-zoom { position: absolute; z-index: 2; left: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 6px; transition: opacity .3s; }
.lw-zoom.is-off, .lw-tips.is-off { opacity: 0; pointer-events: none; }
.lw-zoom button, .lw-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sog-border); background: var(--sog-panel); color: var(--sog-text);
  font: 600 1.15rem/1 var(--sog-font-body); cursor: pointer; box-shadow: var(--sog-shadow); }
.lw-zoom button:hover, .lw-arrow:hover { border-color: var(--sog-border-strong); color: var(--sog-accent-text); }
.lw-tips { position: absolute; z-index: 2; bottom: 20px; left: 40%; transform: translateX(-50%); margin: 0; color: var(--sog-text-faint); font-size: .82rem; white-space: nowrap;
  transition: opacity .4s; pointer-events: none; }
.lw-tip { position: absolute; z-index: 4; padding: 7px 11px; border-radius: 10px; background: var(--sog-panel); border: 1px solid var(--sog-border); box-shadow: var(--sog-shadow);
  font-size: .84rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; }
.lw-tip.is-on { opacity: 1; }
.lw-tip b { font-family: var(--sog-font-head); }
.lw-tip small { display: block; color: var(--sog-text-muted); }
.lw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* livelli sopra il canvas: Incontro e Strain */
.lw-ov { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lw-layer { position: absolute; inset: 0; pointer-events: none; }
.lw-layer > * { pointer-events: auto; }
.lw-crumbs { position: absolute; left: 190px; top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .88rem; color: var(--sog-text-muted); }
.lw-crumbs a { color: var(--sog-accent-text); text-decoration: none; font-weight: 600; }
.lw-crumbs a:hover { text-decoration: underline; }
.lw-crumbs .sep { color: var(--sog-text-faint); }
.lw-crumbs .cur { color: var(--sog-text); font-weight: 600; }

.lw-meet-head { position: absolute; left: 190px; right: 190px; top: 86px; text-align: center; }
.lw-meet-title { display: flex; align-items: center; justify-content: center; gap: 16px; font: 800 1.7rem/1.1 var(--sog-font-head); letter-spacing: .05em; text-transform: uppercase; }
.lw-meet-title a { color: var(--sog-gold-text); text-decoration: none; }
.lw-meet-title a:hover { text-decoration: underline; }
.lw-meet-line { width: 70px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--sog-globe-arc-end), var(--sog-globe-arc)); }
.lw-meet-line.r { background: linear-gradient(90deg, var(--sog-globe-arc), var(--sog-globe-arc-end)); }
.lw-meet-x { color: var(--sog-text-faint); font-weight: 400; }
.lw-meet-sub { margin: 10px 0 0; color: var(--sog-text-muted); }
.lw-meet .lw-row { position: absolute; left: 24px; right: 24px; top: 46%; }
.lw-hint { position: absolute; left: 0; right: 0; bottom: 26px; margin: 0; text-align: center; color: var(--sog-text-faint); font-size: .82rem; pointer-events: none; }

.lw-row { display: flex; align-items: center; gap: 8px; }
.lw-track { flex: 1; min-width: 0; display: flex; justify-content: safe center; gap: 10px; padding: 14px 44px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.lw-track::-webkit-scrollbar { display: none; }
.lw-arrow { flex: none; box-shadow: none; }
.lw-arrow[disabled] { opacity: .3; cursor: default; }

.lw-chip { position: relative; flex: none; display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; padding: 9px 18px; border-radius: 999px;
  background: var(--sog-panel); border: 1px solid var(--sog-border); color: var(--sog-text); text-decoration: none; white-space: nowrap;
  transition: border-color .15s, background-color .15s, transform .15s; }
.lw-chip:hover, .lw-chip:focus-visible { border-color: var(--sog-border-strong); background: var(--sog-panel-hover); transform: translateY(-2px); outline: none; }
.lw-chip:focus-visible { box-shadow: 0 0 0 2px var(--sog-accent-text); }
.lw-chip b { font: 700 .95rem/1.25 var(--sog-font-head); }
.lw-chip small { color: var(--sog-text-muted); font-size: .76rem; line-height: 1.3; }
.lw-chip.is-hub b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--sog-accent-text); vertical-align: 2px; }
.lw-chip.is-land { border-color: var(--sog-gold); background: var(--sog-gold-soft); }
.lw-chip.is-land b { color: var(--sog-gold-text); }
.lw-chip.is-sm { padding: 6px 14px; }
.lw-chip.is-sm b { font-size: .88rem; }
.lw-chip.has-band { padding-left: 24px; }
.lw-chip.has-band::after { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: var(--band); }
.lw-chip.is-more { border-style: dashed; color: var(--sog-accent-text); cursor: pointer; font: inherit; }
.lw-fly { position: fixed !important; z-index: 60; margin: 0 !important; pointer-events: none; transition: none !important; }

/* stato Strain */
.lw-st { position: absolute; left: 190px; right: 190px; top: 72px; bottom: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lw-ribbons { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lw-ribbons path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; opacity: .85; }
.lw-lab { margin: 0 0 8px; color: var(--sog-text-muted); font: 700 .7rem var(--sog-font-head); letter-spacing: .12em; text-transform: uppercase; }
.lw-formula { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; max-width: 100%; }
.lw-paren { display: inline-flex; align-items: center; gap: 10px; }
.lw-paren > .p { color: var(--sog-text-muted); font: 300 2.4rem/1 var(--sog-font-head); opacity: .7; }
.lw-paren-more { padding: 4px 12px; border-radius: 999px; border: 1px dashed var(--sog-border-strong); background: none; color: var(--sog-text-muted);
  font: 600 .9rem var(--sog-font-body); cursor: pointer; }
.lw-noparents { margin: 0; color: var(--sog-text-muted); }
.lw-gap { flex: none; height: 54px; }
.lw-name { position: relative; margin: 0; font: 800 clamp(1.9rem, 3.2vw, 2.9rem)/1.1 var(--sog-font-head); text-align: center; }
.lw-name.is-land { color: var(--sog-gold-text); }
.lw-cline { width: min(320px, 60%); height: 4px; margin: 12px 0; border-radius: 2px; transform-origin: center; }
.lw-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; color: var(--sog-text-muted); }
.lw-btn { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--sog-border-strong); background: var(--sog-accent-soft); color: var(--sog-accent-text);
  font: 600 .88rem var(--sog-font-body); text-decoration: none; cursor: pointer; }
.lw-btn:hover { background: var(--sog-accent-soft-hover); }
.lw-btn.is-main { border-color: transparent; background: var(--sog-accent); color: var(--sog-on-accent); }
.lw-btn.is-main:hover { background: var(--sog-accent-strong); }
.lw-origins { display: grid; grid-template-columns: auto 220px; gap: 5px 12px; align-items: center; margin-top: 18px; font-size: .86rem; }
.lw-origins button { padding: 0; border: 0; background: none; color: var(--sog-gold-text); font: 600 .86rem var(--sog-font-body); text-align: right; cursor: pointer; }
.lw-origins button:hover { text-decoration: underline; }
.lw-origins .nd { color: var(--sog-text-muted); text-align: right; }
.lw-bar { height: 8px; border-radius: 4px; background: var(--sog-gold); transform-origin: left; }
.lw-bar.is-rest { opacity: .5; }
.lw-bar.is-nd { background: var(--sog-text-faint); }
.lw-note { grid-column: 1 / -1; margin: 2px 0 0; color: var(--sog-text-faint); font-size: .76rem; text-align: center; }
.lw-kids { width: calc(100% + 340px); margin-top: 40px; }
.lw-kids .lw-lab { text-align: center; }

/* testo sotto l'esploratore (anche per Google: LineageController, riassunto di LineageGraphJson::summary) */
.lw-seo { margin: 36px 0 0; }
.lw-seo h2 { margin: 0 0 10px; font: 800 1.3rem/1.2 var(--sog-font-head); }
.lw-seo p { color: var(--sog-text-muted); }
.lw-seo ul { margin: 0 0 22px; padding-left: 18px; line-height: 1.9; }
.lw-seo .lw-gold { color: var(--sog-gold-text); font-weight: 600; }
.lw-seo-lands { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; padding: 0 !important; }
.lw-seo-lands li { display: inline-flex; gap: 6px; align-items: baseline; padding: 2px 12px; border-radius: 999px; background: var(--sog-gold-soft); }
.lw-seo-lands small { color: var(--sog-text-muted); }
.lw.is-init .lw-panel, .lw.is-init .lw-zoom, .lw.is-init .lw-tips { transition: none; }