/* Site shell: the header with the corner mark and Site Map, the workspace, the footer. */
.cm-skip { position: fixed; top: -6rem; left: var(--cm-space-4); z-index: 100; padding: var(--cm-space-3); background: var(--pmx-color-bg); }
.cm-skip:focus { top: var(--cm-space-2); }

.cm-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--cm-space-4); padding: var(--cm-space-4) var(--cm-page-start); background: color-mix(in srgb, var(--pmx-color-bg) 10%, transparent); }
/* Shared navigation: labels fade as each page title leaves the viewport. */
html { timeline-scope: --cm-page-title; }
.cm-workspace > main h1 { view-timeline-name: --cm-page-title; }
.cm-site-map-open { flex-direction: row; }
/* A feathered backdrop keeps the map legible without a hard-edged patch. */
.cm-site-map-open { position: relative; isolation: isolate; }
.cm-site-map-open::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: calc(var(--cm-space-2) + var(--cm-button-icon-size) / 2);
  top: 50%;
  width: calc(var(--cm-button-icon-size) + 3 * var(--cm-space-2));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--pmx-color-bg) 65%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: radial-gradient(circle, black 25%, transparent 72%);
  mask-image: radial-gradient(circle, black 25%, transparent 72%);
}
@supports (animation-timeline: view()) {
  .cm-site-map-open > span {
    animation: cm-nav-label linear both;
    animation-timeline: --cm-page-title;
    animation-range: exit 40% exit 100%;
  }
}
@keyframes cm-nav-label { from { opacity: 1; } to { opacity: 0; } }
html[data-pmx-play-active] .cm-header { display: none; }

/* `reading` is the container components measure for their wide arrangements. */
.cm-workspace { display: flex; align-items: flex-start; gap: var(--cm-space-6); min-height: calc(100svh - 10rem); padding: var(--cm-space-5) var(--cm-page-start) var(--cm-space-8); }
.cm-reference-dock { display: contents; }
.cm-workspace > main { flex: 1; min-width: 0; container: reading / inline-size; }
.cm-workspace .pmx-document { padding: 0; }

.cm-footer { padding: var(--cm-space-7) var(--cm-page-start); border-top: 1px solid var(--pmx-color-border); color: var(--pmx-color-muted); font-size: var(--cm-text-small); }
.cm-footer a { color: inherit; }

@media print {
  .cm-header, .cm-footer { display: none; }
  .cm-workspace { display: block; padding: 0; }
}