/* The Subjects Sphere — src/subjects-sphere.njk.
   Loaded on that page only, on top of vendor-pannellum.css. The vendor sheet
   dresses the viewer's own furniture (the load bar, the zoom and fullscreen
   controls); everything here is the school's.

   Two pages in one file. Without body.sphere-live — no JavaScript, no WebGL,
   or the phone layout (under 1024px, or a tablet; assets/js/layout.js) —
   this is an ordinary interior page: a heading, a
   line of explanation and the eighteen subjects. sphere.js adds that class
   only when it has actually built the viewer, and takes it off again if the
   viewer reports an error, so the list is what every failure falls back to. */

/* Not live: an ordinary page, and the way back is the button at its foot. */
.sphere-stage,
.sphere-close { display: none; }
.sphere-aside-heading { margin-top: var(--sp-8); }
.sphere-aside-note { max-width: var(--measure); margin: var(--sp-4) 0 var(--sp-8); }
.sphere-aside-back { margin-top: var(--sp-8); }

@media (min-width: 1024px) and (hover: hover), (min-width: 1024px) and (pointer: fine), (min-width: 1024px) and (pointer: none), (min-width: 1401px) {
  /* The viewer takes the window beside the rail. page.css gives main a prose
     column and a top and bottom inset; a panorama wants neither, and #main
     carries an id, so this has to as well to outrank it. */
  body.sphere-live main#main.sphere-screen {
    display: grid;
    /* One row. The heading and the subject list are both out of flow when the
       viewer is live, so the stage is the only thing left to fill. */
    grid-template-rows: minmax(0, 1fr);
    height: 100svh;
    max-width: none;
    padding: 0;
    margin-inline: 0;
    overflow: hidden;
  }

  /* The panorama is the page, so the heading is read rather than seen — the
     photograph names itself, and a title bar across the top of it was a strip
     of the view spent on saying so. */
  body.sphere-live .sphere-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* The only furniture left on the view. Solid navy and square: it sits over
     whatever the photograph is doing underneath it, and the site has no pill
     shapes. */
  body.sphere-live .sphere-close {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--bms-blue-900);
    color: var(--paper);
    --focus-ring: var(--paper);
  }
  .sphere-close svg { width: 22px; height: 22px; }
  body.sphere-live .sphere-close:hover { background: var(--bms-blue-700); }

  body.sphere-live .sphere-stage {
    display: block;
    position: relative;
    background: var(--bms-blue-900);
  }
  .sphere-mount { width: 100%; height: 100%; }

  /* Still read out, still reachable by keyboard, just not drawn: on a screen
     where the panorama works, the labels are the list. */
  body.sphere-live .sphere-aside {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ── Labels ───────────────────────────────────────────
   The hotspot itself is a point with no size; the callout hangs off it, and
   the leader line drops from the label to the thing being named. */
.pnlm-hotspot-base.sphere-hotspot {
  width: 0;
  height: 0;
  cursor: default;
}
.sphere-callout {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  transform: translateX(-50%);
  /* The container is one big drag surface. Only the label takes the pointer
     back, and only when it is a link. */
  pointer-events: none;
}
.sphere-label {
  display: block;
  max-width: 12rem;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  /* Solid, not translucent: this is a label over a photograph, and white on
     the navy is 15:1 whatever happens to be behind it. */
  background: var(--bms-blue-900);
  color: var(--paper);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
a.sphere-label { pointer-events: auto; }
a.sphere-label:hover,
a.sphere-label:focus-visible {
  background: var(--bms-blue-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.sphere-line {
  display: block;
  width: 2px;
  height: var(--sphere-line, 48px);
  background: var(--paper);
}
/* The foot of the line, sitting on the point the label names. */
.sphere-line::after {
  display: block;
  width: 8px;
  height: 8px;
  margin-left: -3px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--bms-blue-900);
  content: "";
}