/* =========================================================
   MSCinteract · css/help.css
   Online documentation page (help.html) and the changelog
   window (changelog.html)
   ========================================================= */

/* Same width, margins and padding as the main page (.site-main), so the
   documentation lines up exactly with the explorer. */
.doc-shell {
  flex: 1 0 auto;
  width: 100%;
  max-width: min(var(--shell-max), 96vw);
  margin: 0 auto;
  padding: 26px 24px 60px;
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

/* ---------------- Table of contents ---------------- */

.doc-toc {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  /* the contents run three levels deep and can outgrow a short window: the
     list then scrolls inside its own column instead of running past the
     bottom of the page */
  max-height: calc(100vh - var(--header-h) - 36px);
  max-height: calc(100dvh - var(--header-h) - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 14px;
}
.doc-toc__title {
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.doc-toc ol { list-style: none; margin: 0; padding: 0; }
.doc-toc li { margin-bottom: 7px; }
.doc-toc a { color: var(--ink-soft); text-decoration: none; }
.doc-toc a:hover { color: var(--accent); }
/* the subtitles of the two interface sections, one step under their section */
.doc-toc ol ul { list-style: none; margin: 5px 0 2px; padding-left: 13px; }
.doc-toc ol ul li { margin-bottom: 4px; }
.doc-toc ol ul a { font-size: 13.5px; color: var(--muted); }
.doc-toc ol ul a:hover { color: var(--accent); }
/* a third step, for the anchors that live inside one data source */
.doc-toc ol ul ul { margin: 3px 0 2px; padding-left: 12px; }
.doc-toc ol ul ul li { margin-bottom: 3px; }
.doc-toc ol ul ul a { font-size: 12.5px; }

/* ---------------- Article ---------------- */

.doc__title { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.025em; }
.doc__lead { color: var(--muted); font-size: 16.5px; line-height: 1.6; margin-top: 10px; }

.doc {
  /* a step above the 14px of the rest of the site: the documentation is read
     in long sittings, so its words run a little larger */
  font-size: 15.5px;
  /* the article stands in a column of the grid, and its contents reach far
     (the table of the samples, the diagram of the names): without this the
     column would take the width of the widest of them and the whole page
     would have to be dragged sideways */
  min-width: 0;
}
.doc h2 {
  font-size: 23px;
  margin: 44px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.doc h3 { font-size: 17.5px; margin: 24px 0 8px; }
.doc h4 { font-size: 15px; margin: 20px 0 6px; }
.doc p, .doc li { color: var(--ink-soft); line-height: 1.65; }
/* the prose takes the whole column: the same width the tables, the flows and
   the callouts already use, so no band of empty page stays on the right */
.doc ul, .doc ol { padding-left: 21px; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--accent); }
/* The links in the text of the documentation - a doi, a PMID, a place to go -
   answer the pointer with their colour and not with a line under the words. */
.doc a:hover { color: var(--accent-dark); }
.doc code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg-soft);
  padding: 1px 5px;
  border-radius: 4px;
}
.doc strong { color: var(--ink); }

/* ---------------- Logo in the text ---------------- */

/* The logo floats in the first paragraph and the words run around it. */
.doc__logo {
  float: left;
  width: 104px;
  height: 104px;
  margin: 4px 20px 8px 0;
  border-radius: 12px;
}
/* The paragraph holds the float, so the logo cannot reach into the list that
   follows it. */
.doc__withlogo { display: flow-root; }

/* ---------------- Numbered walkthrough ---------------- */

.doc-steps { counter-reset: step; list-style: none; padding: 0; }
.doc-steps > li { position: relative; padding-left: 40px; margin-bottom: 18px; }
.doc-steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 13.5px;
}

/* ---------------- Tables ---------------- */

/* The frame and the rounded corners belong to a wrapper: a collapsed table
   cannot clip its own background reliably, the head band would poke out of
   the rounded corners. */
.doc-table-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* horizontal scrolling on narrow screens, the corners stay clipped */
  overflow-x: auto;
  overflow-y: hidden;
}

