/* The cast map (Home, Instrument look). The world drawn in the grille's own dots: land a step brighter
   than the ground, the cast's countries brighter again, one orange dot per persona. It sits on the
   page ground, not on a plate, so the map reads as the ground itself showing geography.
   The plane is wider than the screen and centred on the cast; a narrow screen shows its middle. */
html[data-look="instrument"] .cast-map { margin: 0; display: grid; gap: 14px; }
html[data-look="instrument"] .cast-map__field { position: relative; height: calc(var(--rows) * var(--pitch)); overflow: hidden; }
/* the world dissolves into the ground at the band's edges instead of being cut */
html[data-look="instrument"] .cast-map__field {
  -webkit-mask: linear-gradient(90deg, transparent, #000 14% 86%, transparent), linear-gradient(transparent, #000 18% 82%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
html[data-look="instrument"] .cast-map__plane {
  position: absolute; top: 0; left: 50%;
  width: calc(var(--cols) * var(--pitch)); height: calc(var(--rows) * var(--pitch));
  transform: translate(calc(var(--cols) * var(--pitch) / -2 + var(--nudge-x, 0px)), var(--nudge-y, 0px));
}
html[data-look="instrument"] .cast-map__land { position: absolute; inset: 0; display: block; }
html[data-look="instrument"] :is(.cast-map__land-dots, .cast-map__home-dots) { fill: none; stroke-linecap: round; }
html[data-look="instrument"] .cast-map__land-dots { stroke: color-mix(in oklch, var(--on-surface) 30%, var(--surface-page)); }
html[data-look="instrument"] .cast-map__home-dots { stroke: color-mix(in oklch, var(--on-surface) 58%, var(--surface-page)); }

/* a persona: a 10px signal dot on its cell, with a ring of ground so neighbours stay separate */
html[data-look="instrument"] .cast-map__persona {
  position: absolute; left: calc((var(--x) + .5) * var(--pitch)); top: calc((var(--y) + .5) * var(--pitch));
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
}
html[data-look="instrument"] .cast-map__persona::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--action-live); box-shadow: 0 0 0 1.5px var(--surface-page);
  transition: transform 160ms var(--ease-out, ease-out);
  animation: cast-map-arrive 520ms var(--ease-out, ease-out) both; animation-delay: calc(240ms + var(--i) * 70ms);
}
html[data-look="instrument"] .cast-map__persona:is(:hover, :focus-visible) { z-index: 2; }
html[data-look="instrument"] .cast-map__persona:is(:hover, :focus-visible)::before { transform: scale(1.5); }
html[data-look="instrument"] .cast-map__persona:focus-visible { outline: 2px solid var(--on-surface); outline-offset: 3px; }
html[data-look="instrument"] .cast-map__tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 4px;
  padding: 6px 10px; white-space: nowrap; pointer-events: none;
  font: 500 12px/1.3 var(--font-sans); color: var(--on-surface-muted);
  background: var(--plate, oklch(0.158 0.004 70)); box-shadow: 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transition: opacity 140ms ease, translate 140ms ease, visibility 140ms;
}
html[data-look="instrument"] .cast-map__tip strong { color: var(--on-surface); font-weight: 600; }
html[data-look="instrument"] .cast-map__persona:is(:hover, :focus-visible) .cast-map__tip { opacity: 1; visibility: visible; translate: -50% 0; }
@keyframes cast-map-arrive { from { opacity: 0; transform: scale(0.2); } }

/* the country, beside its personas */
html[data-look="instrument"] .cast-map__country {
  position: absolute; left: calc((var(--x) + .5) * var(--pitch) + 9px); top: calc((var(--y) + .5) * var(--pitch)); translate: 0 -50%;
  font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--on-surface-muted); pointer-events: none;
  padding: 3px 5px; background: color-mix(in oklch, var(--surface-page) 88%, transparent);
}
html[data-look="instrument"] .cast-map__country--west { left: auto; right: calc((var(--cols) - var(--x) - .5) * var(--pitch) + 9px); }
html[data-look="instrument"] .cast-map__country .num { color: var(--action-live); margin-left: 4px; }

html[data-look="instrument"] .cast-map__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 14px; }
html[data-look="instrument"] .cast-map__title { font: 500 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-faint); }
html[data-look="instrument"] .cast-map__count { color: var(--on-surface); }
html[data-look="instrument"] .cast-map__note { flex-basis: 100%; color: var(--on-surface-faint); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  html[data-look="instrument"] .cast-map__persona::before { animation: none; transition: none; }
}
html:not([data-look="instrument"]) .cast-map { display: none; }

