/* TinePlayer's site. One page, no framework, no build step.
   Colors are checked against WCAG AA in both schemes. */

:root {
  /* One measure for the header, every page and the footer. They were
     three different numbers, which is what made the site look assembled
     rather than designed. */
  --page: 68rem;

  --bg: #ffffff;
  --fg: #1a1d21;
  --muted: #4a5058;
  --rule: #d7dbe0;
  --accent: #0b5fbf;
  /* An arrow leaving a box: the convention every browser and wiki uses for
     a link that goes off the site. Inline so it costs no request. */
  --external-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
  --accent-fg: #ffffff;
  --card: #f4f6f8;
  --focus: #0b5fbf;
  /* A step quieter than --muted, for the footer's credits: present when
     looked for, not competing with the links above them. 5.8:1 on the page,
     so it still clears AA for small text with room to spare. */
  --faint: #5f666e;

  /* The header and the footer, so the page sits between two bands rather than
     running to the edges of the window. Tinted towards the slate disc the mark
     is drawn on (#3d3846) rather than a neutral grey, which is what makes it
     read as part of the same design. Every colour used on it still clears AA:
     --fg 15.2:1, --muted 7.3:1, --faint 5.2:1, --accent 5.5:1. */
  --chrome: #f3f2f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --fg: #e8eaed;
    --muted: #a8b0b9;
    --rule: #2c3238;
    --accent: #4d9bff;
    --accent-fg: #0b1016;
    --card: #1c2126;
    --focus: #7fb6ff;
    --faint: #8b929b;
    /* Darker than the page rather than lifted off it, so the bands recede and
       the reading area is the brightest thing on screen. Near black, keeping
       enough of the mark's slate to be a colour rather than an absence. */
    --chrome: #0d0b11;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* A column at least as tall as the window, so the footer is pushed to the
   bottom on a short page. It matters now that the footer is a coloured band:
   without this, a page with little on it ends in a band with a strip of the
   page's own colour beneath it. */
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }

/* Visible only once focused, which is what makes it useful to a keyboard
   user and invisible to everyone else. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--accent-fg);
  z-index: 10;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The download buttons use the accent as their background, and the focus
   color is the same accent, so an outline drawn over them would be invisible.
   The 2px offset happens to save it by putting the ring on the card behind,
   which is too fragile to rely on. A white ring between button and outline
   guarantees a visible edge whatever it sits on. */
.platforms a.primary:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--bg);
}

.banner {
  text-align: center;
  padding: 3rem 1.25rem 1rem;
}
.banner img { display: block; margin: 0 auto 0.5rem; }
h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 2.75rem);
  letter-spacing: -0.02em;
}
.tagline {
  margin: 0.35rem 0 0;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  color: var(--muted);
}

main { max-width: var(--page); margin: 0 auto; padding: 0 1.25rem 1rem; }

section { margin: 3rem 0; }
section:first-child { margin-top: 2rem; }

h2 {
  font-size: clamp(1.35rem, 4vw, 1.6rem);
  line-height: 1.25;
  margin: 0 0 0.75rem;
}
h3 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.5rem;
}

p { margin: 0 0 1rem; }

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

