/* The Network Atlas (network-atlas.html): the chord ring of brain states,
   its reading and its key. The page's scans are the Region Atlas's own
   (viewer.css, atlas-views.css). */

.net-source{
  font-family:var(--font-serif); font-style:italic; font-size:.85rem;
  color:var(--ink-60); margin:.8rem 0 0;
}
.net-source[hidden]{ display:none; }

/* the key */
.key-list{ display:flex; flex-direction:column; gap:.45rem; }
.key-list span{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-brand); font-size:.55rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60);
}
.key{ display:inline-block; width:28px; height:3px; flex:none; }
.key.grad{ background:linear-gradient(90deg,#4FD07A,#4A9BE8); }
.key.quiet{ height:0; border-top:2px dashed var(--quiet, #8A8A8A); }
.key.dot{ width:10px; height:10px; border-radius:50%; background:var(--ink-35); }
.key.hollow{ width:10px; height:10px; border-radius:50%;
  background:var(--paper); border:1.7px solid var(--ink-35); }
.key.solidarc{ height:5px; background:var(--ink-35); }
.key.dasharc{ height:5px; background:repeating-linear-gradient(
  90deg, var(--ink-35) 0 5px, transparent 5px 10px); }

/* the reading panel */
.panel-kicker{
  font-family:var(--font-brand); font-weight:500; font-size:.55rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-60);
}
.panel-title{ font-family:var(--font-display); font-size:1.15rem; line-height:1.15; margin:.25rem 0 .35rem; }
.where{
  border-top:1px solid var(--ink-35); margin-top:.7rem; padding-top:.6rem;
  font-size:.86rem; color:var(--ink-60);
}
.where[hidden]{ display:none; }
.where b{
  display:block; font-family:var(--font-brand); font-weight:500;
  font-size:.55rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-60); margin-bottom:.25rem;
}
.fit{
  display:inline-block; font-family:var(--font-brand); font-size:.52rem;
  letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--ink-35); padding:.12rem .38rem; margin-left:.4rem;
  vertical-align:.08em; color:var(--ink-60);
}
.fit.exact{ border-color:var(--ink); color:var(--ink); }

/* ── the ring ────────────────────────────────────────────────────────── */
/* the ring stands in the sheet the bar's Network button raises (since
   v11.94); network-atlas.html sizes it to the sheet */
.ring-stage{ display:flex; align-items:center; justify-content:center; }
#ring{ width:100%; height:auto; margin:0 auto; }
.regionarc{ fill:none; stroke-width:11; stroke-linecap:butt; cursor:pointer; }
.regionarc.nomap{ stroke-dasharray:7 6; }
/* the small bare ring in the drawer (v12.6): drawn at half the size, so its
   arcs are thicker to stay a finger's target, and its dots answer too */
.bare .regionarc{ stroke-width:20; }
.bare .nodedot{ pointer-events:auto; cursor:pointer; }
/* the group names are buttons too: one picks the whole network */
.grouplabel{
  font-family:var(--font-brand); font-size:9.5px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; fill:var(--ink-35);
  cursor:pointer; transition:fill .25s ease, opacity .25s ease;
}
@media (hover: hover){ .grouplabel:hover{ fill:var(--ink); } }
.grouplabel.lit-group{ fill:var(--ink); }
.grouplabel.dim-group{ opacity:.4; }
.chord{ fill:none; stroke-linecap:butt; transition:opacity .25s ease; }
.chord.quiet{ stroke:var(--quiet, #8A8A8A); }
.nodedot{ stroke-width:1.8; pointer-events:none; }
.nodelabel{
  font-family:var(--font-brand); font-size:11.5px; font-weight:500;
  letter-spacing:.12em; cursor:pointer; transition:fill .25s ease;
}
.dim{ opacity:.07 !important; }
.lit{ opacity:1 !important; }
.dimarc{ opacity:.16; }
/* the ring scales with its column, so the lettering grows back */
@media (max-width:1100px){
  .nodelabel{ font-size:13px; }
  .grouplabel{ font-size:10.5px; letter-spacing:.2em; }
}
@media (max-width:760px){
  .nodelabel{ font-size:17px; letter-spacing:.08em; }
  .grouplabel{ font-size:13px; letter-spacing:.16em; }
}

@media (prefers-reduced-motion: reduce){
  .chord, .grouplabel, .nodelabel{ transition:none; }
}