/* Mock-up only: the docs section of the Moon site (docs.html, the docs home, and guide.html, the
   guide). It adds to open.css and uses its colors and its one surface material (the soft tint).

   The guide is one long page with a contents list that knows where you are.
   - From 1100 px: the contents stand in a column that stays in view while the text scrolls; from
     1200 px a second small list, "On this page", stands at the right.
   - Under 1100 px (a tablet, a phone): a bar stays at the top with the name of the part you are
     reading and a Contents button. The button opens the same list as a panel at the left on a
     tablet and as a sheet from the lower edge on a phone.
   docs.js does the opening, the marker, the find field and the copy buttons. Without it every
   link still works: the list is plain links. */

/* ---------- headings that can be linked to ---------- */

/* a part or a heading opened from a link stands clear of the window's top */
.doc [id] {
  scroll-margin-top: 28px;
}

.h-link {
  margin-left: 10px;
  color: var(--blue);
  font: 400 0.6em var(--text);
  text-decoration: none;
  opacity: 0.55;
}

.doc .h-link {
  text-decoration: none;
}

.h-link:hover,
.h-link:focus-visible {
  opacity: 1;
}

/* ---------- the guide's layout ---------- */

.g-bar,
.g-shade,
.g-nav-head {
  display: none;
}

.g-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.g-layout .doc {
  min-width: 0;
}

/* ---------- the contents list (also used on the docs home) ---------- */

.g-nav {
  padding: 18px;
  border-radius: 12px;
  background: var(--tint);
  font-size: 15px;
  /* when the list scrolls by itself its bar is slim and in the site's blue */
  scrollbar-width: thin;
  scrollbar-color: #8fb4ff55 transparent;
}

.g-home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.g-home:hover {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}

.g-find {
  display: grid;
  gap: 6px;
  margin-block: 6px 14px;
  color: var(--soft);
  font-size: 13.5px;
}

.g-find input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: #02040b;
  color: var(--ink);
  font: 400 15px var(--text);
}

.g-find input::placeholder {
  color: #9aa3c4;
}

.g-none {
  color: var(--soft);
  font-size: 14.5px;
}

.g-group + .g-group {
  margin-top: 16px;
}

.g-group-name {
  color: var(--blue);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.g-group ul {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}

.g-group a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--soft);
  text-decoration: none;
  /* the marker moves from row to row softly */
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.g-group a:hover {
  color: var(--ink);
}

/* the part being read: a filled row, brighter and heavier words, and the site's red stroke */
.g-group a[aria-current] {
  background: #8fb4ff29;
  color: var(--ink);
  font-weight: 600;
}

.g-group a[aria-current]::before {
  content: '';
  flex: none;
  width: 12px;
  height: 3px;
  margin-right: 9px;
  border-radius: 99px;
  background: var(--red);
  transform: rotate(-12deg);
}

/* ---------- "On this page": the headings of the part being read ---------- */

.g-page {
  display: none;
}

.g-page-name {
  color: var(--blue);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.g-page ul {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}

.g-page a {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--soft);
  font-size: 14.5px;
  text-decoration: none;
}

.g-page a:hover {
  color: var(--ink);
}

/* ---------- previous and next, at the end of every part ---------- */

.g-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 34px;
}

.doc .g-step a {
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 64px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.g-step a small {
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.g-step a:hover {
  background: #8fb4ff29;
}

.g-step a[rel='next'] {
  grid-column: 2;
  text-align: right;
}

/* ---------- a block of commands with its copy button ---------- */

.copy-holder {
  position: relative;
}

.copy {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 32px;
  padding: 4px 12px;
  border: 0;
  border-radius: 8px;
  background: #1a2340;
  color: var(--ink);
  font: 500 13px var(--text);
  cursor: pointer;
}

.copy:hover {
  background: #26315a;
}

/* room for the button, so it never lies on the first command */
.copy-holder pre {
  padding-right: 84px;
}

/* Under a finger the button and the "#" beside a heading are at least 44 by 44. Neither looks
   larger: the button's painted box and the "#" keep their size, and the room around them takes
   the touch. */
@media (hover: none) {
  .copy {
    top: 2px;
    right: 2px;
    min-width: 69px;
    min-height: 44px;
    border: 6px solid transparent;
    background-clip: padding-box;
  }

  /* the block is as high as the button, so a single command does not sit under it */
  .copy-holder pre {
    min-height: 48px;
  }

  .h-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-block: -12px;
    margin-left: 0;
    vertical-align: middle;
  }
}

/* a wide table scrolls inside its own box on a phone: the same slim bar as the contents */
.doc .compare-wrap,
.doc .table-wrap,
.doc pre {
  scrollbar-width: thin;
  scrollbar-color: #8fb4ff55 transparent;
}

/* ---------- the docs home ---------- */

/* the groups stand side by side where two fit, and one under the other on a phone */
.d-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 16px;
  align-items: start;
  max-width: 70ch;
}