figure {
  margin: 1.75rem 0 0;
}
img { max-width: 100%; height: auto; }
figure img {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
figcaption {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Downloads ------------------------------------------------------------- */

.version { color: var(--muted); margin-bottom: 0.5rem; }

/* One panel per platform, side by side while they fit and stacked when they
   do not. Each is the same shape - name, the file most people want, what it
   needs, anything else it offers - so the three are compared by looking
   across rather than by reading down a page of headings. */
.platforms {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.platforms > li {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.25rem;
  /* A column, so the second file can be pinned to the bottom and the panels
     line up along their base however long the note above it runs. */
  display: flex;
  flex-direction: column;
}
.platforms h2 {
  font-size: 1.15rem;
  margin: 0 0 0.9rem;
}
/* Beside a heading the icon carries the muted ink, so it marks the panel
   without competing with the word. */
.platforms h2 .pf { color: var(--muted); }

/* The one most people want, made obvious without relying on color alone: it
   is also the largest text in the panel and carries a border. Full width of
   the panel, so the three line up with each other. */
.platforms a.primary {
  display: block;
  text-align: center;
  background: var(--accent);
  color: var(--accent-fg);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
}
.platforms a.primary:hover { text-decoration: underline; }
/* Linux offers two architectures and neither is the lesser one, so it carries
   two of these rather than a button and a footnote. The gap is the space a
   note would have taken, so the second reads as its own choice. */
.platforms a.primary ~ a.primary { margin-top: 1rem; }
/* The size the build writes into each link, kept lighter than the label so
   the button still reads as its name first. */
.kind { font-weight: 400; }

.platforms .note { margin: 0.75rem 0 0; max-width: none; }

.note {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 34rem;
}

.all-files { margin: 1.5rem 0 0; }

/* The command line, written out once per platform. A list rather than three
   paragraphs, because the reader wants exactly one of the three and is
   scanning for the logo rather than reading down. */
.invocations { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.invocations > li + li {
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}
.invocations h3 { margin: 0; font-size: 1rem; }
.invocations h3 .pf { color: var(--muted); }
.invocations .note { margin: 0.5rem 0 0; }

pre {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  margin: 0.75rem 0;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9375em;
}

ul.plain { padding-left: 1.25rem; }
ul.plain li { margin-bottom: 0.6rem; }

.footer {
  background: var(--chrome);
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding: 1.5rem 1.25rem 3rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9375rem;
}
.footer p { max-width: 44rem; margin: 0 auto; }

/* A list rather than links separated by punctuation, which some screen
   readers announce and which gives the keyboard nothing to structure on. */
.footer-links {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
}
.footer-links li { margin: 0; }

.copyright { color: var(--muted); }

/* Attributions for everything the site shows but did not make. Quieter and
   smaller than the licence line above them: they have to be here, and nobody
   arrives looking for them. */
.credits {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--faint);
}
.credits a { color: inherit; }
.credits a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Documentation --------------------------------------------------------- */

/* A sidebar beside the text on a wide screen, and above it on a narrow one.
   No JavaScript anywhere in here: the nav is ordinary markup repeated on each
   page, so it works with scripting off and needs no build step to assemble. */

.docs-layout {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.25rem 1rem;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .docs-layout {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    /* Clear of the header. The sidebar sat tight under the rule, which read
       as part of it rather than as part of the page. */
    padding-top: 2.5rem;
  }
  .docs-nav {
    position: sticky;
    top: 2.5rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    /* A shade off the page, enough to read as its own column without
       becoming a box competing with the words beside it. */
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 1rem 1.1rem;
  }
  /* The rule down the links would sit on the panel's own edge. */
  .docs-nav ul { border-left-color: var(--rule); }
}

/* The content column keeps the same measure as the front page. A line of
   prose gets no easier to read for having a sidebar next to it. */
.docs-body { min-width: 0; }
.docs-body section { margin: 2.5rem 0; }
.docs-body section:first-child { margin-top: 1rem; }

/* A mark on links that leave the site, so somebody knows before they press it
   rather than after. Only in the documentation body: the nav, the footer and
   the download buttons are chrome, where an arrow beside every entry is noise
   and the buttons already say what they do.

   A masked SVG rather than an arrow character, because a pseudo-element's
   text is announced by some screen readers, and "north east arrow" after
   every link is worse than no marker at all. `currentColor` keeps it the
   colour of the link it belongs to, in either colour scheme.

   Internal links are relative throughout, so a scheme is a reliable test for
   "somewhere else". */
.docs-body a[href^="http"]::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.3em;
  vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: var(--external-link) center / contain no-repeat;
  mask: var(--external-link) center / contain no-repeat;
}

.docs-nav h2 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 1.5rem 0 0.5rem;
}
.docs-nav h2:first-child { margin-top: 0; }

.docs-nav ul {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  border-left: 2px solid var(--rule);
}
.docs-nav li { margin: 0; }

.docs-nav a {
  display: block;
  padding: 0.3rem 0.75rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--fg);
}
.docs-nav a:hover { text-decoration: underline; }

/* The page you are on, marked by weight and a rule rather than by color
   alone, so it survives a color scheme nobody tested and reads without
   depending on hue. aria-current carries it for a screen reader. */
.docs-nav a[aria-current="page"] {
  font-weight: 600;
  color: var(--accent);
  border-left-color: var(--accent);
}

/* Where you are, above the heading. */
.crumbs {
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

/* On this page. Only worth having where a page is long enough to scroll.
   `.callout` is the same box around something worth stopping at, which is a
   different job from listing the headings - the two shared a class until the
   name stopped describing half of what wore it. */
.toc,
.callout {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.toc h2 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0.25rem 0; }

/* What to read next, at the foot of a page. */
.next {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding-top: 1.25rem;
}
.next p { margin: 0; }

/* A step-by-step, where the number carries meaning and should not be a
   bullet a reader has to count. */
.steps { padding-left: 1.25rem; }
.steps li { margin: 0 0 0.75rem; }

/* A short definition list, for "this field means this". */
.fields { margin: 0 0 1.5rem; }
.fields dt { font-weight: 600; margin-top: 0.9rem; }
.fields dd { margin: 0.2rem 0 0; color: var(--muted); }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}
th, td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th { font-weight: 600; }

