/* The docs: plain and fast. The ship shows up in the bar, the h1 and a few notes, and nowhere else. */
html {
  scrollbar-color: var(--c8) var(--paper);
}
body.docs {
  background: var(--paper);
}
.docs :target,
.docs h1,
.docs h2 {
  scroll-margin-top: calc(var(--bar-h) + 16px);
}

.banner {
  margin: 0;
  padding: 8px var(--edge);
  background: var(--sky-high);
  font-size: var(--t-md);
  line-height: 1.5;
}
.banner .tag {
  display: inline-block;
  background: var(--ink);
  color: var(--c15);
  padding: 0 8px;
  margin-right: 12px;
  vertical-align: 1px;
}

.docs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 48px;
  padding: 36px 0 72px;
  width: min(1328px, calc(100% - 2 * var(--gut)));
  margin: 0 auto;
}
.side,
.toc {
  display: none;
}
.navlabel {
  margin: 0 0 6px;
  color: var(--muted-light);
}
.side ul,
.toc ul,
.contents ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.side a,
.toc a,
.contents a {
  display: block;
  padding: 5px 10px;
  font-size: var(--t-md);
  line-height: 1.35;
  text-decoration: none;
  color: var(--ink);
}
.side a:hover,
.toc a:hover,
.contents a:hover {
  text-decoration: underline;
}
.side a[href^="https:"]::after,
.contents a[href^="https:"]::after,
.toc .gh a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 7px;
  background: url("../art/ext.svg") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
} /* a link that leaves the site */
.side a[aria-current],
.toc a[aria-current] {
  font-weight: 700;
}
.side a[aria-current="page"] {
  background: var(--ink);
  color: var(--c15);
}
.toc a[aria-current] {
  text-decoration: underline;
}
.side p:not(.navlabel),
.toc .gh {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--muted-light);
  margin: 0 10px;
}
.toc .gh a {
  display: inline;
  padding: 0;
  font-size: var(--t-sm);
  color: var(--sea);
}

.contents {
  border: 2px solid var(--ink);
  margin: 0 0 32px;
}
.contents summary {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.contents summary::-webkit-details-marker {
  display: none;
}
.contents summary::before {
  content: "▸";
  color: var(--sea);
} /* the terminal's own fold marks, as in the tabs sketch */
.contents[open] summary::before {
  content: "▾";
}
.contents[open] summary {
  border-bottom: 2px solid var(--ink);
  margin-bottom: 14px;
}
.contents .navlabel,
.contents ul {
  margin-left: 14px;
  margin-right: 14px;
}
.doc .navlabel {
  font-size: 11px;
  line-height: 22px;
} /* beats .doc p, so the labels in the open contents stay small like the side ones */
.contents ul a {
  padding-left: 0;
}

@media (min-width: 1200px) {
  .docs-grid {
    grid-template-columns: 232px minmax(0, 1fr) 200px;
  }
  .side,
  .toc {
    display: block;
    position: sticky;
    top: calc(var(--bar-h) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--bar-h) - 48px);
    overflow-y: auto;
  }
  .contents {
    display: none;
  }
}

.doc {
  min-width: 0;
  max-width: 820px;
}
.doc h1 {
  margin: 0 0 22px;
}
.doc h2 {
  margin: 56px 0 16px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--ink);
}
.doc h2::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--sea);
  transform: translateY(1px);
}
.doc .anchor {
  font: 22px/33px var(--pixel);
  color: var(--sea);
  text-decoration: none;
  opacity: 0;
  padding: 0 4px;
}
.doc h2:hover .anchor,
.doc .anchor:focus-visible {
  opacity: 1;
}
.doc p,
.doc li {
  max-width: 68ch;
  font-size: var(--t-base);
  line-height: 1.6;
}
.doc p {
  margin: 0 0 18px;
}
.doc .lede {
  font-size: var(--t-lg);
}
.doc ul {
  margin: 0 0 18px;
}
.doc li {
  margin-bottom: 8px;
}
.doc a {
  color: var(--sea);
  font-weight: 700;
}

