/* ==========================================================================
   emdr-interactive.css — the Emotional Energy Centers of the Body experience
   (/therapy/trauma-emdr/explore/). Loads AFTER site.css and theme.css and is
   SCOPED: every rule targets an .xp-* class (or the .xp-page body), so the
   shared header, footer, breadcrumb, hero band and closing band are untouched.
   Tokens, fonts, buttons, cards, the hero and the section rhythm come from the
   shared sheets; only the experience's own components live here. Mobile first.
   Shipped by SiteMirror to /assets/emdr-interactive/ (Matt, 2026-09-11).
   ========================================================================== */

.xp-page {
  --xp-hover: var(--t-hover-duration, 240ms);
  --xp-ease: var(--motion-easing-standard, cubic-bezier(0.2, 0, 0.2, 1));
  --xp-rule: rgba(41, 74, 82, 0.16);
  /* Diagram window in figure units (the outline is 360 x 880): phones show the person from just above the crown
     (y 23) to just below the fingertips (y 500), wide enough to keep the arms and hands whole; wider screens show
     crown to upper thigh with gutters for the labels. The phone window used to start at the neck (y 140) and run
     100 units of leg past the hands (Matt, 2026-09-24): showing the head reads as a person, not a torso diagram.
     Point spacing depends only on the width of the window, which is unchanged. */
  --xp-vx: 10; --xp-vy: 12; --xp-vw: 340; --xp-vh: 496;
  /* Horizontal clip of the illustration, derived from the window (negative offsets are gutters, so clamp at 0). */
  --xp-clip-l: calc(max(0, var(--xp-vx)) / 360 * 100%);
  --xp-clip-r: calc(max(0, 360 - var(--xp-vx) - var(--xp-vw)) / 360 * 100%);
  --xp-sticky-top: 1rem;
}
/* Normal phones (360px up to the labelled layout): keep the 340-unit marker window and its spacing, but let the
   illustration's horizontal clip reach the full figure width so the outer thumb tips are not cut (the extra ~6 units a
   side sit inside the page gutters). Vertical crop and every point coordinate are unchanged (Codex, 2026-09-12). */
@media (min-width: 22.5rem) and (max-width: 39.999rem) {
  .xp-page { --xp-clip-l: 0%; --xp-clip-r: 0%; }
}

/* Very narrow phones (below 360px): the tighter window keeps the 44px targets from overlapping
   (Codex, 2026-09-12: the 340-unit window measured 39.8px between the closest points at 320px). This crops
   the arm sides on those phones only; head to fingertips as on other phones (Matt, 2026-09-24). */
@media (max-width: 22.4375rem) {
  .xp-page { --xp-vx: 40; --xp-vy: 12; --xp-vw: 280; --xp-vh: 496; }
}
/* Phones whose screen is too short for their width: head to fingertips would push the lowest points below the fold on
   arrival, so these keep the earlier neck-to-fingertips window (y 140-520), where all thirteen fit on screen. Reaching every
   point outranks showing the head (Matt, 2026-09-24). The figure's height grows with the width, so the switch is by shape,
   not a fixed height: the thresholds were measured across 320-639px widths (round-3 review; a fixed 608px cut-off left
   phones 608-692px tall with two or three points off-screen). Declared after the width rules above so it wins. */
@media (min-width: 22.5rem) and (max-width: 26.999rem) and (min-aspect-ratio: 13/20) {
  .xp-page { --xp-vy: 140; --xp-vh: 380; }
}
/* From 27rem the stage has reached its 24rem cap, so the figure no longer grows with the width and a height alone decides. */
@media (min-width: 27rem) and (max-width: 39.999rem) and (max-height: 39.999rem) {
  .xp-page { --xp-vy: 140; --xp-vh: 380; }
}
@media (max-width: 22.4375rem) and (min-aspect-ratio: 5/9) {
  .xp-page { --xp-vy: 140; --xp-vh: 380; }
}
/* Phones arrive at the map (#explore, the invitations and the hero button) without the section's blank top padding in
   view, which gives the figure about 56px more room above the fold. */
@media (max-width: 39.999rem) {
  .xp { scroll-margin-top: -3.5rem; }
}

/* --- Hero additions (the band, rings, eyebrow and H1 are the shared .page-hero) ---------- */
.xp-hero__lead { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem); line-height: 1.42; color: var(--t-blue); max-width: 40ch; margin-top: 1rem; }
.xp-hero__note { margin-top: 0.75rem; max-width: 56ch; font-size: 1rem; }
.xp-hero__action { margin-top: 1.25rem; }
.xp-hero__cta { display: inline-flex; align-items: center; gap: 0.5rem; }
/* The hero's one action is the site's primary button (Matt, 2026-09-24): Dark Sea Glass, white label (4.7:1). */
.xp-hero__cta-arrow { font-size: 1.1em; line-height: 1; }
/* Guard: the label stays white on the Deep Blue hover fill whatever the site sheet's link rules do. theme.css's old
   ".page-hero a:hover/:focus-visible { color: Deep Blue }" (0,2,1) outranked the button's white label (0,2,0) and hid it
   (round-3 fix check, Matt 2026-09-24). Its link hover now skips .button, so this is redundant today; it stays so the
   button holds even if this sheet reaches the server before that theme.css does. */
.xp-page .page-hero a.xp-hero__cta:hover, .xp-page .page-hero a.xp-hero__cta:focus-visible { color: #ffffff; }

.xp-eyebrow { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-seaglass-text); margin: 0 0 0.9rem; }
.xp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Explorer layout ------------------------------------------------------- */
/* Preserve the content's reading width with enlarged text; shared header/footer gutters stay independent. */
.xp-page .page.container { padding-inline: min(var(--gutter), 24px); }
.xp__inner > * + * { margin-top: 2rem; } /* replaces the base sheet's 16px prose rhythm between the two blocks */
.xp__selector > * + * { margin-top: 1.25rem; }
.xp__selector { display: flex; flex-direction: column; }
.xp-page .xp-figure__marks, .xp-page .xp-list__items, .xp-page .xp-start__items, .xp-page .xp-themes, .xp-page .xp-alts { list-style: none; margin: 0; padding: 0; max-width: none; }
.xp-page .xp-figure__marks > li, .xp-page .xp-list__items > li, .xp-page .xp-start__items > li, .xp-page .xp-themes > li, .xp-page .xp-alts > li { margin-top: 0; } /* the base sheet's global li + li rhythm */

