/* ============================================================================
   /inside-a-session — the product, photographed and taken apart.

   THE HERO IS A PHOTOGRAPH WITH A LEGEND, not a mockup with floating labels.
   tools/shotproduct.cjs takes the screenshot and measures the box of every element
   the page points at, so the numbered pins land on the real thing at any width. The
   pins are markers and carry no text; the legend under them is an ordinary ordered
   list, so every annotation is readable by a crawler, by a screen reader and by
   anyone whose images did not load.

   That is also why nothing floats ON the screenshot. A label over a UI covers the UI
   it is describing, and at 380px wide it covers most of it.
   ========================================================================== */

.is-sec { background: var(--plate); }
.is-head { max-width: 68ch; margin-bottom: clamp(22px, 3.2vh, 36px); }
.is-head h2 { margin-bottom: 0.5em; }

/* -------------------------------------------------------------- the screenshot */
.is-shot {
  margin: 0; display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  align-items: start;
}
/* Sticky, so the screenshot is still there while the eight legend entries go past it. The
   legend column is the taller of the two by ~400px, and without this the figure left that
   much dead space under a photograph the whole section is about. It also makes the pin-lift
   on hover useful rather than decorative: the thing being pointed at is on screen. */
.is-shot-img { position: relative; position: sticky; top: clamp(12px, 2.4vh, 26px); }
.is-shot img {
  display: block; width: 100%; height: auto;
  border: var(--rule) solid var(--line-2); border-radius: 6px;
  box-shadow: 0 2px 4px rgb(20 20 28 / 0.10), 0 18px 40px rgb(20 20 28 / 0.14);
}
.is-pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.is-pins li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.is-pins span {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* The console is ink, so the pin is paper: the one place on these pages where the
     ivory end of the ramp is the mark rather than the ground. */
  background: var(--fg-inv); color: var(--ink);
  box-shadow: 0 0 0 1px rgb(20 20 28 / 0.5), 0 2px 6px rgb(6 6 10 / 0.5);
}
.is-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(9px, 1.4vh, 14px); }
.is-legend li {
  display: grid; grid-template-columns: 1.8em minmax(0, 1fr); gap: 0.7em;
  align-items: baseline; padding-top: 0.62em; border-top: var(--rule) solid var(--line);
}
/* Hovering a legend row lifts its pin and quiets the rest — act 6's own device, for the
   same reason: eight leaders are hard to read one at a time. Enhancement only, and the
   numbering already pairs them for a reader who never moves a mouse. */
.is-legend li:hover, .is-legend li:focus-within { border-top-color: var(--fg); }
.is-lit .is-pins li:not(.is-lit) span { opacity: 0.34; }
.is-pins li { transition: transform 200ms var(--ease); }
.is-pins li.is-lit { transform: translate(-50%, -50%) scale(1.34); z-index: 2; }
.is-pins li.is-lit span { box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px rgb(242 236 224 / 0.34),
  0 3px 10px rgb(6 6 10 / 0.6); }
.is-ln {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: var(--rule) solid var(--line-2); font-size: 0.6rem; color: var(--fg-dim);
}
.is-legend b { display: block; font-weight: 500; }
.is-legend p { color: var(--fg-dim); font-size: 0.89rem; }
.is-shot figcaption {
  grid-column: 1 / -1; padding-top: 0.7em; border-top: var(--rule) solid var(--line-2);
  color: var(--fg-dim); font-size: 0.86rem;
}

/* ----------------------------------------------------------------- the eight parts
   A ruled row per part, with the minute in its own column so the three that carry no
   clock line up under the five that do — which is the point of the section under it. */
.is-hour { list-style: none; margin: clamp(22px, 3vh, 34px) 0 0; padding: 0; display: grid; }
.is-hour li {
  display: grid; gap: 3px clamp(12px, 2vw, 28px); align-items: baseline;
  /* Bounded tracks, not fractions. Each <li> is its OWN grid container, so `0.9fr` and
     `2fr` resolved against that row's own content and the minute column landed at a
     different x in all eight rows — measured 424 to 468px at 1440. A subgrid would be the
     other answer; fixed columns need no fallback. */
  grid-template-columns: minmax(130px, 208px) 5.2em minmax(0, 1fr) 9.5em;
  padding: clamp(11px, 1.5vh, 15px) 0; border-top: var(--rule) solid var(--line);
}
.is-hour li:last-child { border-bottom: var(--rule) solid var(--line); }
.is-hn { display: flex; align-items: baseline; gap: 0.7em; color: var(--fg); font-size: 0.58rem; }
.is-hn .num { color: var(--fg-faint); }
.is-hm { font-family: var(--mono); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.is-hm span { font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint); }
.is-hb { color: var(--fg-dim); font-size: 0.9rem; }
.is-hc { color: var(--fg-dim); font-size: 0.5rem; white-space: nowrap; text-align: right; }

/* --------------------------------------------------------------- where the time goes
   Bars, and the three parts with no clock get a rule instead of a bar. The absence is
   the information, so it is drawn rather than omitted. */