.doc .cmd {
  margin: 0 0 22px;
}
.doc .cmd pre {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.doc .cmd pre.wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* the agent-state glyphs in the text (src/markdown/glyphs.mjs) are chips of the terminal they come from: ink, with the
   state's own colour from the .s-* tokens. On the page's paper that colour alone would be too faint, which is why the chip is dark */
code.glyph {
  background: var(--ink);
  padding: 1px 7px;
  font-size: 1em;
}

/* the blog's post list: "captain's log" in the nautical colour beside the plain "blog", the captain at his clipboard
   (PageTitle.astro). starlight-blog hides this panel on that page, so it is shown again here */
.content-panel:has(.log-head) {
  display: block !important;
}
.log-head {
  display: flex;
  align-items: flex-end;
  gap: 0 12px;
  margin: 0 0 8px;
}
.log-head h1 {
  margin: 0;
  min-width: 0;
}
.log-head .a-log {
  margin-bottom: calc(-3 * var(--px));
}
.doc .place {
  color: var(--sea);
  margin-right: 0.35em;
}
/* the end of a post: two quiet links under a dashed rule (BlogEnd.astro) */
.blog-end {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 56px 0 0;
  padding-top: 22px;
  border-top: 2px dashed color-mix(in srgb, var(--ink) 38%, transparent);
  font-weight: 700;
}
/* the date under a post's title: room before the first paragraph, as the docs leave under a title */
.doc .sl-markdown-content > .sl-blog-metadata {
  margin-bottom: 40px;
}

/* a note, with a neutral crewmate standing on the bottom edge */
.note {
  display: grid;
  grid-template-columns: calc(28 * var(--px)) minmax(0, 1fr);
  gap: 4px 22px;
  align-items: end;
  background: var(--haze);
  border: 2px solid var(--ink);
  margin: 30px 0;
  padding: 16px 22px 0 14px;
}
.note img,
.note .act {
  align-self: end;
  margin-bottom: calc(-3 * var(--px));
} /* the sprite has three empty rows under its feet */
.note p {
  margin: 0 0 18px;
  align-self: center;
  max-width: 60ch;
}

.docs-foot {
  border-top: 2px solid var(--ink);
  padding: 24px var(--edge) 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 40px;
  font-size: var(--t-md);
  color: var(--muted-light);
}
.docs-foot p {
  margin: 0;
  max-width: 60ch;
  text-wrap: balance;
}
.docs-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-weight: 700;
}
.docs-foot a {
  color: var(--ink);
}

/* search: provisional, this page only (see js/docs.js) */
.search {
  margin-left: auto;
  position: relative;
  width: 300px;
}
.search input {
  width: 100%;
  font: var(--t-md)/1.2 var(--read);
  color: var(--c15);
  background: #2b2840;
  border: 2px solid var(--c8);
  border-radius: 0;
  padding: 7px 36px 7px 12px;
  min-height: 36px;
  -webkit-appearance: none;
  appearance: none;
}
.search input {
  caret-color: var(--c14);
}
.search input::placeholder {
  color: var(--muted-dark);
  opacity: 1;
}
.search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.search input:hover {
  border-color: var(--c7);
}
.search input:focus {
  border-color: var(--c14);
}
.search .slash {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-55%);
  margin: 0;
  pointer-events: none;
  font-size: var(--code-sm);
  padding: 1px 6px 2px;
  background: #3a3650;
  box-shadow: none;
  color: var(--c7);
}
.search:focus-within .slash {
  display: none;
}
.results {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 70;
  width: min(560px, calc(100vw - 2 * var(--gut)));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  scrollbar-color: var(--c8) transparent;
  background: var(--ink);
  border: 2px solid var(--c14);
  color: var(--c7);
}
.results[hidden] {
  display: none;
}
.results a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--c7);
  border-bottom: 1px solid #3a3650;
}
.results a:hover,
.results a:focus-visible {
  background: #2b2840;
  color: var(--c15);
}
.results a:focus-visible {
  outline-offset: -3px;
}
.results b {
  display: block;
  color: var(--c14);
  font: 11px/22px var(--pixel);
  font-weight: 400;
}
.results span {
  display: block;
  font-size: var(--t-md);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.results mark {
  background: var(--c11);
  color: var(--ink);
  padding: 0 1px;
}
.results .empty,
.results .scope {
  margin: 0;
  padding: 10px 14px;
  font-size: var(--t-sm);
  color: var(--muted-dark);
}
.results .empty {
  color: var(--c15);
  font-size: var(--t-md);
}

@media (max-width: 899px) {
  .bar-in {
    row-gap: 0;
  }
  .search {
    flex: 1 1 100%;
    margin: 0;
    width: auto;
  }
  .search input {
    min-height: 0;
    padding-block: 5px;
  }
  .results {
    left: 0;
    right: 0;
    width: auto;
  }
  .doc h2 {
    margin-top: 44px;
  }
  .doc .anchor {
    opacity: 1;
  }
}
@media (max-width: 600px) {
  .note {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 16px 0;
    gap: 0;
    justify-items: start;
  }
  .note p {
    order: -1;
  }
  .doc h1 {
    font-size: 33px;
    line-height: 44px;
  }
  .banner {
    font-size: var(--t-sm);
  }
  .docs-grid {
    padding-top: 24px;
  }
}