/*
 * The exported site's own chrome: the page frame and the sidebar tree around a document. Everything inside the
 * document is the theme's business, styled by doc.css and the theme's own stylesheets, exactly as in the app, so
 * this file only ever names .site-* classes and reads the theme's --fx-* tokens.
 */

:root {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--fx-color-bg, #fff);
  color: var(--fx-color-text, #1d2326);
  font-family: var(--fx-font-body, ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fx-font-size, 15px);
  line-height: var(--fx-line-height, 1.6);
}

.site {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  min-height: 100vh;
}

.site-skip {
  position: absolute;
  left: -9999px;
}
.site-skip:focus {
  left: 8px;
  top: 8px;
  z-index: 2;
  padding: 8px 12px;
  background: var(--fx-color-surface, #eee);
  border-radius: var(--fx-radius, 8px);
}

.site-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  /* The full height of the window, not of the links in it, so its background and border run from top to bottom
   * however short the tree is. A longer tree scrolls inside it. dvh keeps it clear of a mobile browser's toolbar. */
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 28px 16px 48px;
  border-right: 1px solid var(--fx-color-border, #ddd);
  background: color-mix(in srgb, var(--fx-color-surface, #eee) 45%, var(--fx-color-bg, #fff));
  font-size: 0.93em;
}

.site-vault {
  display: block;
  margin: 0 0 18px 8px;
  font-family: var(--fx-font-heading, serif);
  font-size: 1.15em;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}
/* The vault's name is the link to its own page, the site's front page, and says so while that's the page being read. */
.site-vault[aria-current="page"] {
  color: var(--fx-color-accent, #0f6e64);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav ul ul {
  padding-left: 14px;
}
.site-nav li {
  margin: 1px 0;
}
.site-nav a {
  display: block;
  padding: 3px 8px;
  border-radius: var(--fx-radius, 8px);
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.site-nav a:hover {
  background: var(--fx-color-surface, #eee);
}
.site-nav a[aria-current="page"] {
  background: var(--fx-color-accent-soft, #e6efec);
  color: var(--fx-color-accent, #0f6e64);
  font-weight: 600;
}

/* A folder: its name opens its page, the arrow in front folds what's under it, as in the app's sidebar. */
.site-nav summary {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
}
.site-nav summary::-webkit-details-marker {
  display: none;
}
.site-nav summary::before {
  content: "";
  flex: none;
  width: 0.4em;
  height: 0.4em;
  margin: 0 0.35em 0 0.3em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
  transition: transform 120ms;
}
.site-nav details[open] > summary::before {
  transform: rotate(45deg);
}
.site-nav summary > a {
  flex: 1;
  font-weight: 500;
}

.site-main {
  /* The room a wide or full block measures itself against (doc.css). */
  container-type: inline-size;
  min-width: 0;
  padding: 32px 24px 96px;
  /* How far the document's first element is from the top of the column (this padding and .site-doc's), and the padding
     at its sides: what a header image runs through (doc.css). */
  --fx-room-top: 56px;
  --fx-room-side: 24px;
}

.site-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 40px 72px;
  box-sizing: border-box;
}

/* "Made with Plicine", under the document and in line with it. `credit: false` leaves it out of the page altogether. */
.site-credit {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
  font-size: 0.8em;
  color: var(--fx-color-muted, #667);
}
.site-credit a {
  color: inherit;
}

@media (max-width: 899px) {
  .site {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--fx-color-border, #ddd);
  }
  .site-doc {
    padding: 8px 4px 48px;
  }
  .site-main {
    --fx-room-top: 40px;
  }
  .site-credit {
    padding: 0 4px;
  }
}

@media print {
  .site-sidebar,
  .site-skip {
    display: none;
  }
  .site {
    display: block;
  }
}