.is-clock { display: grid; gap: 10px; align-content: start; }
.is-clock > .mono { color: var(--fg-faint); margin: 0; }
.is-clock ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.is-clock li {
  display: grid; grid-template-columns: minmax(90px, 0.8fr) minmax(0, 2fr) 4.4em;
  gap: 10px; align-items: center;
}
.is-cl { font-size: 0.84rem; }
.is-cb { display: block; height: 8px; background: var(--line); border-radius: 2px; overflow: hidden; }
.is-cb i { display: block; width: var(--w); height: 100%; background: var(--hue); }
.is-cm { font-size: 0.76rem; color: var(--fg-dim); text-align: right; white-space: nowrap; }
.is-none .is-cl { color: var(--fg-dim); }
/* "no clock" is two words of tracked mono where the other rows hold three characters, so it
   takes the label size rather than the figure size — at 0.76rem it wrapped in a 3.6em cell
   and the three absences read as six lines. */
.is-none .is-cm { color: var(--fg-dim); font-size: 0.5rem; }
.is-none .is-cb { height: 1px; background: var(--line-2); border-radius: 0; }
.is-clock .pg-from { margin-top: 4px; }

/* ------------------------------------------------------------------ the positions */
.is-pgrid {
  display: grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
}
.is-p figcaption { font-size: 0.82rem; }
.is-pt { color: var(--fg-dim); font-family: var(--mono); font-size: 0.5rem;
  letter-spacing: 0.11em; text-transform: uppercase; line-height: 1.7; margin: 0; }
.is-gate {
  display: grid; gap: clamp(16px, 2.4vw, 34px); align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: clamp(26px, 4vh, 44px); padding-top: clamp(18px, 2.6vh, 26px);
  border-top: 2px solid var(--line-2);
}
.is-gate h3 { font-size: 1.1rem; margin-bottom: 0.5em; }
.is-gate p { color: var(--fg-dim); max-width: 72ch; }
.is-gate p + p { margin-top: 0.7em; }

/* -------------------------------------------------------------------- the questions
   Six real questions, numbered, at reading size. They are the longest verbatim block
   on the site and they earn it: every one has more than one defensible answer. */
.is-ask {
  list-style: none; counter-reset: q; margin: 0; padding: 0; display: grid;
}
.is-ask li {
  counter-increment: q; display: grid; grid-template-columns: 2.1em minmax(0, 1fr); gap: 0.8em;
  padding: clamp(11px, 1.6vh, 16px) 0; border-top: var(--rule) solid var(--line);
  font-size: 0.95rem; line-height: 1.5;
}
.is-ask li:last-child { border-bottom: var(--rule) solid var(--line); }
.is-ask li::before {
  content: counter(q, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.6rem; color: var(--fg-faint);
  font-variant-numeric: tabular-nums; padding-top: 0.35em;
}

/* --------------------------------------------------------------------- the activity */
.is-act {
  display: grid; gap: clamp(22px, 3.4vw, 52px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.is-act .prose { margin-top: clamp(14px, 2vh, 18px); }
.is-act .pg-from { margin-top: clamp(14px, 2vh, 18px); }

/* ------------------------------------------------------------------ what goes home */
.is-home {
  display: grid; gap: clamp(12px, 1.6vw, 20px); margin: clamp(20px, 3vh, 30px) 0;
  grid-template-columns: repeat(auto-fit, minmax(246px, 1fr));
}
.is-home .pg-plate { display: grid; gap: 9px; align-content: start; }
.is-home .mono { color: var(--fg-dim); }
.is-home ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.is-home li { font-size: 0.88rem; color: var(--fg-dim); padding-left: 0.9em;
  border-left: var(--rule) solid var(--line-2); }

/* ------------------------------------------------------------------ the prep sheet */
.is-prep {
  display: grid; gap: clamp(20px, 3vw, 44px);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
}
.is-prep img {
  display: block; width: 100%; height: auto;
  border: var(--rule) solid var(--line-2); border-radius: 6px;
  box-shadow: 0 2px 4px rgb(20 20 28 / 0.10), 0 18px 40px rgb(20 20 28 / 0.14);
}
.is-prep > div { display: grid; gap: clamp(14px, 2vh, 18px); }
.is-prep > div > p { color: var(--fg-dim); font-size: 0.93rem; max-width: 52ch; }
.is-prepl {
  list-style: none; counter-reset: s; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.is-prepl li {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--fg-dim); border: var(--rule) solid var(--line); border-radius: 3px;
  padding: 0.32em 0.5em;
}

/* ================================================================== responsive */
@media (max-width: 1080px) {
  .is-shot { grid-template-columns: minmax(0, 1fr); }
  /* At this width the pins are still on the right elements, but a 21px disc over a
     board that is now 300px wide is furniture. The legend is the content, so the pins
     go and the numbers stay in the list. */
  .is-pins { display: none; }
  .is-legend { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); display: grid; }
  .is-prep, .is-act { grid-template-columns: minmax(0, 1fr); }
  .is-gate { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 820px) {
  .is-hour li { grid-template-columns: minmax(0, 1fr) 5em; }
  .is-hb { grid-column: 1 / -1; }
  .is-hc { grid-column: 1 / -1; text-align: left; }
  .is-clock li { grid-template-columns: minmax(80px, 1fr) minmax(0, 1.4fr) 3.4em; }
}
@media print {
  .is-sec { background: transparent; }
  .is-shot, .is-prep { grid-template-columns: minmax(0, 1fr); }
  .is-pins { display: none; }
  .is-shot img, .is-prep img { box-shadow: none; max-height: 12cm; width: auto; }
}