/* What a row is *about* stays on one line. A table's first column names the
   thing each row describes - a config key, an option, a file - and those are
   full of characters a browser treats as a chance to wrap: `--secondary` broke
   after the two hyphens, and `Film (2019).en.ad.mp3` at every dot.

   Only the first column, and only code. Longer strings live in the column
   beside it - install paths, whole commands - and holding those to one line
   would push the column that names things off the side of the page. The
   longest first-column code on the site is 27 characters. */
.docs-body td:first-child code { white-space: nowrap; }

/* A heading for a run of rows, rather than for a column: the settings screen
   rules its own settings into groups, and a table listing them reads as one
   flat list without the same divisions.

   Deliberately not the column header's style. That one names what is in each
   column and belongs to the whole table; this one names the rows under it, so
   it is set in the small uppercase the interface uses for the same job, on a
   tint that separates one group from the last. */
th[colspan] {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--chrome);
  border-top: 1px solid var(--rule);
  padding-top: 0.6rem;
  padding-bottom: 0.4rem;
}

/* Inline code only. `pre` already draws its own panel above, and a second
   background and padding inside it stacks two boxes on one another. */
.docs-body :not(pre) > code {
  background: var(--card);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

/* Site header and navigation -------------------------------------------- */

/* The bar itself spans the window, so its rule reaches both edges the way the
   footer's always has. The measure lives on the inner element instead. */
.site-header {
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--page);
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

/* The brand is a single image now. The type properties below are still worth
   keeping: if the lockup fails to load, the alt text is what renders here, and
   it should look like the wordmark it stands in for rather than a stray link. */
.brand {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--fg);
  text-decoration: none;
}

/* Height is the fixed dimension and the width follows, so the lockup keeps its
   proportions if it is ever redrawn at a different length. */
.brand img {
  display: block;
  height: 32px;
  width: auto;
}

.site-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  padding: 0.25rem 0;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { text-decoration: underline; }

/* Marked by weight and a rule as well as color, so it does not depend on
   hue - the same rule the docs sidebar follows. */
.site-nav a[aria-current="page"] {
  font-weight: 600;
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* An ordinary page: the same measure the front page has always used. */
.page { max-width: var(--page); margin: 0 auto; padding: 1rem 1.25rem; }
.page h1 { margin: 1.5rem 0 1rem; }

/* Home ------------------------------------------------------------------ */

.hero { margin: 2.5rem 0 3.5rem; text-align: center; }
.hero h1 {
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}
.lede {
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
  color: var(--muted);
  margin: 0 auto 1.75rem;
  /* Wide enough that four short sentences do not become eight lines. Still
     short of the page's own measure, because this is centered and centered
     text is harder to track back from than left-aligned. */
  max-width: 46rem;
}

.cta { margin: 0; }
.button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
}
.button:hover { text-decoration: underline; }
/* The accent is both the button's background and the focus color, so an
   outline drawn on it would be invisible. A ring of page color between the
   two guarantees an edge, the same fix the download links use. */
.button:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--bg);
}
.cta-note {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* The way to everything else, once the button has narrowed itself to one
   platform. Hidden until then, because with the generic button showing it
   would point at the page that button already goes to. */
.cta-others {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9375rem;
}
[hidden] { display: none !important; }

/* Under a full-width picture, not beside a column of text: centered, so it
   reads as belonging to the image above rather than to the paragraphs. */
figure.wide figcaption { text-align: center; }

/* Screenshots ----------------------------------------------------------- */

/* Thumbnails rather than the captures at full size, grouped by the part of
   TinePlayer they show. The page was eight full-size pictures and a little
   over two megabytes of them, most of it spent on detail nobody can read at
   that scale - so these are what is displayed, and the full file is what
   choosing one opens. */
.shots {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.shots > li { margin: 0; }
.shots figure { margin: 0; }
/* The link is the picture, so it needs no underline and no color of its own,
   and the focus ring should follow the image rather than a text baseline. */
.shots figure a {
  display: block;
  border-radius: 8px;
}
.shots figure img {
  width: 100%;
  /* Held to a shape so a wide capture and a narrow one still make a tidy row.
     `contain` rather than `cover`, because cropping a screenshot to fit hides
     the very thing it is there to show. */
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: top;
  background: var(--card);
}
.shots figure a:hover img { border-color: var(--accent); }

/* Enlarged ---------------------------------------------------------------
   Built by app.js and only when the browser has <dialog>. With no script the
   thumbnail is an ordinary link to the full image, which is a working answer
   rather than a broken one. */
.lightbox {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg);
  padding: 0;
  max-width: min(92vw, 76rem);
  max-height: 92vh;
  overflow: auto;
}
.lightbox::backdrop { background: rgb(0 0 0 / 0.72); }
.lightbox img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0;
}
.lightbox figcaption {
  margin: 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.9375rem;
  color: var(--muted);
}
.lightbox .close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 50%;
}
.lightbox .close:hover { border-color: var(--accent); }