/* A locator (a persona's page): a small window around one dot, its caption naming the place */
html[data-look="instrument"] .cast-map--compact { margin-top: 14px; gap: 8px; max-width: calc(var(--cols) * var(--pitch)); }
html[data-look="instrument"] .cast-map--compact .cast-map__field {
  -webkit-mask: radial-gradient(closest-side, #000 62%, transparent); mask: radial-gradient(closest-side, #000 62%, transparent);
}
html[data-look="instrument"] .cast-map--compact .cast-map__country { display: none; }
html[data-look="instrument"] .cast-map--compact .cast-map__caption { font-size: 13px; }

/* The ground of a panel (a persona's hero): the map fills the panel behind its content, dim, with the
   persona's dot lit right of centre. The panel is a plate, so this map isn't set on the page's grille. */
html[data-look="instrument"] .persona-review > .page-head:has(> .cast-map--ground) { position: relative; isolation: isolate; overflow: hidden; }
/* the page head's owner lays out every child of a head; the ground is the one child that lies under the rest */
html[data-look="instrument"] .main .page-head > .cast-map--ground.cast-map { position: absolute !important; inset: 0 !important; grid-column: 1 / -1 !important; grid-row: 1 / -1 !important; justify-self: stretch !important; align-self: stretch !important; width: auto !important; height: auto !important; max-width: none !important; margin: 0 !important; z-index: -1; display: block; pointer-events: none; }
html[data-look="instrument"] .cast-map--ground .cast-map__field { height: 100%; -webkit-mask: radial-gradient(ellipse 70% 80% at 74% 58%, #000 30%, transparent 78%); mask: radial-gradient(ellipse 70% 80% at 74% 58%, #000 30%, transparent 78%); }
html[data-look="instrument"] .cast-map--ground .cast-map__plane {
  left: calc(74% - (var(--sx) + .5) * var(--pitch)); top: calc(58% - (var(--sy) + .5) * var(--pitch));
  transform: none;
}
html[data-look="instrument"] .cast-map--ground .cast-map__land-dots { stroke: color-mix(in oklch, var(--on-surface) 18%, var(--plate, var(--surface-page))); }
html[data-look="instrument"] .cast-map--ground .cast-map__home-dots { stroke: color-mix(in oklch, var(--on-surface) 34%, var(--plate, var(--surface-page))); }
html[data-look="instrument"] .cast-map--ground .cast-map__persona { pointer-events: none; }
html[data-look="instrument"] .cast-map--ground .cast-map__persona::before { width: 12px; height: 12px; box-shadow: 0 0 0 2px var(--plate, oklch(0.158 0.004 70)), 0 0 18px 2px color-mix(in oklch, var(--action-live) 45%, transparent); }
html[data-look="instrument"] .cast-map--ground .cast-map__country { background: none; color: var(--on-surface-faint); }

/* Under a round table (a group's page): the map is the table's ground, centred on the group's countries,
   which are lit; the seats are the people, so no persona dots or labels are drawn. */
html[data-look="instrument"] .round-table-figure--mapped { position: relative; isolation: isolate; overflow: clip; }
html[data-look="instrument"] .round-table-figure--mapped > .cast-map--ground { position: absolute; inset: 0; z-index: -1; margin: 0; display: block; pointer-events: none; }
html[data-look="instrument"] .round-table-figure--mapped > .cast-map--ground .cast-map__field { -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); }
html[data-look="instrument"] .round-table-figure--mapped > .cast-map--ground .cast-map__plane { left: calc(142px - (var(--sx) + .5) * var(--pitch)); top: calc(50% - 20px - (var(--sy) + .5) * var(--pitch)); }
html[data-look="instrument"] .round-table-figure--compact.round-table-figure--mapped > .cast-map--ground .cast-map__field { -webkit-mask: radial-gradient(240px 200px at 142px 46%, #000 35%, transparent); mask: radial-gradient(240px 200px at 142px 46%, #000 35%, transparent); }
html[data-look="instrument"] .cast-map--quiet :is(.cast-map__persona, .cast-map__country) { display: none; }
html[data-look="instrument"] .cast-map--quiet .cast-map__land-dots { stroke: color-mix(in oklch, var(--on-surface) 12%, var(--surface-page)); }
html[data-look="instrument"] .cast-map--quiet .cast-map__home-dots { stroke: color-mix(in oklch, var(--on-surface) 24%, var(--surface-page)); }