/* Graph sphere (24/10/2026): an always-dark stage with the teal particle sphere, beside a side panel that
   follows the app theme. The stage defines its own colours, so it reads the same in light and dark mode.
   A few `!important` rules defend the component from ID-scoped module rules (e.g. the evidence workbench
   sizes every svg and spaces every details element). */

/* "Lista | Esfera" switch, Elicit-style segmented control. */
.graph-sphere-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:14px 0 12px}
.graph-sphere-bar>h3,.graph-sphere-bar>p{margin:0}
.paper-surface .graph-sphere-bar{margin:26px 0 10px}
.graph-sphere-toggle{display:inline-flex;flex:none;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.graph-sphere-toggle button{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px;border:0;border-radius:4px;background:transparent;color:var(--muted);font-size:12.5px;font-weight:500;line-height:1;white-space:nowrap;transition:background-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.graph-sphere-toggle button:hover{color:var(--ink)}
.graph-sphere-toggle button[aria-pressed=true]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line-strong),var(--shadow-sm)}
.graph-sphere-toggle button[aria-pressed=true] svg{color:var(--green)}
.graph-sphere-toggle svg{display:inline-block!important;flex:none;width:14px!important;height:14px!important;max-width:none!important;margin:0!important}

[data-graph-sphere-host]{margin:4px 0 10px}
[data-graph-sphere-host][hidden]{display:none!important}
.graph-sphere-loading{display:grid;place-items:center;min-height:clamp(520px,66vh,660px);margin:0;border:1px solid var(--line);border-radius:var(--radius-card);background:radial-gradient(ellipse 70% 75% at 42% 48%,#12292d 0%,#0d1d20 40%,#050b0c 100%);color:#BDEBEE;font-size:13px}

/* Component frame. */
.graph-sphere{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;height:clamp(520px,66vh,660px);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);font-family:var(--font-ui);font-size:13px;line-height:1.5;text-align:left;animation:graph-sphere-in var(--t) var(--ease-out) backwards}
@keyframes graph-sphere-in{from{opacity:0;transform:translateY(6px)}}
.graph-sphere svg{display:inline-block!important;flex:none;width:15px!important;height:15px!important;max-width:none!important;margin:0!important}
.graph-sphere svg.graph-sphere__line{width:24px!important;height:8px!important}

/* Stage: self-contained dark palette. */
.graph-sphere__stage{
  --sphere-bg:#0d1d20;--sphere-bg-deep:#050b0c;--sphere-bg-lift:#12292d;
  --sphere-ink:#E8FBF9;--sphere-soft:#BDEBEE;--sphere-faint:#86AEB2;
  --sphere-line:rgba(189,235,238,.14);--sphere-line-strong:rgba(189,235,238,.26);
  --sphere-glass:rgba(7,17,19,.72);--sphere-raise:rgba(189,235,238,.07);
  --sphere-accent:#56B6C2;--sphere-glow:rgba(86,182,194,.5);
  position:relative;min-width:0;min-height:0;overflow:hidden;color:var(--sphere-ink);color-scheme:dark;
  background:radial-gradient(ellipse 72% 78% at 50% 47%,var(--sphere-bg-lift) 0%,var(--sphere-bg) 40%,var(--sphere-bg-deep) 100%);
}
.graph-sphere__stage:focus{outline:none}
.graph-sphere__stage:focus-visible{outline:2px solid var(--sphere-accent);outline-offset:-4px;border-radius:var(--radius-card) 0 0 var(--radius-card)}
.graph-sphere__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.graph-sphere__tooltip{position:absolute;top:0;left:0;z-index:2;display:grid;gap:3px;max-width:280px;padding:9px 11px;border:1px solid var(--sphere-line-strong);border-radius:var(--radius);background:rgba(5,11,12,.92);color:var(--sphere-ink);font-size:12px;line-height:1.4;box-shadow:0 10px 30px -10px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .12s;backdrop-filter:blur(6px)}
.graph-sphere__tooltip[data-visible=true]{opacity:1}
.graph-sphere__tooltip strong{font-weight:600;color:var(--sphere-ink)}
.graph-sphere__tooltip span{color:var(--sphere-faint)}
.graph-sphere__tooltip span+span{color:var(--sphere-soft)}

.graph-sphere__legend{position:absolute;top:12px;left:12px;z-index:1;max-width:min(250px,calc(100% - 76px));margin:0!important;border:1px solid var(--sphere-line);border-radius:var(--radius-card);background:var(--sphere-glass);color:var(--sphere-soft);font-size:12px;line-height:1.45;backdrop-filter:blur(6px)}
.graph-sphere__legend>summary{display:flex;align-items:center;gap:6px;padding:7px 11px;color:var(--sphere-ink)!important;font-size:11.5px!important;font-weight:600!important;letter-spacing:.05em;line-height:1.4!important;text-transform:uppercase;list-style:none;cursor:pointer;user-select:none}
.graph-sphere__legend>summary::-webkit-details-marker{display:none}
.graph-sphere__legend>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--t-fast)}
.graph-sphere__legend[open]>summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.graph-sphere__legend>summary:focus-visible{outline:2px solid var(--sphere-accent);outline-offset:2px;border-radius:var(--radius-card)}
.graph-sphere .graph-sphere__legend ul{display:grid;gap:5px;margin:0;padding:2px 12px 11px;font-size:12px;line-height:1.45;list-style:none}
.graph-sphere__legend li{display:flex;align-items:center;gap:8px}
.graph-sphere__legend-note{color:var(--sphere-faint)}
.graph-sphere .graph-sphere__legend li.graph-sphere__legend-head{margin-top:5px;color:var(--sphere-faint);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.graph-sphere__key{display:inline-grid;place-items:center;flex:none;width:14px;color:var(--sphere-accent);font-size:12px;font-weight:700}
.graph-sphere__key--size{display:inline-flex;align-items:center;gap:2px;width:14px}
.graph-sphere__key--size i{display:block;width:4px;height:4px;border-radius:50%;background:var(--sphere-soft)}
.graph-sphere__key--size i+i{width:8px;height:8px}

.graph-sphere__controls{position:absolute;top:12px;right:12px;z-index:1;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--sphere-line);border-radius:var(--radius-card);background:var(--sphere-glass);backdrop-filter:blur(6px)}
.graph-sphere__controls button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:0;background:transparent;color:var(--sphere-soft);transition:background-color var(--t-fast),color var(--t-fast)}
.graph-sphere__controls button+button{border-top:1px solid var(--sphere-line)}
.graph-sphere__controls button:hover{background:var(--sphere-raise);color:var(--sphere-ink)}
.graph-sphere__controls button[aria-pressed=true]{background:rgba(86,182,194,.16);color:var(--sphere-ink)}
.graph-sphere__controls button:focus-visible{outline:2px solid var(--sphere-accent);outline-offset:-2px}
.graph-sphere__hint{position:absolute;bottom:12px;left:12px;z-index:1;margin:0;padding:4px 9px;border-radius:999px;color:var(--sphere-faint);font-size:11.5px;line-height:1.4;pointer-events:none;transition:color var(--t),background-color var(--t)}
.graph-sphere__hint[data-flash=true]{background:var(--sphere-glass);color:var(--sphere-ink)}
.graph-sphere__empty{position:absolute;bottom:44px;left:50%;max-width:calc(100% - 32px);margin:0;padding:8px 14px;border:1px solid var(--sphere-line);border-radius:999px;background:var(--sphere-glass);color:var(--sphere-soft);font-size:12.5px;text-align:center;transform:translateX(-50%)}