/* Figure: an aspect box showing a window of the outline; the marks share the same window maths */
.xp-figure__label { font-size: 1rem; font-weight: 600; color: var(--t-blue); margin: 0 0 0.75rem; text-align: center; }
.xp-figure__stage { position: relative; width: 100%; max-width: 24rem; margin: 0 auto; aspect-ratio: var(--xp-vw) / var(--xp-vh); }
/* The outline is sized so its window fills the stage and clipped to that window with clip-path (not overflow:hidden on the
   stage, which would also clip the focus rings and the phone callouts). Negative window offsets are gutters, so clamp at 0. */
.xp-page .xp-figure__art { position: absolute; max-width: none; left: calc(-1 * var(--xp-vx) / var(--xp-vw) * 100%); top: calc(-1 * var(--xp-vy) / var(--xp-vh) * 100%); width: calc(360 / var(--xp-vw) * 100%); height: calc(880 / var(--xp-vh) * 100%); clip-path: inset(calc(max(0, var(--xp-vy)) / 880 * 100%) var(--xp-clip-r) calc(max(0, 880 - var(--xp-vy) - var(--xp-vh)) / 880 * 100%) var(--xp-clip-l)); }
.xp-figure__marks { position: absolute; inset: 0; }
.xp-figure__marks li { position: absolute; left: calc((var(--x) - var(--xp-vx)) / var(--xp-vw) * 100%); top: calc((var(--y) - var(--xp-vy)) / var(--xp-vh) * 100%); width: 0; height: 0; }
.xp-figure__marks li:has(.xp-mark[aria-current="true"]), .xp-figure__marks li:has(.xp-mark:focus-visible), .xp-figure__marks li:hover { z-index: 2; }

/* A point: 44px target around a 22px dot, painted above its own label (z-index) so no label ever covers its halo or ring.
   The chosen, hover and focus states follow below. */
.xp-page .xp-figure .xp-mark { position: absolute; left: 0; top: 0; width: 44px; height: 44px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; color: var(--t-blue); }
.xp-page .xp-figure .xp-mark:hover, .xp-page .xp-figure .xp-mark:focus-visible, .xp-page .xp-figure .xp-mark:active { color: var(--t-blue); text-decoration: none; }
/* Keyboard focus is a 2px Deep Blue ring hugging the dot (7.4:1 on the figure), not an outline around the 44px target,
   which crossed the label beneath (round-3 review, Matt 2026-09-24). Forced colours restore an outline below. */
.xp-page .xp-figure .xp-mark:focus-visible { outline: none; }
.xp-mark__dot { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--t-seaglass-dark); border: 2px solid #ffffff; box-shadow: 0 0 0 1px rgba(41, 74, 82, 0.28), 0 2px 6px rgba(41, 74, 82, 0.18); display: flex; align-items: center; justify-content: center; transition: transform var(--xp-hover) var(--xp-ease), background-color var(--xp-hover) var(--xp-ease), box-shadow var(--xp-hover) var(--xp-ease); }
/* States (Matt, 2026-09-24): the chosen point is the loudest mark on the map, so hover and focus stay cool and quiet
   (Deep Blue; hover adds a small lift and halo, keyboard focus a ring) while the chosen point turns Dark Terracotta, the
   site's warm mark colour, with a white centre, a lift and a warm halo. Hue is never the only cue: centre, size and halo
   differ too. Against the figure's Pale Sea Glass fill: rest 3.6:1, hover 7.4:1, chosen 4.1:1 (non-text minimum 3:1).
   Focus does not lift, and the chosen lift is 1.15, so the focus ring (radius 13px, 15px when chosen) always clears the
   midline labels, which start 15px from the centre. Pointing at an area's row in the desktop starting column (is-hinted,
   #12) shows its point exactly as hover does, so a focused or chosen point keeps its own look (round-4 review). */
.xp-mark:hover .xp-mark__dot, .xp-mark.is-hinted .xp-mark__dot { background: var(--t-blue); transform: scale(1.1); box-shadow: 0 0 0 1px rgba(41, 74, 82, 0.28), 0 0 0 5px rgba(41, 74, 82, 0.14), 0 2px 6px rgba(41, 74, 82, 0.18); }
.xp-mark:focus-visible .xp-mark__dot { background: var(--t-blue); box-shadow: 0 0 0 2px var(--t-blue), 0 2px 6px rgba(41, 74, 82, 0.18); }
.xp-mark[aria-current="true"] .xp-mark__dot { background: var(--t-terracotta-dark); transform: scale(1.15); box-shadow: 0 0 0 1px rgba(156, 90, 43, 0.45), 0 0 0 6px rgba(156, 90, 43, 0.22), 0 2px 8px rgba(41, 74, 82, 0.22); }
.xp-mark[aria-current="true"]:focus-visible .xp-mark__dot { box-shadow: 0 0 0 2px var(--t-blue), 0 0 0 6px rgba(156, 90, 43, 0.22), 0 2px 8px rgba(41, 74, 82, 0.22); }
.xp-mark[aria-current="true"] .xp-mark__dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ffffff; }
/* Viewed during this visit (#9, Matt 2026-09-25): a white check in the dot (4.7:1 on Dark Sea Glass, 9.6:1 on the Deep
   Blue hover), never on the chosen point, whose white centre says more. The script adds the word to the point's name too. */
.xp-mark.is-viewed:not([aria-current="true"]) .xp-mark__dot::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: translateY(-1px) rotate(-45deg); }
.xp-mark__label { position: absolute; width: max-content; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 0.875rem; font-weight: 600; line-height: 1.2; color: var(--t-blue); white-space: nowrap; pointer-events: none; display: none; }
/* Phones: the label is a callout on the keyboard-focused point only (the chosen point is named by the preview card or the
   open section, and a callout on it covered a neighbouring point on short phones; Matt, 2026-09-24) */
