/* Clave docs.

   Direction: "Soft workspace", the same palette the app, the operator
   console and the landing page are drawn in. This is the fourth copy of
   those tokens, under the same names, because the four packages import
   nothing from each other and each serves its own stylesheet. A shared
   tokens stylesheet, served the way internal/typeface serves the faces,
   is the exit if they ever disagree.

   Two rules this codebase pays for in production hold here as well:

   - `style-src 'self'` covers inline style attributes as well as
     stylesheets, so no template here may carry one.
   - Only the latin subset of each face is vendored, so a typed arrow or
     tick falls back mid-sentence. There is no glyph in this stylesheet
     for that reason.

   Light only, like the landing page. */

:root {
  color-scheme: light;

  --page: #f3ede6;
  --panel: #fbf8f4;
  --card: #ffffff;
  --line: #e7ded4;
  --line-strong: #d2c6b9;

  --ink: #2b2327;
  --muted: #6f6369;
  --faint: #9d9196;

  --accent: #6b2d5c;
  --accent-hover: #5c2750;
  --on-accent: #fffefc;
  --accent-tint: #f2e6ef;

  --well: #f7f2ec;

  --radius: 14px;
  --shadow-card: 0 1px 2px rgba(43, 35, 39, .05), 0 8px 24px -16px rgba(43, 35, 39, .18);
}

* { box-sizing: border-box; }

html { scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Outfit, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

/* ---- Top bar --------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* The bar wraps rather than overflow. Five controls do not fit beside
     the wordmark at 390px, and a bar that does not wrap pushes the whole
     page 11px wide — which cuts the right-hand edge off every line on
     the page, not just off the bar. */
  flex-wrap: wrap;
  row-gap: .5rem;
}

.brand {
  font-family: Newsreader, Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
}

/* The dot of the wordmark: the one element that carries colour. */
.brand-dot {
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.brand-tag {
  font-family: Outfit, system-ui, sans-serif;
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.topnav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

.nav-link { color: var(--muted); text-decoration: none; font-size: .95rem; }

/* The jump to the index, which exists only where the index is below the
   page rather than beside it. */
.nav-contents { display: none; }
.nav-link:hover { color: var(--ink); }

.nav-pill {
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-size: .95rem;
  padding: .4rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
}
.nav-pill:hover { background: var(--accent-hover); color: var(--on-accent); }

/* ---- Layout ---------------------------------------------------------- */

.layout {
  max-width: 78rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  padding-right: .5rem;
}

.side-section { margin-top: 1.5rem; }

.side-title {
  margin: 0 0 .4rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

.side-link {
  display: block;
  padding: .28rem .6rem;
  margin-left: -.6rem;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: .95rem;
}
.side-link:hover { background: var(--card); color: var(--ink); }
.side-link.current {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 500;
}

/* ---- Prose ----------------------------------------------------------- */

.prose { min-width: 0; max-width: 46rem; }

/* The copy button. It is built by static/copy.js and is absent without
   it, so nothing here styles a control a reader cannot use. It sits
   above the heading and to the right, out of the way of the first
   sentence. */
.copy-page {
  float: right;
  margin: .2rem 0 .5rem 1rem;
  padding: .3rem .85rem;
  font: inherit;
  font-size: .85rem;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.copy-page:hover {
  color: var(--ink);
  border-color: var(--muted);
}

.copy-page.is-done {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-tint);
}

.prose h1 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 500;
  font-size: 2.3rem;
  line-height: 1.2;
  margin: 0 0 1.25rem;
  letter-spacing: -.01em;
}

.prose h2 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 500;
  font-size: 1.5rem;
  margin: 2.5rem 0 .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}

.prose h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.75rem 0 .5rem;
}

.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin: .3rem 0; }

.prose blockquote {
  margin: 1.5rem 0;
  padding: .75rem 1.1rem;
  border-left: 3px solid var(--accent);
  background: var(--card);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--muted);
}
.prose blockquote p { margin: .3rem 0; color: inherit; }

/* An inline code span breaks rather than widen the page under it. A
   page writes an address as code — `GET {{api}}/v1/skill` — and the
   length of that address comes from the configuration, so a span that
   cannot break makes the whole page as wide as the longest hostname a
   deployment happens to have. Found in production at 320px, where the
   real origin is longer than the one a test substitutes. */
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .08em .35em;
  overflow-wrap: break-word;
}

/* Inside a block the rule is the opposite: the block scrolls, so a line
   of code keeps its shape. */
.prose pre code { overflow-wrap: normal; }

.prose pre {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  overflow-x: auto;
  box-shadow: var(--shadow-card);
}
.prose pre code { background: none; border: 0; padding: 0; font-size: .85rem; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: .95rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.prose th, .prose td {
  text-align: left;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th { background: var(--well); font-weight: 600; font-size: .9rem; }
.prose tr:last-child td { border-bottom: 0; }
.prose td code { white-space: nowrap; }

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.page-footer {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: .88rem;
}
.page-footer p { margin: 0; }

/* ---- Narrow ---------------------------------------------------------- */

@media (max-width: 60rem) {
  /* The page first, the index under it. A sidebar drawn above the
     article puts every page of the manual between a reader and the one
     they asked for, which is a scroll of several screens on a phone.
     The topbar's "Contents" is how they reach it. */
  .layout {
    display: flex;
    flex-direction: column;
    /* Stretch, and not the `align-items: start` the grid above sets.
       A column flex item aligned to the start is sized to its own
       max-content, and the max-content of an article holding a code
       block is far wider than a phone — which draws every page at about
       500px inside a 390px window, with the right-hand side of every
       line cut off. Measured in Chromium rather than guessed. */
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.5rem 1.15rem 4rem;
  }
  .prose { order: 1; max-width: none; }
  .topbar-inner { padding: .7rem 1.15rem; }
  .topnav { gap: .85rem; }
  .nav-contents { display: inline; }
  .sidebar {
    order: 2;
    scroll-margin-top: 4.5rem;
    position: static;
    max-height: none;
    overflow: visible;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
  }
  .side-section { margin-top: 1rem; }
  .prose h1 { font-size: 1.9rem; }

  /* A table of paths cannot be made narrow without breaking a path in
     half, and a broken path is worse than a scroll. So the table scrolls
     inside the article instead of widening the page under it. */
  .prose table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}