/* ==========================================================================
   Cognitive Disorder Atlas
   A ring of disorders grouped into domain arcs, with the brain at the centre.
   Below 1100px the ring is replaced by domain columns: 168 radial labels
   cannot be read on a phone, and shrinking them further helps nobody.
   ========================================================================== */

/* A fixed height, not a minimum. With min-height the detail column's content
   grew the shared grid row instead of scrolling inside it, and a disorder with
   seven region cards pushed the brain below the fold. */
.cog {
  display: grid;
  grid-template-columns: minmax(200px, 232px) minmax(0, 1fr) minmax(260px, 330px);
  gap: 0;
  height: calc(100vh - var(--header-h));
  min-height: 560px;
  border-top: 1px solid var(--color-divider);
}

.cog-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;      /* so cog-col-body is what scrolls, not the row */
}

.cog-col-filters { border-right: 1px solid var(--color-divider); }
.cog-col-detail  { border-left: 1px solid var(--color-divider); }

.cog-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}

.cog-col-head h2,
.cog-col-head h3 {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cog-col-head .count {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.cog-col-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4) var(--space-6);
}

/* --- Filters --------------------------------------------------------------- */

.cog-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.cog-search .input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-text);
}

.cog-filter-group { margin-bottom: var(--space-6); }

.cog-filter-group h6 {
  margin-bottom: var(--space-2);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.cog-domain {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.cog-domain:hover { background: var(--color-surface); }

.cog-domain .swatch {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 2px;
  background: var(--dc, var(--color-accent));
  transition: opacity var(--dur-fast) var(--ease);
}

.cog-domain .nm { flex: 1; min-width: 0; }

.cog-domain .n {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.cog-domain[aria-pressed="false"] { opacity: 0.4; }
.cog-domain[aria-pressed="false"] .swatch { opacity: 0.25; }

/* Evidence tier chips */

.cog-tiers { display: flex; flex-wrap: wrap; gap: 5px; }

.cog-tier {
  padding: 3px 8px;
  border: 1px solid var(--color-divider);
  background: transparent;
  font-size: 0.7rem;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.cog-tier[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.cog-tier[aria-pressed="false"] { opacity: 0.45; }

.cog-note {
  margin-top: var(--space-3);
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: left;
  hyphens: manual;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* --- The wheel ------------------------------------------------------------- */

.cog-stage {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 640px;
  padding: var(--space-4);
}

/* One square box holds both the ring and the brain, so the brain's percentage
   width resolves against the same length the SVG viewBox is scaled by. Sizing
   the brain against the column instead made the disc wider than the tick ring. */
.cog-ring {
  position: relative;
  width: min(100%, 80vh);
  aspect-ratio: 1;
}

.cog-wheel {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cog-wheel text { cursor: pointer; }

/* Disorder labels. Kept at a fixed small size rather than scaled to fit:
   168 of them at 2.1 degrees apart is legible, and shrinking further to
   squeeze in more would not be. */
.cog-label {
  font-family: var(--font-body);
  font-size: 9.2px;
  fill: color-mix(in srgb, var(--color-text) 78%, transparent);
  transition: fill var(--dur-fast) var(--ease);
}

.cog-tick { transition: opacity var(--dur-fast) var(--ease); }

.cog-item.is-dim .cog-label { fill: color-mix(in srgb, var(--color-text) 18%, transparent); }
.cog-item.is-dim .cog-tick  { opacity: 0.18; }

.cog-item:hover .cog-label,
.cog-item.is-active .cog-label {
  fill: var(--color-text);
  font-weight: 600;
}

.cog-item.is-active .cog-tick { r: 3.6; }

/* Domain arc band and its caption */

.cog-arc { transition: opacity var(--dur-fast) var(--ease); }
.cog-arc.is-dim { opacity: 0.2; }

.cog-arc-label {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: color-mix(in srgb, var(--color-text) 62%, transparent);
}

/* Curve drawn from the selected disorder in towards the brain */
.cog-link {
  fill: none;
  stroke-width: 1.4;
  opacity: 0.85;
}

/* The brain sits in the hole at the centre of the ring. 33% matches the 165
   unit radius the wheel geometry reserves for it in a 1000 unit viewBox.
   No disc, no frame, no shadow: the canvas is transparent so what the reader
   sees is a brain turning in the middle of the ring, not a brain in a hole. */
/* A WebGL canvas cleared to alpha zero still composites as black here, and a
   square canvas puts its corners outside the ring hole whatever its width. So
   the canvas is clipped to a circle and cleared to the page colour instead:
   no frame, no seam, and no reliance on alpha compositing. */
.cog-brain {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* The ring hole has a radius of 19.6% of the wheel; 36% fills it with a
     little clearance rather than leaving the brain adrift in the middle. */
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg);
  /* The canvas clear colour and --color-bg are nominally identical, but the
     rounding through WebGL leaves a faint disc edge. Feathering the boundary
     hides it without depending on the two matching exactly. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 88%, transparent 97%);
  mask-image: radial-gradient(circle at 50% 50%, #000 88%, transparent 97%);
}

.cog-brain canvas { width: 100%; height: 100%; display: block; }

.cog-brain-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  background: var(--color-bg);
}

/* An author display rule beats the hidden attribute's UA display:none, so the
   loading text stayed painted over the brain until this was added. */
.cog-brain-msg[hidden] { display: none; }

/* --- Idle tour -------------------------------------------------------------
   Before anything is selected the brain turns on its own and walks region by
   region through the domains. Each step lights one region and, with it, every
   disorder anywhere on the ring that implicates that region — which is the
   convergence the ring exists to show. */

.cog-item.tour-lit .cog-label { fill: var(--color-text); font-weight: 600; }
.cog-item.tour-lit .cog-tick  { r: 3.4; }

.cog-item.tour-off .cog-label { fill: color-mix(in srgb, var(--color-text) 22%, transparent); }
.cog-item.tour-off .cog-tick  { opacity: 0.22; }

.cog-item .cog-label,
.cog-item .cog-tick { transition: fill var(--dur) var(--ease), opacity var(--dur) var(--ease); }

/* Caption naming the region currently lit, under the brain */
/* Anchored to the stage, below the wheel. The ring is a fixed square and its
   labels reach the bottom edge, so there is no room for this inside it. */
.cog-tour-caption {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  width: min(46ch, 60%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.cog-tour-caption.is-on { opacity: 1; }

.cog-tour-caption .region {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--tc, var(--color-accent));
}

.cog-tour-caption .n {
  margin-top: 2px;
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .cog-item .cog-label,
  .cog-item .cog-tick { transition: none; }
}

/* Opacity controls, shown only while a disorder is selected. Any fixed pair
   of values suits some disorders and not others — a cortical region wants a
   faint cortex, a thalamic one wants the other deep structures out of the way
   — so the reader sets them rather than me guessing. */

.cog-opacity {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 2;
  display: none;
  gap: 4px;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(6px);
}

.cog.is-focus .cog-opacity { display: flex; }

.cog-opacity .row {
  display: grid;
  grid-template-columns: 8.5em 120px 3em;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.68rem;
}

.cog-opacity label { color: color-mix(in srgb, var(--color-text) 62%, transparent); }

.cog-opacity output {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.cog-opacity input[type="range"] {
  width: 100%;
  height: 2px;
  margin: 0;
  accent-color: var(--color-accent);
}

@media (max-width: 900px) {
  .cog-opacity { position: static; margin: var(--space-4) auto 0; width: max-content; }
}

.cog-stage-hint {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  max-width: 30ch;
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: left;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

/* --- Focus mode -------------------------------------------------------------
   Selecting a disorder pushes the ring back and brings the brain forward. The
   ring stays faintly visible rather than being removed, so it is obvious what
   you are returning to. */

/* Selecting a disorder hands the stage over to the brain: the ring goes, and
   the viewer comes up to roughly the size it has on the brain atlas page.
   This is only safe because .cog has a fixed height — with a min-height the
   region cards grew the grid row and pushed the brain below the fold. */
.cog.is-focus .cog-wheel {
  opacity: 0;
  pointer-events: none;
}

.cog.is-focus .cog-tour-caption { opacity: 0; }

.cog.is-focus .cog-brain { width: 92%; }

.cog-wheel { transition: opacity var(--dur-slow) var(--ease); }
.cog-brain { transition: width var(--dur-slow) var(--ease); }

/* Drag to rotate, wheel to zoom. Without this the canvas swallows page
   scrolling on the way past. */
.cog-brain { touch-action: none; }
.cog-brain canvas { cursor: grab; }
.cog-brain canvas:active { cursor: grabbing; }

.cog-focus-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  display: none;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}

.cog.is-focus .cog-focus-close { display: grid; }
.cog-focus-close:hover { border-color: var(--color-accent); }

.cog.is-focus .cog-stage-hint { opacity: 0; }
.cog-stage-hint { transition: opacity var(--dur) var(--ease); }

/* Region table shown while focused */

.cog-table {
  width: 100%;
  margin-top: var(--space-2);
  border-collapse: collapse;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.cog-table th {
  padding: 3px 5px 4px 0;
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  white-space: nowrap;
}

.cog-table td {
  padding: 5px 5px 5px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 55%, transparent);
  vertical-align: top;
  text-align: left;
  hyphens: manual;
}

.cog-table .sw {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: baseline;
}

.cog-table tr { opacity: 0; animation: cog-row-in var(--dur) var(--ease) forwards; }

@keyframes cog-row-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* A centroid can fall outside a C-shaped structure. Where it does, the number
   is still correct but it does not point at the structure, so it is marked. */
.cog-table .outside {
  color: var(--color-highlight);
  cursor: help;
}

/* One card per region: coordinates, what the parcellation says it is, and the
   other disorders that land on the same tissue. */

.cog-rhead {
  margin: var(--space-6) 0 var(--space-2);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.cog-rcard {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--rc, var(--color-accent));
  background: color-mix(in srgb, var(--rc, var(--color-accent)) 4%, transparent);
  opacity: 0;
  animation: cog-row-in var(--dur) var(--ease) forwards;
}

.cog-rcard-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}

.cog-rcard-head .sw {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 2px;
  background: var(--rc, var(--color-accent));
}

.cog-rcard-head .nm {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 0.95rem;
  line-height: 1.15;
}

.cog-rcard-meta {
  margin-bottom: var(--space-2);
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.cog-rcard-desc {
  margin: var(--space-2) 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: left;
  hyphens: manual;
}

.cog-xref {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--color-divider) 60%, transparent);
}

.cog-xref-head {
  margin-bottom: 5px;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.cog-xref-list { display: flex; flex-wrap: wrap; gap: 4px; }

.cog-xref-item {
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--dc, var(--color-accent)) 45%, transparent);
  background: transparent;
  font-size: 0.66rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.cog-xref-item:hover {
  border-color: var(--dc, var(--color-accent));
  background: color-mix(in srgb, var(--dc, var(--color-accent)) 14%, transparent);
}

.cog-space-note {
  margin-top: var(--space-2);
  font-size: 0.66rem;
  line-height: 1.5;
  text-align: left;
  hyphens: manual;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .cog-brain, .cog-wheel { transition: none; }
  .cog-table tr { opacity: 1; animation: none; }
}

/* --- Detail panel ---------------------------------------------------------- */

.cog-detail .placeholder {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.cog-detail h4 {
  margin-bottom: var(--space-1);
  font-size: 1.15rem;
  line-height: 1.15;
}

.cog-detail .aka {
  margin-bottom: var(--space-3);
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.cog-experience {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-3);
  border-left: 2px solid var(--dc, var(--color-accent));
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
  hyphens: manual;
}

.cog-detail dl { margin: 0 0 var(--space-4); font-size: 0.75rem; }

.cog-detail dt {
  margin-top: var(--space-2);
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.cog-detail dd { margin: 2px 0 0; text-align: left; hyphens: manual; }

.cog-detail p { font-size: 0.78rem; }

.cog-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--space-3); }

.cog-badge {
  padding: 2px 7px;
  border: 1px solid var(--color-divider);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cog-badge.ev-established { border-color: #3f8f6a; color: #2f6b4f; }
.cog-badge.ev-supported   { border-color: #9a8a3f; color: #6f6329; }
.cog-badge.ev-limited     { border-color: var(--color-highlight); color: var(--color-highlight); }

.cog-regions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.cog-region {
  padding: 2px 7px;
  border: 1px solid var(--dc, var(--color-accent));
  background: color-mix(in srgb, var(--dc, var(--color-accent)) 10%, transparent);
  font-size: 0.68rem;
}

.cog-unmapped {
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-highlight);
  background: var(--color-bg);
  font-size: 0.72rem;
  line-height: 1.55;
  text-align: left;
  hyphens: manual;
}

.cog-ref {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: left;
  hyphens: manual;
}

/* --- Column fallback ------------------------------------------------------- */

.cog-columns { display: none; }

.cog-col-group { break-inside: avoid; margin-bottom: var(--space-6); }

.cog-col-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-2);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--dc, var(--color-accent));
  font-size: 1rem;
}

.cog-col-list { display: flex; flex-direction: column; gap: 1px; }

.cog-col-list button {
  padding: 5px 7px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 0.8rem;
  cursor: pointer;
}

.cog-col-list button:hover,
.cog-col-list button.is-active { background: var(--color-surface); }

@media (max-width: 1180px) {
  .cog { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); }
  .cog-col-filters { display: none; }
}

@media (max-width: 900px) {
  /* Stacked, the columns are read one after another, so the page scrolls
     rather than each column scrolling inside a fixed viewport height. */
  .cog { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .cog-col { overflow: visible; }
  .cog-col-body { overflow-y: visible; }
  .cog-col-detail { border-left: 0; border-top: 1px solid var(--color-divider); }

  .cog-stage { min-height: 0; padding: 0; background: none; }
  .cog-wheel { display: none; }

  /* Without the wheel the square container would just be an empty hole. */
  .cog-ring { width: auto; aspect-ratio: auto; }

  /* The brain leaves the centre of the ring and becomes a normal block. */
  .cog-brain {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(320px, 74vw);
    margin: var(--space-6) auto;
  }

  .cog-stage-hint { position: static; max-width: none; padding: 0 var(--space-4) var(--space-4); }

  .cog-columns {
    display: block;
    column-width: 17rem;
    column-gap: var(--space-8);
    padding: var(--space-4) var(--space-4) var(--space-8);
  }
}