/* Navigation, collapsing ------------------------------------------------- */

/* The top menu exists twice in the markup - see `top_nav` in build.py for
   why - and exactly one of them is ever displayed. */
.wide-only { display: none; }
.narrow-only { display: block; }

@media (min-width: 46rem) {
  .wide-only { display: flex; }
  .narrow-only { display: none; }
}

/* The documentation sidebar swaps at the width its own layout appears, which
   is not the width the site menu swaps at. Spelled out per element because
   one is a list that wants flex and the other a block of disclosures. */
.docs-wide { display: none; }
.docs-narrow { display: block; }

@media (min-width: 60rem) {
  .docs-wide { display: block; }
  .docs-narrow { display: none; }
}

/* Below the width where the sidebar has a column of its own, the menu is a
   button floating in the corner and the list opens over the page.

   A disclosure sitting at the top of the article was findable only by
   scrolling back up to it, which on a long page means it may as well not be
   there. This stays put. */
.docs-menu > summary {
  list-style: none;
  cursor: pointer;
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 30;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.docs-menu > summary::-webkit-details-marker { display: none; }

/* Light on the accent. Gray here would be gray on blue, which is the one
   place in this palette that does not carry enough contrast. */
.docs-menu > summary .burger,
.docs-menu > summary .burger::before,
.docs-menu > summary .burger::after { background: var(--accent-fg); }
.docs-menu[open] > summary .burger { background: transparent; }
.docs-menu[open] > summary .burger::before { top: 0; transform: rotate(45deg); }
.docs-menu[open] > summary .burger::after { top: 0; transform: rotate(-45deg); }

/* A sheet across the bottom half of the screen rather than the whole of it.
   Enough to navigate by, while leaving the page you are reading visible
   above it - so opening the menu is not the same as leaving the page. */
.docs-menu[open] > .docs-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  height: 50vh;
  /* The viewport unit that accounts for a browser's own retracting toolbars,
     where it is understood; the line above is what everything else uses. */
  height: 50dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card);
  border-top: 1px solid var(--rule);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
  padding: 1.25rem 1.25rem 2rem;
}
.docs-menu[open] > .docs-panel .docs-group > summary { font-size: 0.875rem; }
.docs-menu[open] > .docs-panel a { padding: 0.5rem 0.75rem; }

/* Open, the button lifts to sit just above the sheet, so the control that
   closes it is not buried under the thing it opened. */
.docs-menu[open] > summary {
  bottom: calc(50vh + 1rem);
  bottom: calc(50dvh + 1rem);
}

/* Room at the foot of a page so the button never sits over the last line or
   the footer links. */
@media (max-width: 59.999rem) {
  .docs-layout { padding-bottom: 5.5rem; }
}

.site-header-inner { justify-content: space-between; }
.site-header-inner nav { margin-left: auto; }

/* `flex` rather than `inline-flex`: an inline summary sits on the text
   baseline inside the details, and the line-height strut around it is taller
   than the three lines are. That left the burger sitting low in the bar while
   the wordmark beside it was centred. A block-level box has no baseline to sit
   on, so the details is exactly as tall as the summary and the header's own
   `align-items: center` puts it where it belongs. */
.menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.4rem;
  margin: -0.4rem;
  display: flex;
  align-items: center;
  border-radius: 6px;
}
.menu > summary::-webkit-details-marker { display: none; }

/* Three lines, drawn rather than lettered. A text glyph sat on the baseline
   and changed size with the font; these are the same three lines at any
   size, and they take the page's own ink so they work in both schemes. */