.doc-table {
  width: 100%;
  min-width: 640px;
  /* the rows draw their own rules, so a rule can never run through a cell */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.doc-table th, .doc-table td {
  text-align: left;
  padding: 12px 16px;
  vertical-align: top;
}
.doc-table thead th {
  background: var(--bg-soft);
  font-weight: 650;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.doc-table tbody tr { border-bottom: 1px solid var(--line); }
.doc-table tbody tr:last-child { border-bottom: 0; }
.doc-table tbody tr:hover { background: var(--bg-soft); }

/* the sample list of one dataset runs to 20 rows; a tighter rhythm keeps it
   scannable and stops the table from pushing the next source off the screen */
.doc-table--compact { font-size: 13px; }
.doc-table--compact thead th { font-size: 10.5px; padding: 8px 12px; }
.doc-table--compact th, .doc-table--compact td { padding: 6px 12px; }
.doc-table--compact code { font-size: 12px; }

/* A sample-name scheme drawn as a diagram: the example name on top, then one
   column per part of it, every column listing every value that part can take
   with the meaning of the value. Narrow windows scroll the columns sideways
   instead of wrapping them, so the order of the name stays readable. */
.doc-name {
  margin: 12px 0 18px;
  padding: 13px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.doc-name__example {
  margin: 0 0 13px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.doc-name__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
}
.doc-name__col {
  padding: 0 16px;
  border-left: 1px solid var(--line);
}
.doc-name__col:first-child { padding-left: 0; border-left: 0; }
.doc-name__role {
  margin: 0 0 7px;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-name__values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.doc-name__values li { display: flex; flex-direction: column; gap: 1px; }
.doc-name__values code { font-size: 12.5px; color: var(--ink); }
.doc-name__values span {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* first column: name of the dataset and its note on two separate lines */
.doc-table th.doc-table__name { font-weight: 400; }
.doc-table__title { display: block; font-weight: 650; color: var(--ink); }
.doc-table__note {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* numeric columns */
.doc-table th.num, .doc-table td.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.doc-table td.status { white-space: nowrap; }
.doc-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 650;
}
.doc-table a { text-decoration: none; border-bottom: 1px solid transparent; }
/* the line under the address of a row is a stroke, not an underline: the
   colour says that the address leads somewhere */
.doc-table a:hover { color: var(--accent-dark); }

.doc kbd {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 5px;
  color: var(--ink-soft);
}

/* ---------------- Callouts ---------------- */

.doc-callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 16px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid #d3e2ff;
  color: var(--accent-dark);
  font-size: 14.5px;
  line-height: 1.6;
}
.doc-callout--teal { background: var(--teal-soft); border-color: #c3ece7; color: #0c7d74; }

/* ---------------- FAQ ---------------- */

.doc-faq { margin-top: 8px; }
.doc-faq details {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 0 14px;
  margin-bottom: 8px;
}
.doc-faq summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 650;
  font-size: 15.5px;
  color: var(--ink);
}
.doc-faq details p { margin: 0 0 14px; }

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  /* one column, and a column that may be narrower than its contents: the
     track of a grid takes the width of the widest thing inside it unless it
     is told otherwise, and the table of the samples is much wider than a
     phone */
  .doc-shell { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .doc-table { font-size: 13.5px; min-width: 560px; }
  .doc-table th, .doc-table td { padding: 10px 12px; }
  .doc-table--compact { font-size: 12.5px; min-width: 480px; }
  .doc-table--compact th, .doc-table--compact td { padding: 5px 10px; }
}

/* On a narrow screen there is no room for the text to run around the logo: it
   stands on its own in the middle of the column. */
@media (max-width: 560px) {
  .doc__logo {
    float: none;
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 auto 14px;
  }
}

/* On a small phone the logo takes a step back, so that the text keeps the
   width of the column. */
@media (max-width: 430px) {
  .page-help .doc__logo { width: 72px; height: 72px; margin-bottom: 12px; }
}

/* ---------------- The contents as a drawer ---------------- */

/* On a wide screen the contents stand in their own column beside the article.
   On a narrow screen they step out of the way and come up as a drawer: a
   button in the lower left corner calls them up, they slide in from the side,
   and the page stands still behind them. */
.doc-toc__inner { min-width: 0; }
.doc-toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.doc-toc__title { margin-bottom: 0; }
.doc-toc__close,
.doc-toc__toggle,
.doc-toc__scrim { display: none; }

@media (max-width: 900px) {
  .doc-toc {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(86vw, 330px);
    max-height: none;
    overflow: hidden;
    padding: 0;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    background: var(--panel);
    box-shadow: 0 0 44px rgba(22, 32, 58, .2);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform .26s ease, visibility .26s ease;
    z-index: 60;
  }
  .doc-toc.is-open {
    transform: none;
    visibility: visible;
  }
  .doc-toc__inner {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 20px 20px 32px;
  }
  .doc-toc__head { margin-bottom: 10px; }
  .doc-toc__title { font-size: 11px; }
  /* the button that lets the drawer go again */
  .doc-toc__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
  }
  .doc-toc__close:hover { color: var(--ink); border-color: var(--line-strong); }

  /* the list: room for the finger */
  .doc-toc li { margin-bottom: 2px; }
  .doc-toc a {
    display: block;
    padding: 6px 0;
    font-size: 13.5px;
    line-height: 1.4;
  }
  .doc-toc ol ul { margin: 0; padding-left: 14px; }
  .doc-toc ol ul a { font-size: 12.5px; padding: 5px 0; }
  .doc-toc ol ul ul { margin: 0; padding-left: 14px; }
  .doc-toc ol ul ul a { font-size: 11.5px; padding: 4px 0; }

  /* the button in the lower left corner */
  .doc-toc__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 16px;
    bottom: 18px;
    z-index: 55;
    padding: 11px 16px 11px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
  }
  .doc-toc__toggle:hover { border-color: var(--accent); color: var(--accent-dark); }
  .doc-toc__toggle:active { transform: translateY(1px); }
  body.doc-toc-open .doc-toc__toggle { opacity: 0; pointer-events: none; }

  /* Near the end of the page the button of the contents steps out of the way:
     the footer of the site stands there, and a button in the lower left corner
     would stand on top of it. The button comes back as soon as the reader
     leaves that stretch of the page again. */
  body.doc-toc-away .doc-toc__toggle {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
  }

  /* the veil behind the drawer: it catches the tap that closes it */
  .doc-toc__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(22, 32, 58, .42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s ease, visibility .26s ease;
  }
  body.doc-toc-open .doc-toc__scrim { opacity: 1; visibility: visible; }
  /* the page stands still while the drawer is open */
  body.doc-toc-open { overflow: hidden; padding-right: var(--toc-bar, 0px); }
}

/* ---------------- Phones ---------------- */

/* The head of the documentation keeps one line: the name of the app with its
   release badge on the left. The way back to the app steps out of the way on
   a phone — the drawer of the contents has the corner to itself. */
@media (max-width: 760px) {
  .page-help .site-header__inner {
    display: grid;
    grid-template-columns: 1fr;
    /* the documentation has no track of tabs of its own: the head of the app
       keeps one line only */
    grid-template-areas: none;
    align-items: center;
    padding: 9px 16px;
    min-height: 0;
  }
  .page-help .site-header__side--back { display: none; }
  .page-help .brand,
  .page-help .brand__text,
  .page-help .brand__title { min-width: 0; }
  .page-help .brand__title { flex-wrap: wrap; }
  .page-help .brand__text small { display: none; }

  .page-help .doc-shell { padding: 16px 14px 76px; }

  /* ---------------- The type on a phone ----------------

     One ladder for the whole site, so that the reader moves from the explorer
     to this documentation and to the notice of the maintenance without the
     words changing size under their eyes:

       20px   the title of the page
       19px   the heading of a section
       16px   the heading of a passage
       15px   the lead, a value worth reading
       14px   the body
       12px   the small print: the tables, the captions, the notes
       11px   the labels */
  .page-help .doc { font-size: 14px; }
  .page-help .doc__title { font-size: 20px; }
  .page-help .doc p, .page-help .doc li { line-height: 1.65; }
  .page-help .doc p { margin-bottom: 12px; }
  .page-help .doc__lead { font-size: 15px; line-height: 1.6; }
  .page-help .doc h2 { font-size: 19px; margin: 28px 0 10px; padding-top: 13px; }
  .page-help .doc h3 { font-size: 16px; margin: 20px 0 7px; }
  .page-help .doc h4 { font-size: 14.5px; margin: 16px 0 6px; }
  .page-help .doc ul, .page-help .doc ol { padding-left: 18px; }
  .page-help .doc li { margin-bottom: 6px; }
  .page-help .doc code { font-size: 11.5px; padding: 1px 4px; }
  .page-help .doc p, .page-help .doc li, .page-help .doc td, .page-help .doc code { overflow-wrap: break-word; }
  .page-help .doc-table { font-size: 12px; min-width: 420px; }
  .page-help .doc-table th, .page-help .doc-table td { padding: 8px 9px; }
  .page-help .doc-table--compact { font-size: 11.5px; min-width: 380px; }
  .page-help .doc-table--compact th, .page-help .doc-table--compact td { padding: 6px 9px; }
  .page-help .doc-callout { padding: 12px 13px; }
  .page-help .doc-steps > li { padding-left: 30px; margin-bottom: 14px; }

  /* The flows of the quick start stand up on a phone. A line of steps is too
     wide for a narrow screen: it breaks apart, the arrows fall wherever the
     break happens, and the reader loses the order of the steps. Here the steps
     go down one under the other, each of them a full row, and the arrows
     between them turn downward and stand in the middle of the row. */
  .page-help .doc-flow__track {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .page-help .doc-flow__step {
    font-size: 13px;
    padding: 5px 12px 5px 5px;
  }
  .page-help .doc-flow__num { font-size: 10px; }
  .page-help .doc-flow__join {
    justify-content: center;
    height: 16px;
  }
  /* the arrow turns on its own, so that the row of the join keeps its place */
  .page-help .doc-flow__join svg { transform: rotate(90deg); }
  .page-help .doc-flow__caption { font-size: 12px; }
  .page-help .doc-faq details { padding: 0 12px; }
  .page-help .doc-faq summary { font-size: 14px; }
  .page-help .doc-name, .page-help .doc-table-wrap { -webkit-overflow-scrolling: touch; }
}

/* ---------------- Standalone windows ---------------- */

/* The changelog and the contributors open in windows of their own, so they
   bring their own layout instead of borrowing the grid of the documentation
   page. The page itself already is a vertical flex shell with the soft
   background. */
.changelog-page,
.contributors-page { background: var(--bg); }

.changelog-head,
.contributors-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.changelog-head .brand__mark img,
.contributors-head .brand__mark img { width: 26px; height: 26px; }
.changelog-head__text,
.contributors-head__text { display: flex; flex-direction: column; line-height: 1.25; }
.changelog-head__text strong,
.contributors-head__text strong { color: var(--ink); font-size: 14px; }
.changelog-head__text small,
.contributors-head__text small { color: var(--muted); font-size: 11px; }

.changelog,
.contributors {
  flex: 1 0 auto;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 30px 26px 46px;
}
.changelog__title,
.contributors__title { font-size: 26px; letter-spacing: -.02em; }
.changelog__lead,
.contributors__lead { margin: 6px 0 24px; color: var(--muted); font-size: 14px; }

.release {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-xs);
}
.release__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.release__version {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
/* the stage of the release: alpha, beta and stable each wear a colour of
   their own, and the newest entry adds the blue mark of the Latest */
.release__badge--alpha { background: var(--amber-soft); color: #a9631f; }
.release__badge--beta { background: var(--teal-soft); color: #0c7d74; }
.release__badge--stable { background: #f1ebff; color: #6b46c1; }
.release__badge--latest { background: var(--accent-soft); color: var(--accent-dark); }
.release__date {
  margin: 6px 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.release__text { color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.release__text + .release__text { margin-top: 10px; }

/* The card of the release in progress is only a card while the site is down.
   The hidden attribute decides, and this rule keeps the decision: no rule
   below may give the card a display of its own. */
.release[hidden] { display: none; }

/* The release that is being built: dashed and rose, so it never passes for a
   shipped entry — and never for an Alpha, which wears the amber of a stage the
   code has already reached. Its number is filled in from maintenance.status. */
.release--pending {
  border: 1px dashed #f0c6da;
  background: #fffbfd;
  box-shadow: none;
}
.release--pending .release__version { color: #b0295f; }
.release__badge--pending { background: #fce9f2; color: #b0295f; }

/* The list of an entry: the work of the release in progress, taken from the
   status file, and the notes of a shipped release, written by hand. */
.release__tasks {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.release__tasks:empty { display: none; }
.release__tasks li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.release__tasks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9aa9bd;
}
/* inside the card of the release in progress the bullets wear its rose */
.release--pending .release__tasks li::before { background: #e08cb0; }

/* in a shipped entry the list is the note itself, and reads at the size of
   the text around it */
.release:not(.release--pending) .release__tasks {
  margin-top: 8px;
  gap: 6px;
}
.release:not(.release--pending) .release__tasks li {
  font-size: 14px;
  line-height: 1.65;
}

/* The little wall in the corner: bricks are laid bottom course first, one
   after another, and the whole course fades to start again. */
.release__bricks {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  width: 30px;
  margin-top: 14px;
}
.release__bricks-row { display: flex; gap: 2px; }
/* the middle course is pushed half a brick along, as a wall is built */
.release__bricks-row--in { margin-left: 6px; }
.release__bricks i {
  display: block;
  width: 11px;
  height: 5px;
  border-radius: 1.5px;
  background: #d2648f;
  opacity: 0;
  animation: brick-lay 3.2s cubic-bezier(.2, .7, .3, 1) infinite;
  animation-delay: calc(var(--i, 0) * .16s);
}
@keyframes brick-lay {
  0%        { opacity: 0; transform: translateY(-4px) scaleX(.55); }
  10%       { opacity: 1; transform: translateY(0) scaleX(1); }
  62%       { opacity: 1; transform: translateY(0) scaleX(1); }
  78%, 100% { opacity: 0; transform: translateY(0) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .release__bricks i { animation: none; opacity: 1; }
}

.changelog__foot,
.contributors__foot { margin-top: 22px; font-size: 13px; color: var(--muted); }
.changelog__foot a,
.contributors__foot a { color: var(--accent); text-decoration: none; }
.changelog__foot a:hover,
.contributors__foot a:hover { color: var(--accent-dark); }
.changelog__foot span,
.contributors__foot span { margin: 0 6px; }

/* ---------------- Contributors window ---------------- */

/* The people behind the explorer: only the names, in a plain list, the way the
   documentation carries them. */
.contributors__list {
  margin: 0 0 22px;
  padding-left: 20px;
}
.contributors__list li {
  font-size: 15.5px;
  color: var(--ink);
  margin-bottom: 7px;
}
.contributors__text { color: var(--ink-soft); font-size: 14px; line-height: 1.65; }

/* The changelog does not open a section of the page but a window of its own:
   the arrow tells the reader that a new window is coming. */
/* The flows of the quick start: numbered pills of steps on a line, joined by
   arrows. On a narrow screen the line wraps and the arrows follow the breaks. */
.doc-flow { margin: 16px 0 24px; }
.doc-flow__track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 7px;
}
.doc-flow__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
  font-size: 14px;
  color: var(--ink);
}
.doc-flow__step strong { font-weight: 650; }
.doc-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--teal));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(47, 109, 246, .30);
}
.doc-flow__join {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  opacity: .8;
  user-select: none;
}
.doc-flow__caption {
  margin-top: 11px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* The words of the title a contents link leads to: one soft wash of the
   accent that fades away, so the eye finds the section it was looking for.
   The wash lives on a span the script wraps around the words alone — the
   box, the margins and the gaps around the title stay untouched. */
.doc .doc-flash__text {
  border-radius: 4px;
  animation: doc-flash 1.8s ease-out 1;
}
@keyframes doc-flash {
  0%   { background-color: var(--accent-soft); }
  60%  { background-color: var(--accent-soft); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .doc .doc-flash__text { animation: none; }
}

.doc-toc a.doc-toc__ext::after {
  content: "↗";
  margin-left: 5px;
  font-size: 11px;
  color: var(--muted);
}