/* The studies: the words and the list of them on the left, the plate on the right (mirrored on a
   page read right to left), or under the
   words on a narrow screen. The stage paints nothing of its own; the plate is the page's .plate,
   one step up from the ground, and js/sun.js sizes it and paints the plan and the studies on the
   canvas inside it. */
.study-plate { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; overflow: hidden; }
.studies-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The plate's hairline is laid over the canvas as well as under it, so a line of the plan running
   to the edge does not cover the rim. */
.study-plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hair); pointer-events: none; }

.studies-copy {
  position: relative; z-index: 2; height: 100%; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 26px);
}
/* Each sized to its own words, so the script can lay the plate up to where the words end. The
   headline and the sentence break where the markup breaks them, so neither runs wider than it must
   and the plate keeps the room. */
.studies-copy h2, .studies-copy .say, .study-index { width: fit-content; }
.studies-copy .say { white-space: nowrap; }

/* The list of the studies the app runs on a plan, in its order. The four played here are ways to
   their studies, each a stop on the rail the mark runs down as the view moves, the one on the plate
   lit; the others are only named, lighter and in the page's faintest grey, and take neither the pointer nor the
   keyboard. Dimming them further was tried, and fell under a legible contrast for small text; in
   grey alone the two kinds of name read as one list, so the stops and the weight tell them apart. */
.study-index { position: relative; margin-top: clamp(0px, 1.2vh, 10px); pointer-events: auto; }
.study-list { list-style: none; margin: 0; padding: 0; padding-inline-start: 18px; border-inline-start: 1px solid var(--hair-2); }
.study-list button, .study-list .off {
  display: flex; align-items: center; height: clamp(22px, 2.95vh, 27px); font: 500 clamp(14px, min(1.25vw, 2.3vh), 16.5px)/1 var(--sans);
  letter-spacing: -0.01em; white-space: nowrap;
}
.study-list button { color: var(--fg-2); transition: color 0.3s; }
.study-list button:hover, .study-list button.on { color: var(--fg); }
.study-list .off { color: var(--fg-3); font-weight: 400; cursor: default; }
.study-list li { position: relative; }
.study-list li:has(button)::before {
  content: ""; position: absolute; inset-inline-start: -21px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--fg-3); pointer-events: none; transition: background 0.3s;
}
.study-list li:has(button.on)::before { background: var(--fg); }
.sl-thumb { position: absolute; inset-inline-start: -0.5px; top: 0; width: 2px; height: 24px; border-radius: 1px; background: var(--fg); pointer-events: none; }

/* The figure, lettered under the plate the way a drawing letters a view's title; for the sun, the
   time with the app's sky dial beside it. The script sets where it stands and when it shows. */
.study-read {
  position: absolute; z-index: 2; left: 0; top: 0; margin: 0; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
}
.study-read b { color: var(--fg); font-variant-numeric: tabular-nums; }
.study-read .clause { white-space: nowrap; }
.sun-dial { flex: none; overflow: visible; }
/* The dial wears the app's own inks for it on the night ground, set by the script from the export;
   the page's greys stand in until they arrive. */
.sun-dial .horizon { fill: none; stroke: var(--dial-ring, var(--fg-3)); stroke-width: 1; }
.sun-dial .day { fill: none; stroke: var(--dial-path, var(--fg-2)); stroke-width: 1.25; stroke-linejoin: round; }
.sun-dial text { font: 500 11px/1 var(--mono); fill: var(--dial-label, var(--fg-2)); text-anchor: middle; dominant-baseline: central; }
.sun-dial .sun { fill: var(--fg); }

/* The nav's links land a section 72px short of its top (base.css's scroll-padding-top), which for a
   pinned scene is short of its pin: the plate stood half arrived with its foot cut off. The nav
   tucks away on the way down, so the scene is let land on its pin. */
#studies { scroll-margin-top: -72px; }

/* A short window keeps the headline and the list and lets the sentence go: the list says it. */
@media (min-width: 901px) and (max-height: 620px) {
  .studies-copy .say { display: none; }
}
/* On a narrow screen the words stand over the plate, and the list is the four played names in a
   row, the lit one in full ink; the ones only named would wrap into a paragraph of grey. */
@media (max-width: 900px) {
  .studies-copy { justify-content: flex-start; padding-top: 88px; gap: 14px; }
  .studies-copy .say { white-space: normal; }
  .study-index { width: auto; margin-top: 0; }
  .study-list { display: flex; flex-wrap: wrap; gap: 2px 18px; padding: 0; border: 0; }
  .study-list li:has(.off) { display: none; }
  .study-list li::before { display: none; }
  .study-list button { height: 28px; font-size: 15px; }
  .study-read { white-space: normal; }
  .sl-thumb { display: none; }
}