.xp-mark:focus-visible .xp-mark__label { display: block; left: 50%; bottom: calc(100% - 2px); transform: translateX(-50%); background: var(--t-blue); color: #ffffff; padding: 0.35rem 0.6rem; border-radius: var(--t-radius); box-shadow: var(--shadow-low); white-space: normal; text-align: center; max-width: 8.5rem; }
.xp-mark:focus-visible .xp-mark__label::after { content: ""; position: absolute; left: 50%; top: 100%; width: 0; height: 0; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--t-blue); border-bottom: 0; }
.xp-mark--left:focus-visible .xp-mark__label { left: 0; transform: none; }
.xp-mark--left:focus-visible .xp-mark__label::after { left: 22px; }
.xp-mark--right:focus-visible .xp-mark__label { left: auto; right: 0; transform: none; }
.xp-mark--right:focus-visible .xp-mark__label::after { left: auto; right: 16px; transform: none; }
/* Escape hides the callout without moving focus (WCAG 1.4.13; it can cover a neighbouring point); the script clears this on blur. */
@media (max-width: 39.999rem) { .xp-mark.is-callout-dismissed:focus-visible .xp-mark__label { display: none; } }

/* Wider screens: crown-to-thigh window with gutters, every point labelled with a short leader */
@media (min-width: 40rem) {
  .xp-page { --xp-vx: -100; --xp-vy: 0; --xp-vw: 560; --xp-vh: 560; }
  .xp-figure__stage { max-width: 36rem; }
  .xp-mark__label, .xp-mark[aria-current="true"] .xp-mark__label, .xp-mark:focus-visible .xp-mark__label { display: block; background: transparent; color: var(--t-blue); padding: 0; box-shadow: none; border-radius: 0; bottom: auto; transform: none; white-space: normal; }
  .xp-mark__label::after { display: none; }
  .xp-mark--left .xp-mark__label, .xp-mark--left[aria-current="true"] .xp-mark__label, .xp-mark--left:focus-visible .xp-mark__label { left: auto; right: calc(100% + 16px); top: 50%; transform: translateY(-50%); text-align: right; width: max-content; max-width: 7rem; }
  .xp-mark--right .xp-mark__label, .xp-mark--right[aria-current="true"] .xp-mark__label, .xp-mark--right:focus-visible .xp-mark__label { left: calc(100% + 16px); right: auto; top: 50%; transform: translateY(-50%); text-align: left; width: max-content; max-width: 7rem; }
  /* Midline labels sit 4px from their own point (was 5px, and 16px from the centre of the next), so each is clearly
     closer to its point than to the next one, and clear of the dot's focus ring; Old Stuff is labelled above, which
     leaves nothing between its point and Survival's (Matt, 2026-09-24). */
  .xp-mark--inside .xp-mark__label, .xp-mark--inside[aria-current="true"] .xp-mark__label, .xp-mark--inside:focus-visible .xp-mark__label { left: 50%; top: calc(50% + 15px); transform: translateX(-50%); text-align: center; width: max-content; }
  /* Labels above their point sit 2px further out: their underline hangs below the line box, toward the dot, and at 15px
     it met the chosen-and-focused ring (round-3 fix check). */
  .xp-mark--above .xp-mark__label, .xp-mark--above[aria-current="true"] .xp-mark__label, .xp-mark--above:focus-visible .xp-mark__label { left: 50%; top: auto; bottom: calc(50% + 17px); transform: translateX(-50%); text-align: center; width: max-content; }
  /* No outline stroke runs through the words (the crotch line crossed "Survival"; the arm and hand outlines cross the side
     labels). Midline labels sit on the figure, so they carry a box in the figure's own fill, invisible except where it
     hides a line; the point paints above its label, so the box never cuts the halo or the focus ring. Side labels straddle
     the arms, where a box would cut pale rectangles into the figure, so their letters carry a thin cream knockout instead
     (round-3 review, Matt 2026-09-24). .xp-page lifts the box above the reset for chosen and focused labels. */
  .xp-page .xp-mark--inside .xp-mark__label, .xp-page .xp-mark--above .xp-mark__label { background: var(--t-seaglass-tint); padding: 0 3px; border-radius: 3px; }
  .xp-mark--left .xp-mark__label, .xp-mark--right .xp-mark__label { text-shadow: 1px 0 0 var(--t-cream), -1px 0 0 var(--t-cream), 0 1px 0 var(--t-cream), 0 -1px 0 var(--t-cream), 0 0 2px var(--t-cream), 0 0 3px var(--t-cream); }
  .xp-mark--left .xp-mark__label::before, .xp-mark--right .xp-mark__label::before { content: ""; position: absolute; top: 50%; width: 24px; height: 1px; background: rgba(41, 74, 82, 0.45); }
  .xp-mark--left .xp-mark__label::before { left: 100%; margin-left: 4px; }
  .xp-mark--right .xp-mark__label::before { right: 100%; margin-right: 4px; }
  .xp-mark:hover .xp-mark__label, .xp-mark:focus-visible .xp-mark__label, .xp-mark.is-hinted .xp-mark__label { text-decoration: underline; text-decoration-color: var(--t-seaglass-dark); text-underline-offset: 3px; }
  .xp-mark[aria-current="true"] .xp-mark__label { color: var(--t-blue); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--t-blue); text-underline-offset: 3px; }
}

/* Phone preview card (Matt, 2026-09-24): below 40rem a point previews its centre here, under the map, instead of replacing
   the map. Built by the script (the no-JavaScript document needs none of it). Sticky, so while the map is on screen it rests
   on the bottom edge over the lower figure, and it scrolls away with the map rather than covering the rest of the page. */
