@layer pmx.foundation, pmx.plugins, pmx.theme;
@layer pmx.plugins {
.cm-reading-aside { margin-block: var(--cm-space-4); color: var(--pmx-color-muted); font-size: var(--cm-text-small); line-height: var(--cm-leading-body); }
.cm-reading .cm-reading-aside p { margin-block: 0 var(--cm-space-2); }
.cm-reading-aside > p:first-child { font-size: var(--cm-text-body); }
.cm-site-map-icon { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.cm-site-map-sheet {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
  padding: 0; overflow: hidden; color: var(--pmx-color-fg); background: transparent;
}
.cm-site-map-sheet::backdrop { background: transparent; }
.cm-site-map:has(.cm-site-map-sheet[open]) .cm-site-map-open { opacity: 0; }
.cm-site-map-close {
  position: fixed; z-index: 1;
  top: var(--cm-site-map-toggle-top); left: var(--cm-site-map-toggle-left);
}
.cm-site-map-close > span { opacity: 1; }
.cm-site-map-content {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); row-gap: var(--cm-space-3);
  box-sizing: border-box; height: 100%; overflow: hidden;
  background: var(--pmx-color-bg);
  padding: max(var(--cm-site-map-toggle-top), env(safe-area-inset-top))
    max(var(--cm-site-map-sheet-gutter), env(safe-area-inset-right))
    max(var(--cm-space-2), env(safe-area-inset-bottom))
    max(var(--cm-site-map-sheet-gutter), env(safe-area-inset-left));
}
.cm-site-map-sheet[open] .cm-site-map-content { animation: cm-site-map-unfold var(--cm-site-map-unfold-duration) cubic-bezier(.2, .7, .3, 1) both; }
@keyframes cm-site-map-unfold { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .cm-site-map-sheet[open] .cm-site-map-content { animation: none; } }

/* Search takes the title's place, level with the Sitemap control. */
.cm-site-map-search { justify-self: center; align-self: center; width: min(30rem, 100% - 2 * var(--cm-site-map-toggle-clearance)); }

/* Fit both axes within the stage, with limited stretch from the drawn board. */
.cm-site-map-stage {
  --cm-site-map-scheme-room: calc(var(--cm-button-target) + var(--cm-space-2));
  --cm-site-map-ratio: calc(1600 / 900);
  --cm-site-map-stretch: 1.15;
  --cm-site-map-available-width: calc(100cqw - 2 * var(--cm-site-map-scheme-room));
  --cm-site-map-available-height: 100cqh;
  --cm-site-map-board-width: min(var(--cm-site-map-available-width), var(--cm-site-map-available-height) * var(--cm-site-map-ratio) * var(--cm-site-map-stretch));
  --cm-site-map-board-height: min(var(--cm-site-map-available-height), var(--cm-site-map-available-width) / var(--cm-site-map-ratio) * var(--cm-site-map-stretch));
  container-type: size; min-height: 0; display: flex; justify-content: center; align-items: center; gap: var(--cm-space-2);
}
/* A blank column the width of day and night balances them on the left, so the map
   always has even margins. */
.cm-site-map-stage::before { content: ""; flex: none; width: var(--cm-button-target); }

/* Day sits level with the relational (upper) half, night with the conceptual
   (lower) half; the pressed one is the palette in use. */
.cm-site-map-scheme { display: flex; flex-direction: column; justify-content: space-between; height: var(--cm-site-map-board-height); }
.cm-site-map-scheme .cm-button { min-inline-size: var(--cm-button-target); padding: 0; color: var(--pmx-color-muted); opacity: .6; }
.cm-site-map-scheme .cm-button[aria-pressed="true"] { color: var(--pmx-color-fg); opacity: 1; }
.cm-site-map-scheme .cm-site-map-icon { width: 1.25rem; height: 1.25rem; }

.cm-site-map-stage > .cm-map-board {
  flex: none; aspect-ratio: auto; margin: 0;
  width: var(--cm-site-map-board-width); height: var(--cm-site-map-board-height);
}

/* Contact is closed for now; it slips away whenever it's reached for. */
.cm-map-board .cm-map-place.cm-site-map-contact { left: var(--x, 84%); top: var(--y, 30%); cursor: default; transition: opacity .25s; }
.cm-site-map-contact { appearance: none; border: 0; background: transparent; font: inherit; }
.cm-map-place.cm-site-map-contact.is-moving { opacity: 0; }

@media (max-width: 52rem) {
  .cm-site-map-content { padding-inline: max(var(--cm-site-map-sheet-gutter), env(safe-area-inset-left)) max(var(--cm-site-map-sheet-gutter), env(safe-area-inset-right)); }
}
/* A short, wide window: search folds to its icon at the end of the top line and
   opens into the field when focused, or while it holds a query. */
@media (max-height: 32rem) and (orientation: landscape) {
  .cm-site-map-search { justify-self: end; width: var(--cm-button-target); }
  .cm-site-map-search .cm-site-search-field { justify-content: center; min-block-size: var(--cm-button-target); border-color: transparent; cursor: pointer; }
  .cm-site-map-search .cm-site-search-field input { flex: 0 0 0; width: 0; opacity: 0; }
  .cm-site-map-search:is(:focus-within, :has(input:not(:placeholder-shown))) { justify-self: center; width: min(30rem, 100% - 2 * var(--cm-site-map-toggle-clearance)); }
  .cm-site-map-search:is(:focus-within, :has(input:not(:placeholder-shown))) .cm-site-search-field { justify-content: flex-start; border-color: var(--pmx-color-border-strong); cursor: auto; }
  .cm-site-map-search:is(:focus-within, :has(input:not(:placeholder-shown))) .cm-site-search-field input { flex: 1; width: auto; opacity: 1; }
}
/* Too narrow to share a row with the controls: search takes its own row below them. */
@media (max-width: 40rem) {
  .cm-site-map-content { padding-top: max(calc(var(--cm-site-map-toggle-bottom) + var(--cm-space-2)), env(safe-area-inset-top)); }
  .cm-site-map-search { width: 100%; }
}
/* A portrait phone window turns the map a quarter turn clockwise, so order is on top and relational on the right. */
@media (orientation: portrait) and (max-width: 48rem) {
  /* Upright, relational is the right side and conceptual the left: both icons sit below the map. */
  .cm-site-map-stage {
    --cm-site-map-ratio: calc(900 / 1320);
    --cm-site-map-available-width: 100cqw;
    --cm-site-map-available-height: calc(100cqh - var(--cm-site-map-scheme-room));
    flex-direction: column;
  }
  .cm-site-map-stage::before { display: none; }
  .cm-site-map-scheme { flex-direction: row; width: var(--cm-site-map-board-width); height: auto; }
  .cm-site-map-night { order: -1; }
}
.cm-glyph {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--cm-glyph-size, 1.5em); height: var(--cm-glyph-size, 1.5em); vertical-align: middle;
}
.cm-glyph svg {
  width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: var(--cm-glyph-stroke); stroke-linecap: round; stroke-linejoin: round;
}
.cm-glyph:is([data-state="here"], [aria-current] .cm-glyph) { color: var(--pmx-color-accent); }
.cm-glyph[data-state="forming"] svg { stroke-dasharray: 1.6 2.2; }
.cm-glyph[data-state="resting"] { opacity: .45; }
/* The board: the map's drawing, its two worlds and their lettering. On a page it
   keeps a map's shape; in a portrait phone window it stands upright. */