/* Status dots: the dark ring keeps the pale stage colours legible on the light panel. */
.graph-sphere__dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 2px #0d1d20}
.graph-sphere__dot[data-hollow]{background:#0d1d20;box-shadow:inset 0 0 0 2px var(--dot),0 0 0 2px #0d1d20}
.graph-sphere__legend .graph-sphere__dot{box-shadow:0 0 6px var(--dot)}
.graph-sphere__legend .graph-sphere__dot[data-hollow]{background:transparent;box-shadow:inset 0 0 0 1.5px var(--dot)}

/* Side panel: the accessible way through the graph. */
.graph-sphere__panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;border-left:1px solid var(--line);background:var(--surface);overscroll-behavior:contain;scrollbar-width:thin}
.graph-sphere__head{position:sticky;top:0;z-index:1;display:grid;gap:3px;padding:14px 16px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.graph-sphere__eyebrow{color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.graph-sphere__counts{color:var(--ink);font-size:13.5px;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.graph-sphere__summary{color:var(--muted);font-size:12.5px;line-height:1.5}
.graph-sphere__body{flex:1;padding:8px 8px 4px}
.graph-sphere__group{padding:6px 0 4px}
.graph-sphere .graph-sphere__group h4{display:flex;align-items:center;gap:8px;margin:4px 8px 4px;color:var(--ink-2);font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:0;font-variant-numeric:lining-nums tabular-nums}
.graph-sphere__group h4 span{padding:0 6px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-size:11px;font-weight:600;line-height:1.6}
.graph-sphere .graph-sphere__body ul{display:grid;gap:1px;margin:0;padding:0;font-size:13px;line-height:1.45;list-style:none}
.graph-sphere__body li{margin:0}
.graph-sphere__item,.graph-sphere__relation{display:flex;align-items:flex-start;gap:10px;width:100%;padding:8px 9px;border:0;border-radius:var(--radius);background:transparent;color:var(--ink);font-size:13px;line-height:1.45;text-align:left;transition:background-color var(--t-fast)}
.graph-sphere__item:hover,.graph-sphere__relation:hover{background:var(--green-wash)}
.graph-sphere__item .graph-sphere__dot{margin-top:5px}
.graph-sphere__relation svg.graph-sphere__line{margin-top:6px!important}
.graph-sphere__item-body{display:grid;gap:2px;min-width:0}
.graph-sphere__item-title{display:-webkit-box;overflow:hidden;color:var(--ink);font-weight:500;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.graph-sphere__item-meta{overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.graph-sphere__body>.graph-sphere__back{margin:6px 8px 10px}
.graph-sphere__back{display:inline-flex;align-items:center;gap:6px;padding:4px 6px;border:0;border-radius:var(--radius);background:transparent;color:var(--green);font-size:12.5px;font-weight:600;transition:background-color var(--t-fast)}
.graph-sphere__back:hover{background:var(--green-wash)}
.graph-sphere__status{display:flex;align-items:center;gap:8px;margin:0 10px 6px;color:var(--ink-2);font-size:12px;font-weight:600}
.graph-sphere .graph-sphere__detail-title{margin:0 10px 12px;color:var(--ink);font-family:var(--font-display);font-size:15.5px;font-weight:600;line-height:1.4;letter-spacing:-.005em;overflow-wrap:anywhere}
.graph-sphere__detail-title:focus{outline:none}
.graph-sphere__detail-title:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.graph-sphere__meta{display:grid;gap:8px;margin:0 10px 14px;padding:12px;border-radius:var(--radius);background:var(--surface-2)}
.graph-sphere__meta>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px}
.graph-sphere__meta dt{color:var(--muted);font-size:12px}
.graph-sphere__meta dd{margin:0;color:var(--ink-2);font-size:12.5px;overflow-wrap:anywhere}
.graph-sphere__action{display:inline-flex;align-items:center;gap:8px;margin:0 10px 16px;padding:8px 14px;min-height:34px;border:0;border-radius:var(--radius);background:var(--green);color:var(--on-accent);font-size:13px;font-weight:600;transition:background-color var(--t-fast),transform var(--t-fast)}
.graph-sphere__action:hover{background:var(--green-strong)}
.graph-sphere__action:active{transform:scale(.97)}
.graph-sphere__relations{margin:0 0 6px;padding:12px 0 0;border-top:1px solid var(--line)}
.graph-sphere .graph-sphere__relations h5{display:flex;align-items:center;gap:8px;margin:0 10px 6px;color:var(--ink-2);font-size:12px;font-weight:600}
.graph-sphere__relations h5 span{padding:0 6px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-size:11px;line-height:1.6}
.graph-sphere__faint{margin:0 10px;color:var(--muted);font-size:12.5px;line-height:1.5}
.graph-sphere__limitation{margin:0;padding:10px 16px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px;line-height:1.5}

/* Stacks when the viewport or the host column is narrow (the source drawer can squeeze the content column). */
[data-graph-sphere-host],.discovery-paper-sphere{container-type:inline-size}
.discovery-paper-sphere{margin:4px 0 12px}
@container (max-width:760px){
  .graph-sphere{grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(340px,58vh,460px) auto;height:auto}
  .graph-sphere-loading{min-height:clamp(340px,58vh,460px)}
  .graph-sphere__stage:focus-visible{border-radius:var(--radius-card) var(--radius-card) 0 0}
  .graph-sphere__panel{max-height:440px;border-top:1px solid var(--line);border-left:0}
}
@media (max-width:860px){
  .graph-sphere{grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(340px,58vh,460px) auto;height:auto}
  .graph-sphere-loading{min-height:clamp(340px,58vh,460px)}
  .graph-sphere__stage:focus-visible{border-radius:var(--radius-card) var(--radius-card) 0 0}
  .graph-sphere__panel{max-height:440px;border-top:1px solid var(--line);border-left:0}
}
@media (max-width:600px){
  .graph-sphere__legend{top:8px;left:8px;font-size:11.5px}
  .graph-sphere__controls{top:8px;right:8px}
  .graph-sphere__hint{display:none}
  .graph-sphere__meta>div{grid-template-columns:88px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .graph-sphere{animation:none}
  .graph-sphere__tooltip,.graph-sphere__hint,.graph-sphere-toggle button{transition:none}
}