.xp-peek { display: none; }
@media (max-width: 39.999rem) {
  .xp-peek:not([hidden]) { display: block; position: sticky; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); z-index: 5; background: #ffffff; border-radius: 14px; box-shadow: 0 10px 30px rgba(41, 74, 82, 0.22), 0 0 0 1px rgba(41, 74, 82, 0.10); padding: 0.9rem 1rem 1rem; animation: xp-peek-in 220ms var(--xp-ease) both; }
  .xp-peek > * { margin: 0; }
  .xp-peek__where { padding-right: 2.75rem; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-seaglass-text); }
  .xp-peek__title { margin-top: 0.15rem; padding-right: 2.75rem; font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--t-blue); }
  .xp-peek__title:focus-visible { outline: 2px solid var(--t-seaglass-dark); outline-offset: 3px; border-radius: 3px; }
  .xp-peek__lead { margin-top: 0.4rem; font-size: 1rem; line-height: 1.4; color: var(--t-charcoal); }
  .xp-peek__more { margin-top: 0.1rem; font-size: 0.9rem; color: var(--t-seaglass-text); }
  .xp-peek__note { margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.4; background: var(--t-cream); border-radius: var(--t-radius); padding: 0.6rem 0.75rem; color: var(--t-charcoal); }
  .xp-peek__action { margin-top: 0.8rem; }
  .xp-page .xp-peek__open { display: flex; width: 100%; justify-content: center; }
  .xp-peek__close { position: absolute; top: 0.35rem; right: 0.35rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--t-blue); font-size: 1.6rem; line-height: 1; cursor: pointer; }
  .xp-peek__close:hover { background: rgba(41, 74, 82, 0.06); }
  .xp-peek__close:focus-visible { outline: 2px solid var(--t-seaglass-dark); outline-offset: -4px; }
}
/* Short phones (iPhone SE class and below): a tighter card, so the Survival card with its crisis line leaves more of the
   figure in view. The crisis line keeps its size and wording. */
@media (max-width: 39.999rem) and (max-height: 44rem) {
  .xp-peek:not([hidden]) { padding: 0.7rem 0.9rem 0.8rem; }
  .xp-peek__title { font-size: 1.3rem; }
  .xp-peek__lead { margin-top: 0.25rem; }
  .xp-peek__note { margin-top: 0.45rem; padding: 0.45rem 0.65rem; }
  .xp-peek__action { margin-top: 0.6rem; }
}
@keyframes xp-peek-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Choose by name: a native disclosure above the map, one tap away. It comes before the figure in the page too, so the
   tab order matches what the screen shows (#15, Matt 2026-09-25; it used to be placed above visually but reached after). */
.xp-list { border: 1px solid var(--xp-rule); border-radius: var(--t-radius); background: var(--t-cream); }
.xp-page .xp-list__summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; min-height: 48px; padding: 0.6rem 1rem; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 1rem; font-weight: 600; color: var(--t-blue); border-radius: var(--t-radius); }
.xp-page .xp-list__summary::-webkit-details-marker { display: none; }
.xp-list__summary-text::before { content: "\25BE"; display: inline-block; margin-right: 0.55rem; color: var(--t-seaglass-dark); transition: transform var(--xp-hover) var(--xp-ease); }
.xp-list[open] .xp-list__summary-text::before { transform: rotate(180deg); }
.xp-list__count { font-weight: 500; font-size: 0.9rem; color: var(--t-seaglass-text); }
.xp-page .xp-list__summary:hover { background: rgba(41, 74, 82, 0.05); }
.xp-page .xp-list__summary:focus-visible { outline: 2px solid var(--t-seaglass-dark); outline-offset: 2px; }
.xp-list[open] .xp-list__summary { border-bottom: 1px solid var(--xp-rule); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.xp-page .xp-list__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 0.75rem; } /* .xp-page: the list reset above (0,2,0) had zeroed this padding, leaving the tiles flush against the border */
.xp-page .xp-list .xp-list__link { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.7rem; align-items: center; min-height: 44px; padding: 0.5rem 0.75rem; border-radius: var(--t-radius); text-decoration: none; color: var(--t-blue); background: var(--t-sand); border: 1px solid transparent; overflow-wrap: anywhere; transition: background-color var(--xp-hover) var(--xp-ease), box-shadow var(--xp-hover) var(--xp-ease); }
/* Hover and focus stay cool (Deep Blue text and ring): terracotta now means "chosen", and theme.css's rust link text would
   be 4.04:1 on this sand (4.14:1 on the chosen tint). The selector carries .page__body, .xp and `a` to outrank theme.css's
   ".page__body a:not(...):hover" (0,5,1) (round-3 review, Matt 2026-09-24). */