.d-groups .g-none {
  grid-column: 1 / -1;
}

.d-groups .g-group {
  margin: 0;
  padding: 18px;
  border-radius: 12px;
  background: var(--tint);
}

.d-groups .g-group a {
  min-height: 44px;
  padding-inline: 0;
  color: var(--ink);
}

.d-groups .g-group a:hover {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}

.d-find {
  max-width: 70ch;
  margin-block: 20px 16px;
}

.d-find input {
  background: #8fb4ff1f;
}

.docs-home .prose h2 {
  margin-top: 44px;
}

.docs-home .kick a,
.doc .kick a {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

/* ---------- a tablet and a phone: the bar and the panel ---------- */

@media (max-width: 1099px) {
  /* the bar stays at the top while the guide scrolls; its ground is solid and as wide as the window */
  .g-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding-block: 8px;
    isolation: isolate;
  }

  /* Its ground is as wide as the window and has no cut edge: above and below the bar it thins
     out, so the text scrolls under it softly. */
  .g-bar::before {
    content: '';
    position: absolute;
    top: -14px;
    bottom: -20px;
    left: 50%;
    z-index: -1;
    width: 100vw;
    transform: translateX(-50%);
    background: linear-gradient(
      #0a0f1f00 0,
      #0a0f1f 14px,
      #0a0f1f calc(100% - 20px),
      #0a0f1f00 100%
    );
    pointer-events: none;
  }

  .g-open,
  .g-close {
    flex: none;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: #06091480;
    color: var(--ink);
    font: 500 15px var(--text);
    cursor: pointer;
  }

  .g-open:hover,
  .g-close:hover {
    background: var(--ink);
    color: #05040a;
  }

  .g-now {
    min-width: 0;
    overflow: hidden;
    color: var(--soft);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* under the bar a heading opened from a link must clear it */
  .doc [id] {
    scroll-margin-top: 84px;
  }

  .g-layout .doc {
    padding-top: 26px;
  }

  /* the contents: out of view until opened, then a panel at the left over a shade */
  .g-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 21;
    width: min(380px, 86vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0 16px 16px 0;
    background: #0d1326;
    visibility: hidden;
    transform: translateX(-102%);
    transition:
      transform 0.22s ease,
      visibility 0s 0.22s;
  }

  .g-nav.open {
    visibility: visible;
    transform: none;
    transition: transform 0.22s ease;
  }

  .g-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }

  .g-nav-title {
    font: 300 24px var(--display);
  }

  /* the shade behind the open contents comes and goes with the panel, it does not jump */
  .g-shade {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: block;
    background: #03040acc;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.22s ease,
      visibility 0s 0.22s;
  }

  .g-shade.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease;
  }

  /* while the contents are open the page behind does not scroll (one scroll bar at a time) */
  html.g-lock {
    overflow: hidden;
  }
}

/* a phone: the contents rise from the lower edge as a sheet */
@media (max-width: 619px) {
  .g-nav {
    inset: auto 0 0 0;
    width: auto;
    max-height: 86dvh;
    border-radius: 16px 16px 0 0;
    transform: translateY(102%);
  }

  .g-step {
    grid-template-columns: 1fr;
  }

  .g-step a[rel='next'] {
    grid-column: 1;
  }
}

/* ---------- from 1100 px: the contents in their own column, always in view ---------- */

@media (min-width: 1100px) {
  .g-layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .g-nav {
    position: sticky;
    top: 24px;
    max-height: calc(100dvh - 48px);
    margin-top: clamp(30px, 6vw, 90px);
    overflow-y: auto;
  }
}

@media (min-width: 1200px) {
  .g-layout {
    grid-template-columns: 240px minmax(0, 1fr) 170px;
    gap: 36px;
  }

  .g-page {
    position: sticky;
    top: 24px;
    display: block;
    margin-top: clamp(30px, 6vw, 90px);
    padding-top: 6px;
  }

  .g-page[hidden] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g-nav,
  .g-nav.open {
    transition: none;
  }
}