.cm-map-board { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin-block: var(--cm-space-5); }
.cm-map-drawing { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pmx-color-border-strong); opacity: var(--cm-map-drawing-opacity); pointer-events: none; }
.cm-map-drawing * { fill: none; stroke: currentColor; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cm-map-drawing .dot { fill: currentColor; stroke: none; }
.cm-map-drawing.is-upright { display: none; }

/* Day is the relational palette and night the conceptual one, so the map shades
   the other world: by day the conceptual half takes a graphite wash; by night the
   relational half sinks into shadow. The shade sits over the drawing and under the
   places, inside the drawn border, and fades as the palette changes. */
.cm-map-world { position: absolute; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: var(--cm-map-world-shade); }
.cm-map-world.is-relational { inset: 1.8% .8% 50% .9%; }
.cm-map-world.is-conceptual { inset: 50% .7% 1.9% .9%; opacity: 1; }
html[data-pmx-scheme="dark"] .cm-map-world.is-conceptual { opacity: 0; }
html[data-pmx-scheme="dark"] .cm-map-world.is-relational { opacity: 1; }
@media (prefers-color-scheme: dark) {
  html:not([data-pmx-scheme="light"]) .cm-map-world.is-conceptual { opacity: 0; }
  html:not([data-pmx-scheme="light"]) .cm-map-world.is-relational { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cm-map-world { transition: none; } }

/* The regions are named along the map's edges, each along the edge of its own
   side, so the names turn with the map. Set small in the label face and barely
   visible, so the places lead. */
.cm-map-region {
  position: absolute; pointer-events: none; white-space: nowrap;
  font: 400 var(--cm-map-region-text)/1 var(--cm-font-label); letter-spacing: var(--cm-tracking-label); text-transform: uppercase;
  color: var(--pmx-color-muted); opacity: var(--cm-map-region-opacity); padding: .1em .35em;
  text-shadow: 0 0 2px var(--pmx-color-bg), 0 0 4px var(--pmx-color-bg), 0 0 7px var(--pmx-color-bg);
}
/* Wide: relational along the top, conceptual along the bottom; order up the left
   side and chaos down the right. */
.cm-map-region:is(.is-relational, .is-conceptual) { left: 50%; translate: -50% 0; }
.cm-map-region.is-relational { top: var(--cm-map-region-inset); }
.cm-map-region.is-conceptual { bottom: var(--cm-map-region-inset); }
.cm-map-region:is(.is-order, .is-chaos) { top: 50%; translate: 0 -50%; writing-mode: vertical-rl; }
.cm-map-region.is-order { left: var(--cm-map-region-inset); rotate: 180deg; }
.cm-map-region.is-chaos { right: var(--cm-map-region-inset); }

/* Places. A place's glyph sits on its point: `--o` and `--r` on the board, `--x`
   and `--y` (percent) over artwork. Every place is one tag: glyph, then name. */
.cm-map-place { position: absolute; width: 0; height: 0; padding: 0; text-decoration: none; color: inherit; left: calc((1 - var(--o)) * 100%); top: calc((1 - var(--r)) * 50%); }
.cm-map-place.is-art { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.cm-map-place[data-rank="featured"] { --cm-map-glyph: var(--cm-map-featured-glyph); --cm-map-tag-text: var(--cm-map-featured-text); }
.cm-map-label {
  --glyph-x: calc(1px + var(--cm-map-tag-pad-inline) + var(--cm-map-glyph) / 2);
  --tag-half: calc(1px + var(--cm-map-tag-pad-block) + var(--cm-map-glyph) / 2);
  position: absolute; left: 0; top: 0; translate: calc(-1 * var(--glyph-x)) calc(-1 * var(--tag-half));
  display: grid; justify-items: start; gap: var(--cm-map-caption-gap); white-space: nowrap;
  font: 400 var(--cm-map-tag-text)/1 var(--cm-font-label); letter-spacing: var(--cm-tracking-label); text-transform: uppercase;
}
.cm-map-tag {
  display: inline-flex; align-items: center; gap: var(--cm-map-tag-gap);
  padding: var(--cm-map-tag-pad-block) var(--cm-map-tag-pad-inline);
  border: 1px solid var(--pmx-color-border); border-radius: var(--cm-button-radius);
  background: var(--pmx-color-bg); color: var(--pmx-color-fg);
  transition: color .15s, border-color .15s, background-color .15s;
}
.cm-map-tag .cm-glyph { --cm-glyph-size: var(--cm-map-glyph); }
.cm-map-tag strong { font: inherit; }
.cm-map-place[data-rank="featured"] .cm-map-tag { border-color: var(--pmx-color-border-strong); }
.cm-map-label small {
  font-size: var(--cm-map-caption-text); line-height: 1.3; color: var(--pmx-color-muted);
  padding-inline: var(--cm-map-tag-pad-inline); text-shadow: 0 0 2px var(--pmx-color-bg), 0 0 4px var(--pmx-color-bg);
}
/* To clear a neighbour, a tag can sit to the left of its point instead. */
.cm-map-place[data-side="left"] .cm-map-label { translate: calc(-100% - var(--cm-map-label-gap)) calc(-1 * var(--tag-half)); justify-items: end; }
a.cm-map-place:hover .cm-map-tag { border-color: var(--pmx-color-border-strong); background: color-mix(in srgb, var(--pmx-color-bg) 88%, var(--pmx-color-fg)); }
.cm-map-place:is([data-state="forming"], [data-state="resting"], [data-state="closed"]) .cm-map-tag strong { color: var(--pmx-color-muted); }
/* A place you can't go to yet is not a link, and its tag is drawn in dots and
   faded: a place while it forms, Contact while it's closed. */
.cm-map-place:is([data-state="forming"], [data-state="closed"]) { opacity: var(--cm-map-unopened-opacity); }
.cm-map-place:is([data-state="forming"], [data-state="closed"]) .cm-map-tag { border-style: dotted; border-color: var(--pmx-color-border-strong); }
.cm-map-place[data-state="forming"][aria-current] { opacity: 1; }
:is(span, button).cm-map-place { cursor: default; }
/* Here: the current place's tag takes the accent colour, glyph, name and edge. */
.cm-map-place[aria-current] .cm-map-tag { color: var(--pmx-color-accent); border-color: var(--pmx-color-accent); }
.cm-map-place[aria-current] .cm-map-tag strong { color: inherit; }
.cm-map-place:focus-visible { outline: none; }
.cm-map-place:focus-visible .cm-map-tag { outline: 2px solid var(--pmx-color-accent); outline-offset: 2px; }

/* A portrait phone window turns the board a quarter turn clockwise: order on top,
   relational on the right. Artwork never turns. */
@media (orientation: portrait) and (max-width: 48rem) {
  .cm-map-board { aspect-ratio: 9 / 13; }
  .cm-map-board .cm-map-drawing.is-wide { display: none; }
  .cm-map-board .cm-map-drawing.is-upright { display: block; }
  .cm-map-world.is-relational { inset: 1.2% 1.6% 1% 50%; }
  .cm-map-world.is-conceptual { inset: 1.2% 50% 1% 1.6%; }
  .cm-map-board .cm-map-place { left: calc((1 + var(--r)) * 50%); top: calc((1 - var(--o)) * 100%); }
  .cm-map-board .cm-map-place[data-side="left"] .cm-map-label { translate: calc(-1 * var(--glyph-x)) calc(-1 * var(--tag-half)); justify-items: start; }
  .cm-map-board .cm-map-place[data-upright="left"] .cm-map-label { translate: calc(-100% - var(--cm-map-label-gap)) calc(-1 * var(--tag-half)); justify-items: end; }
  .cm-map-region:is(.is-order, .is-chaos) { top: auto; bottom: auto; left: 50%; right: auto; translate: -50% 0; writing-mode: horizontal-tb; rotate: none; }
  .cm-map-region.is-order { top: var(--cm-map-region-inset); }
  .cm-map-region.is-chaos { bottom: var(--cm-map-region-inset); }
  .cm-map-region:is(.is-relational, .is-conceptual) { top: 50%; bottom: auto; left: auto; right: auto; translate: 0 -50%; writing-mode: vertical-rl; }
  .cm-map-region.is-conceptual { left: var(--cm-map-region-inset); rotate: 180deg; }
  .cm-map-region.is-relational { right: var(--cm-map-region-inset); }
}

/* Set by the board's script: a tag that would run past the right edge reads left. */
:is(.cm-map-board, .cm-art-map) .cm-map-place[data-flip="left"] .cm-map-label { translate: calc(-100% - var(--cm-map-label-gap)) calc(-1 * var(--tag-half)); justify-items: end; }
/* A map on a page holds more places than the Sitemap, so on a phone its tags are smaller. */
@media (max-width: 40rem) {
  .pmx-document :is(.cm-map-board, .cm-art-map) {
    --cm-map-tag-text: .7rem; --cm-map-glyph: 1rem; --cm-map-tag-gap: .35rem;
    --cm-map-tag-pad-block: .2rem; --cm-map-tag-pad-inline: .4rem;
    --cm-map-featured-text: .8rem; --cm-map-featured-glyph: 1.25rem;
  }
}
}