.xp-page .page__body .xp .xp-list a.xp-list__link:hover, .xp-page .page__body .xp .xp-list a.xp-list__link:focus-visible { color: var(--t-blue); text-decoration: none; box-shadow: inset 0 0 0 2px var(--t-blue); }
.xp-page .page__body .xp .xp-list a.xp-list__link:active { color: var(--t-blue); box-shadow: inset 0 0 0 2px var(--t-seaglass-dark); } /* matches the hover rule's weight, so pressing still shows */
.xp-list__glyph { grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--t-seaglass-dark); background: transparent; transition: background-color var(--xp-hover) var(--xp-ease); }
.xp-list__name { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.xp-list__where { font-size: 0.85rem; color: var(--t-charcoal); line-height: 1.3; }
.xp-page .xp-list .xp-list__link[aria-current="true"] { background: var(--t-seaglass-tint); }
.xp-list__link[aria-current="true"] .xp-list__glyph { background: var(--t-terracotta-dark); border-color: var(--t-terracotta-dark); } /* matches the chosen point */
.xp-list__link[aria-current="true"] .xp-list__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Viewed rows (#9): a filled ring, and a "Viewed" tag the script adds to the row's text (Sea Glass text, 4.5:1 or more on sand, cream and tint). */
.xp-list__link.is-viewed:not([aria-current="true"]) .xp-list__glyph, .xp-start__link.is-viewed .xp-start__glyph { background: var(--t-seaglass-dark); }
.xp-viewed { font-weight: 500; font-size: 0.85rem; color: var(--t-seaglass-text); white-space: nowrap; }
/* In the starting column the tag often wraps under the name, so it leads with a check (as on the map's points), not the
   separator dot, which then began a line (round-5 review). The check is decoration; the name still reads "… Viewed". */
.xp-start .xp-viewed > [aria-hidden] { display: none; }
.xp-start .xp-viewed::before { content: "\2713\00a0" / ""; }
@media (min-width: 26rem) { .xp-page .xp-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The invitation (initial state with JavaScript; hidden without it, when every panel shows) */
.xp-invite { background: var(--t-sand); border-radius: var(--t-radius); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-low); border: 1px solid transparent; }
.xp-invite > * + * { margin-top: 1rem; }
.xp-invite__title { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.22; color: var(--t-blue); margin: 0; text-wrap: balance; }
.xp-invite__aside { font-size: 1rem; }
html:not(.xp-js) .xp-invite, .xp-js .xp:not([data-enhanced]) .xp-invite { display: none; }
/* The explorer's sand panels declare their link-hover ground for theme.css's rule (Matt, 2026-09-25; per-link overrides
   until then): links on the sand keep Deep Blue text and carry the rust in the underline (rust text is 4.04:1 on sand),
   and the cream next-step and alternative boxes inside a panel go back to the cream rule, rust text (5.07:1; about 4.7:1
   on the wash). Anything new in a panel, like the next/previous links, follows without an override of its own. */
.xp-page .xp-invite, .xp-page .xp-center { --link-hover-ink: var(--t-blue); }
.xp-page .xp-next, .xp-page .xp-alt { --link-hover-ink: initial; }

/* Desktop starting column (#11, #12; Matt 2026-09-25): the areas by name, each with its placement, in place of the
   invitation's paragraph, which repeated the page header. Narrower screens keep the paragraph and "Choose by name". */
.xp-start { display: none; }
.xp-page .xp-start__items { display: grid; gap: 0.25rem; }
.xp-page .xp-invite .xp-start__link { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.7rem; align-items: center; min-height: 44px; padding: 0.4rem 0.75rem; border-radius: var(--t-radius); text-decoration: none; color: var(--t-blue); transition: background-color var(--xp-hover) var(--xp-ease), box-shadow var(--xp-hover) var(--xp-ease); }
.xp-page .page__body .xp .xp-invite a.xp-start__link:hover, .xp-page .page__body .xp .xp-invite a.xp-start__link:focus-visible { color: var(--t-blue); background: var(--t-cream); box-shadow: inset 0 0 0 2px var(--t-blue); }
/* A row lit from its point (is-hinted) is quieter than hover and focus, a cream fill and an underlined name with no ring,
   so it is never mistaken for the focused control (round-4 review). */
.xp-page .xp-invite .xp-start__link.is-hinted { background: var(--t-cream); }
.xp-start__link.is-hinted .xp-start__name { text-decoration: underline; text-decoration-color: var(--t-seaglass-dark); text-underline-offset: 3px; }
.xp-start__glyph { grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--t-seaglass-dark); background: transparent; transition: background-color var(--xp-hover) var(--xp-ease); }
.xp-start__name { font-size: 1rem; font-weight: 600; line-height: 1.25; }
/* The placement and the first theme share one cell, so the row keeps its height when the theme shows (no jump): the theme
   is shown only while the row or its point is pointed at or focused, never at rest (trauma-informed default, round-4
   review), and it cross-fades with the placement. */
.xp-start__where, .xp-start__first { grid-column: 2; grid-row: 2; font-size: 0.9375rem; line-height: 1.35; color: var(--t-charcoal); transition: opacity var(--xp-hover) var(--xp-ease); }
/* Both start at the top of their cell, and the theme spans a spare third row, so row 2 is sized by the placement alone: the
   placement sits right under the name and the glyph centres on the visible text, while the row still reserves the longer
   theme's height (fix-check review; centring left a 10px gap in rows whose theme wraps further). */
.xp-start__where, .xp-start__first { align-self: start; }
.xp-start__first { grid-row: 2 / span 2; }
.xp-start__first { opacity: 0; visibility: hidden; transition: opacity var(--xp-hover) var(--xp-ease), visibility 0s linear var(--xp-hover); }
.xp-start__link:hover .xp-start__first, .xp-start__link:focus-visible .xp-start__first, .xp-start__link.is-hinted .xp-start__first { opacity: 1; visibility: visible; transition: opacity var(--xp-hover) var(--xp-ease), visibility 0s; }
.xp-start__link:hover .xp-start__where, .xp-start__link:focus-visible .xp-start__where, .xp-start__link.is-hinted .xp-start__where { opacity: 0; }
.xp-start__foot { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--t-charcoal); }
@media (min-width: 60rem) {
  .xp-invite__intro { display: none; }
  .xp-start { display: block; }
  /* Two columns filled top to bottom, so the eye, the tab order and a screen reader all meet the areas in the worksheet's
     order, and the whole list sits beside the figure on a 900px-tall screen (one column ran 150px past the fold). Multi-
     column flow, not a grid: each column stacks its own rows, so a tall entry leaves no gap in the other (round-4 review). */
  .xp-page .xp-start__items { display: block; columns: 2; column-gap: 0.5rem; }
  .xp-page .xp-start__items > li { break-inside: avoid; padding-bottom: 0.25rem; }
}
html:not(.xp-js) .xp-figure__help-js { display: none; }
.xp-invite .xp-eyebrow { margin-bottom: 0; }

/* A centre's response panel */
.xp-center { background: var(--t-sand); border-radius: var(--t-radius); padding: clamp(min(1.25rem, 20px), 3vw, 2rem); box-shadow: var(--shadow-low); border: 1px solid transparent; overflow-wrap: anywhere; }
.xp-center:not([hidden]) + .xp-center { margin-top: 1.5rem; }
.xp-center > * + * { margin-top: 1rem; }
.xp-center__back { margin: 0 0 0.25rem; font-size: 1rem; }
.xp-center__back--end { margin-top: 1.5rem; }
.xp-page .xp-center .xp-back { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; color: var(--t-blue); }
.xp-page .xp-center .xp-back:hover, .xp-page .xp-center .xp-back:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; color: var(--t-blue); }
.xp-center__head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.xp-center__heading { flex: 1 1 9rem; min-width: 0; }
.xp-page .xp-center__mini { width: 3.6rem; height: auto; flex: none; }
.xp-center__where { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-seaglass-text); margin: 0 0 0.3rem; }
.xp-center__title { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: clamp(1.75rem, 2.6vw, 2.35rem); line-height: 1.2; color: var(--t-blue); margin: 0; text-wrap: balance; }
.xp-center__title:focus-visible { outline: 2px solid var(--t-seaglass-dark); outline-offset: 4px; border-radius: 3px; }
.xp-center__sub { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-seaglass-text); margin: 1.5rem 0 0.5rem; }
/* Theme rows: the worksheet wording to read, one ruled row each (not links: every theme in a group leads to the same
   page, which is linked once beneath them as the group's next step; Matt, 2026-09-24) */