.burger {
  display: block;
  width: 1.375rem;
  height: 2px;
  background: var(--muted);
  position: relative;
}
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--muted);
}
.burger::before { top: -0.4rem; }
.burger::after { top: 0.4rem; }

/* Open, the three lines become a cross, so the control says what pressing it
   does now rather than what it did a moment ago. */
.menu[open] > summary .burger { background: transparent; }
.menu[open] > summary .burger::before { top: 0; transform: rotate(45deg); }
.menu[open] > summary .burger::after { top: 0; transform: rotate(-45deg); }

/* Open, the list drops below the header as a panel rather than pushing the
   brand around. */
.menu[open] > .site-nav {
  position: absolute;
  right: 1.25rem;
  left: 1.25rem;
  margin-top: 0.75rem;
  padding: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  flex-direction: column;
  gap: 0;
  z-index: 20;
}
.menu[open] > .site-nav a { padding: 0.6rem 0.75rem; }

/* Cards ------------------------------------------------------------------ */

/* Used by Features and anywhere else a list of things reads better as things
   than as bullets. Fits as many as will go without ever being narrower than
   a readable measure. */
.cards {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.cards li {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}
.cards h3 {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
}
.cards p { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.cards a { font-weight: 600; }

/* A card whose whole surface is the link. */
.cards a.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.cards a.card-link:hover h3 { text-decoration: underline; }

/* Prose inside a wide page ------------------------------------------------ */

/* The page fills the full measure; a paragraph inside it should not, because
   a line that long is hard to track back from. Sections that are only text
   carry this; grids and figures fill. */
/* Wide enough not to look pinched against a full-width figure beside it,
   short of the page's own measure so a line is still trackable. Around 100
   characters at the body size, which is the top of what is comfortable. */
.measure { max-width: 56rem; }

/* Home ------------------------------------------------------------------- */

/* Text beside a picture on a wide screen, stacked on a narrow one.
   Both columns start at the same line. Centering them instead leaves the
   heading floating at a different height in each section, depending on how
   much text happens to sit under it, so the eye finds no consistent place to
   start reading. `h2` carries no top margin, so this lines the heading up
   with the top edge of the picture. */
.split {
  display: grid;
  gap: 2rem;
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .split { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .split.reverse > :first-child { order: 2; }
}
.split figure { margin: 0; }

/* Documentation ---------------------------------------------------------- */

/* Each category opens and closes on its own, and the one holding the page
   you are on starts open. On a narrow screen that leaves eight headings and
   the few links around you, rather than thirty. */

.docs-group > summary {
  cursor: pointer;
  padding: 0.45rem 0;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.docs-group[open] > summary { color: var(--fg); }
.docs-group > ul { margin-bottom: 0.75rem; }

/* Long words in a narrow column - a file path, a setting name - should wrap
   rather than push the column wider than the screen. */
.docs-body { overflow-wrap: break-word; }
.docs-body table { display: block; overflow-x: auto; }

@media (min-width: 48rem) {
  .docs-body table { display: table; }
}

/* Added by app.js ------------------------------------------------------- */

/* Neither of these exists without JavaScript, which is why they are styled
   here rather than being markup somebody has to keep correct. */

.docs-filter {
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.docs-filter::placeholder { color: var(--muted); }

/* The button sits in the top right of the block it copies. The block scrolls
   sideways under it when a line is long, so the button keeps a patch of
   background behind it rather than letting text run beneath. */
.code { position: relative; }
.code > pre { margin: 0.75rem 0; }

.copy {
  position: absolute;
  top: 1.1rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
}
.copy:hover { color: var(--fg); }
.copy.copied { color: var(--accent); border-color: var(--accent); }


/* Platform icons -------------------------------------------------------- */

/* Drawn as masks rather than images, so one file serves the white icon on a
   blue button and the ink-colored one beside a heading. An <img> would carry
   its own color and need a second copy for the other background. */
.pf {
  display: inline-block;
  /* Sized in em, so each one scales with whatever it sits beside rather than
     being one fixed size that suits the button and not the heading. */
  width: 1.65em;
  height: 1.65em;
  vertical-align: -0.4em;
  margin-right: 0.45em;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.pf-windows {
  -webkit-mask-image: url(images/platform-windows.svg);
  mask-image: url(images/platform-windows.svg);
}
.pf-macos {
  -webkit-mask-image: url(images/platform-apple.svg);
  mask-image: url(images/platform-apple.svg);
}
.pf-linux {
  -webkit-mask-image: url(images/platform-linux.svg);
  mask-image: url(images/platform-linux.svg);
}