.xp-themes { border-top: 1px solid var(--xp-rule); }
.xp-theme { border-bottom: 1px solid var(--xp-rule); padding: 0.6rem 0.25rem; font-size: 1.0625rem; line-height: 1.45; color: var(--t-charcoal); }
.xp-theme--lead { font-weight: 600; color: var(--t-blue); }
.xp-theme__arrow { display: inline-block; margin-left: 0.25em; transition: transform var(--xp-hover) var(--xp-ease); } /* the span's leading space collapses inside an inline-block, so the gap is a margin */
.xp-next__link:hover .xp-theme__arrow, .xp-alt__link:hover .xp-theme__arrow { transform: translateX(3px); }
/* The group's next step (its primary page), then conditional alternatives once per group with the themes they apply to.
   The next step sits on solid cream with a sea-glass edge so it reads as the main way on; alternatives stay quieter. */
.xp-page .xp-alts { display: grid; gap: 1rem; }
.xp-next, .xp-alt { padding: 0.85rem 1rem; border-radius: var(--t-radius); background: rgba(251, 248, 243, 0.7); }
.xp-next { background: var(--t-cream); border-left: 3px solid var(--t-seaglass-dark); }
.xp-next__note, .xp-alt__context { font-size: 1rem; line-height: 1.45; color: var(--t-charcoal); margin: 0; }
.xp-alt__for { color: var(--t-seaglass-text); }
.xp-page .xp-center .xp-next__link, .xp-page .xp-center .xp-alt__link { display: inline-block; margin-top: 0; padding: 0.7rem 0; line-height: 1.3; font-weight: 600; font-size: 1.0625rem; color: var(--t-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.xp-page .xp-center .xp-next__link { font-size: 1.125rem; }
/* On hover and focus the next-step and alternative links follow theme.css's cream-ground rule: rust text and underline
   (5.07:1 on cream, about 4.7:1 on the alternatives' cream wash). An earlier Deep Blue rule here never applied. */
.xp-center__crisis { font-size: 1rem; background: var(--t-cream); border-radius: var(--t-radius); padding: 0.85rem 1rem; color: var(--t-charcoal); }
.xp-center__footnote { font-size: 0.95rem; color: var(--t-charcoal); }
/* The consultation line (#10, Matt 2026-09-25): a quiet last step on the panel's sand, not a button. It follows the sand
   ground's link rule (Deep Blue text, rust underline on hover and focus); the note beneath is plain Charcoal. */
.xp-consult { margin-top: 1.25rem; }
.xp-page .xp-center .xp-consult__link { display: inline-block; padding: 0.7rem 0; /* a 44px target, as the next-step links */ line-height: 1.3; font-weight: 600; font-size: 1.0625rem; color: var(--t-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.xp-consult__link:hover .xp-theme__arrow { transform: translateX(3px); }
.xp-consult__note { display: block; margin-top: -0.3rem; font-size: 0.95rem; line-height: 1.45; color: var(--t-charcoal); pointer-events: none; } /* tucked up under the link's padding; pointer-events keep the whole 44px link clickable */
/* Previous and next area (#9, Matt 2026-09-25), in the worksheet's order, top of the body to the bottom; the first and last
   areas have one link each. Direction in the section-label style, the area's name as the link text beneath it. */
.xp-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--xp-rule); }
.xp-page .xp-center .xp-pager__link { display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; min-height: 44px; max-width: 100%; padding: 0.25rem 0; text-decoration: none; color: var(--t-blue); }
.xp-page .xp-center .xp-pager__link--next { margin-left: auto; align-items: flex-end; text-align: right; }
.xp-pager__dir { display: inline-flex; align-items: center; gap: 0.35rem; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-seaglass-text); }
.xp-pager__arrow { font-size: 1.1em; letter-spacing: 0; line-height: 1; transition: transform var(--xp-hover) var(--xp-ease); }
.xp-pager__name { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: currentColor; transition: text-decoration-color var(--xp-hover) var(--xp-ease); }
.xp-pager__link:hover .xp-pager__name, .xp-pager__link:focus-visible .xp-pager__name { text-decoration-color: var(--t-terracotta-dark); text-decoration-thickness: 2px; } /* the sand ground rule: Deep Blue text, rust underline (4.04:1, non-text) */
.xp-pager__link--prev:hover .xp-pager__arrow { transform: translateX(-3px); }
.xp-pager__link--next:hover .xp-pager__arrow { transform: translateX(3px); }
/* "Private by design" (Matt, 2026-10-18): a quiet aside in the About section, not a warning and not a card. Sand is kept
   for the interactive "Start here" panel, so the note sits on the cream ground with a thin Sea Glass rule (the figure's
   colour family; --t-seaglass-dark is the border/icon token) and a matching thin-line lock, at the paragraphs' measure. */
.xp-privacy { display: flex; align-items: flex-start; gap: 0.85rem; max-width: var(--measure-default, 68ch); margin: 1.5rem 0 0; padding: 0.35rem 0 0.35rem 1.1rem; border-left: 3px solid var(--t-seaglass-dark); }
.xp-privacy .xp-privacy__icon { flex: none; width: 24px; height: 24px; margin: 0.1rem 0 0; stroke: var(--t-seaglass-dark); }
.xp-privacy__text { margin: 0; font-size: 1rem; }
.xp-privacy__lead { font-weight: 600; color: var(--t-blue); }

/* Phones and portrait tablets (below the two-column line): while a centre is open the panel replaces the selector */
@media (max-width: 59.999rem) {
  .xp.is-open .xp__selector { display: none; }
  .xp.is-open .xp__panel { margin-top: 0; }
  .xp.is-open .xp-center { scroll-margin-top: 1rem; }
}

/* Side by side from 60rem (960px; round 5, Matt 2026-09-25): the map on the left, the starting column or the open area on
   the right, so landscape tablets and small laptops keep the map in view while reading an area, as desktop does (list-
   detail: one pane on narrow screens, both from about 840-960px). Up to 70rem the figure column is 30rem, which keeps the
   closest points 44.6px apart (a 34rem column at 992-1056px would not fit beside the panel; Codex, 2026-09-12); from 70rem
   it is 34rem as before. Below 60rem the stacked layout and the drill-in (the area replaces the map) stay. */
/* Enlarged text (2026-10-20 audit sweep): a root font-size override or text-only zoom grows the rem figure column but not
   this rem breakpoint (a browser text-size setting moves both), so at 200% text a 1024-1280px window left the starting
   column 80px or less and pushed it off the screen. The figure column now also stops at 55% of the row. Wherever this layout
   applies that is at least 493px (with a classic scrollbar), above the 480px and 544px columns, so it never binds at the
   default text size and the default layout is unchanged. */
@media (min-width: 60rem) {
  .xp-page .xp__inner { display: grid; grid-template-columns: minmax(0, min(30rem, 55%)) minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .xp__inner > * + * { margin-top: 0; }
  .xp-figure__stage { max-width: none; }
  .xp[data-enhanced] .xp-list { display: none; } /* the starting column lists the areas, and every point is labelled */
  .xp[data-enhanced] .xp-list + .xp-figure { margin-top: 0; } /* the hidden list still counts as a sibling for the * + * rhythm */
  .xp-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-center__back:not(.xp-center__back--end) { display: none; }
  .xp-page .xp-center__mini { width: 4.25rem; }
}
@media (min-width: 70rem) {
  .xp-page .xp__inner { grid-template-columns: minmax(0, min(34rem, 55%)) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); }
}
/* No sticky header below 66rem: a section brought in from its Next/Previous link keeps 1rem above it, as when stacked. */
@media (min-width: 60rem) and (max-width: 65.999rem) {
  .xp-center { scroll-margin-top: 1rem; }
}
/* At the 30rem figure the midline labels step down a size, so "Fear" and "Old stuff" stay two labels, not one block (the
   same treatment as very short screens). The starting column is narrower here too (400-560px), so it tightens its padding
   and sets its second line at the by-name tiles' 0.85rem: fewer themes wrap past their placement's line (the row keeps
   the longer one's height), and the whole list fits beside the figure at 960x700. */
@media (min-width: 60rem) and (max-width: 69.999rem) {
  .xp-page .xp-invite { padding: 1.5rem 1.25rem; }
  .xp-start__where, .xp-start__first { font-size: 0.85rem; }
  .xp-page .xp-invite .xp-start__link { padding: 0.35rem 0.6rem; column-gap: 0.55rem; }
  .xp-start__name .xp-viewed { display: block; line-height: 1.15; } /* its own tight line, so a fully viewed list still fits at 960x700 */
  .xp-page .xp-figure .xp-mark--inside .xp-mark__label, .xp-page .xp-figure .xp-mark--above .xp-mark__label { font-size: 0.8125rem; }
  .xp-page .xp-figure .xp-mark--inside .xp-mark__label { line-height: 1; }
  .xp-page .xp-figure .xp-mark--above .xp-mark__label { bottom: calc(50% + 18px); }
}
/* Stick the selector whenever the screen can show it whole below its sticky offset: 1rem + 518px in the 30rem column below
   66rem (no sticky header), 8rem + 518px from 66rem, 8rem + 582px in the 34rem column from 70rem, each with 10-18px to
   spare (round-5 review: the earlier 42rem and 50rem left landscape iPads in Safari, 744-799px tall, without it). */
@media (min-width: 60rem) and (max-width: 65.999rem) and (min-height: 34.5rem), (min-width: 66rem) and (max-width: 69.999rem) and (min-height: 41rem), (min-width: 70rem) and (min-height: 45rem) {
  .xp[data-enhanced] .xp__selector { position: sticky; top: var(--xp-sticky-top); }
}
/* Above the nav-fit line the shared header is sticky (condensed ~108px; scroll-padding 7.5rem) */
@media (min-width: 66rem) {
  .xp-page { --xp-sticky-top: 8rem; }
}

/* --- Short screens (Matt 2026-09-25) ----------------------------------------------------------------------
   Goal: every point on screen on arrival, the closest points never under 44px apart (a stage no narrower than 29.75rem;
   they are 52 figure units apart), and the head kept whenever that fits. Two tiers, each by the screen's height:
   1. Moderately short: the usual crown-to-thigh window, its stage sized to the height (1.239 is the window's 560 units
      over the lowest point's depth, 452), so a 1366x657 laptop keeps the whole figure.
   2. Very short (phones turned sideways): the band y 130-480 that holds every point, neck to just below the lowest ones.
      Reaching every point outranks the head, as on short portrait phones (1.6 is 560 / 350). Midline labels step down a
      size there so "Fear" and "Old stuff" stay two labels, not one block (round-4 review).
   Arrival (#explore, the invitations, the hero button) lands with the figure's label at the top of the screen: past the
   section's top padding, and below 60rem past "Choose by name" too, a short scroll up. From 66rem the condensed sticky
   header (about 108px) covers the top, so the label lands just under it. Known limits: 568x320 (the phone layout) and
   desktop windows under 440px tall (with the sticky header) still need a short scroll. */
/* Tier 1. The offsets are the stage's measured top on arrival plus the lowest dot's radius and a few pixels. Three
   layouts: 40-60rem stacked, "Choose by name" above the figure (stage about 64px down); 60-66rem side by side with no
   sticky header (46px); from 66rem side by side under the sticky header (162px). */
@media (min-width: 40rem) and (max-width: 59.999rem) and (max-height: 42.5rem) {
  .xp { scroll-margin-top: -8.625rem; }
  .xp-page .xp-figure__stage { max-width: max(29.75rem, min(36rem, (100svh - 5rem) * 1.239)); }
}
@media (min-width: 60rem) and (max-width: 65.999rem) and (max-height: 31.25rem) {
  .xp { scroll-margin-top: -3.25rem; }
  .xp-page .xp-figure__stage { max-width: max(29.75rem, min(30rem, (100svh - 3.8125rem) * 1.239)); }
}
@media (min-width: 66rem) and (max-height: 43.75rem) {
  .xp { scroll-margin-top: -4.25rem; }
  .xp-page .xp-figure__stage { max-width: max(29.75rem, min(36rem, (100svh - 11.0625rem) * 1.239)); }
}
/* Tier 2, from where tier 1 would need a stage narrower than 29.75rem. */
@media (min-width: 40rem) and (max-width: 59.999rem) and (max-height: 29rem), (min-width: 60rem) and (max-width: 65.999rem) and (max-height: 27.75rem), (min-width: 66rem) and (max-height: 35rem) {
  .xp-page { --xp-vy: 130; --xp-vh: 350; }
  .xp-page .xp-figure .xp-mark--inside .xp-mark__label, .xp-page .xp-figure .xp-mark--above .xp-mark__label { font-size: 0.8125rem; }
  .xp-page .xp-figure .xp-mark--inside .xp-mark__label { line-height: 1; }
  .xp-page .xp-figure .xp-mark--above .xp-mark__label { bottom: calc(50% + 18px); }
}
@media (min-width: 40rem) and (max-width: 59.999rem) and (max-height: 29rem), (min-width: 60rem) and (max-width: 65.999rem) and (max-height: 27.75rem) {
  .xp-page .xp-figure__stage { max-width: max(29.75rem, min(36rem, (100svh - 3.5rem) * 1.6)); }
}
@media (min-width: 66rem) and (max-height: 35rem) {
  .xp { scroll-margin-top: -4.75rem; }
  .xp-page .xp-figure__stage { max-width: max(29.75rem, min(36rem, (100svh - 11.5rem) * 1.6)); }
}
@media (min-width: 66rem) and (max-width: 69.999rem) and (max-height: 35rem) {
  .xp { scroll-margin-top: -4.5rem; } /* the section's top padding is smaller here; -4.75rem put the label under the header */
}

/* --- Motion and forced colours ------------------------------------------------ */
/* A section, the starting column or the preview card's new content fades in over 150ms (#16, Matt 2026-09-25), so a
   switch reads as a change of content rather than a jump; nothing moves, and reduced motion keeps the instant swap. While
   the card switches areas its slide-in is off and only its contents fade; the white card and its close button stay put
   (round-4 review: fading the card itself made it blink). */
@keyframes xp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .xp-fade { animation: xp-fade-in 150ms var(--xp-ease); }
  .xp-peek.xp-fade:not([hidden]) { animation: none; }
  .xp-peek.xp-fade:not([hidden]) > :not(.xp-peek__close) { animation: xp-fade-in 150ms var(--xp-ease); }
}
@media (prefers-reduced-motion: reduce) {
  .xp-mark__dot, .xp-theme__arrow, .xp-list__summary-text::before, .xp-pager__arrow, .xp-start__link, .xp-pager__name, .xp-start__where, .xp-start__first { transition: none; }
  .xp-peek:not([hidden]) { animation: none; }
  .xp-mark[aria-current="true"] .xp-mark__dot, .xp-mark:hover .xp-mark__dot, .xp-mark:focus-visible .xp-mark__dot, .xp-mark.is-hinted .xp-mark__dot { transform: none; }
  .xp-pager__link:hover .xp-pager__arrow { transform: none; }
}
@media (forced-colors: active) {
  /* The dot keeps its own colours here (forced-color-adjust: none), so its Deep Blue focus ring would survive against a
     system background it may not contrast with; focus is a system-colour outline on the dot instead, which paints above
     the label like the ring does. */
  .xp-mark:focus-visible .xp-mark__dot, .xp-mark[aria-current="true"]:focus-visible .xp-mark__dot { box-shadow: none; outline: 2px solid Highlight; outline-offset: 2px; }
  .xp-peek:not([hidden]) { border: 1px solid CanvasText; }
  .xp-mark__dot, .xp-mark:hover .xp-mark__dot, .xp-mark:focus-visible .xp-mark__dot, .xp-mark.is-hinted .xp-mark__dot { border: 2px solid ButtonText; background: ButtonFace; forced-color-adjust: none; }
  .xp-mark[aria-current="true"] .xp-mark__dot { background: Highlight; border-color: HighlightText; }
  .xp-list__glyph { border-color: ButtonText; }
  .xp-list__link[aria-current="true"] .xp-list__glyph { background: Highlight; }
  .xp-start__glyph { border-color: ButtonText; }
  .xp-list__link.is-viewed:not([aria-current="true"]) .xp-list__glyph, .xp-start__link.is-viewed .xp-start__glyph { background: CanvasText; }
  .xp-mark.is-viewed:not([aria-current="true"]) .xp-mark__dot::after { border-color: ButtonText; }
  /* A hinted point inverts (system colours only; a Highlight ring would read as focus), its check flipped to match. */
  .xp-mark.is-hinted:not([aria-current="true"]) .xp-mark__dot { background: ButtonText; border-color: ButtonText; box-shadow: none; }
  .xp-mark.is-hinted.is-viewed:not([aria-current="true"]) .xp-mark__dot::after { border-color: ButtonFace; }
  .xp-page .xp-invite .xp-start__link:hover { outline: 2px solid Highlight; outline-offset: -2px; }
}
@media print {
  .xp-figure__marks, .xp-list, .xp-invite, .xp-center__back, .xp-peek, .xp-pager { display: none !important; }
  .xp-center[hidden] { display: block !important; }
  .xp-center { box-shadow: none; border: 1px solid #999; page-break-inside: avoid; }
  .xp-page .xp__inner { display: block; }
}