/* The manual's own stylesheet.

   Deliberately not the app's. The app is a working surface — dense,
   chromed, scanned all day; the manual is a thing you read once and
   come back to twice. What the two share is the world DESIGN.md sets
   out: white sheets on a cool grey page, strawberry as the one accent,
   Source Sans for interface and Source Serif for anything that is
   prose. Sharing the colours and the type without sharing the layout is
   what makes the manual feel like part of Jelly and not like Jelly.

   The two faces are the app's own, served from /static/fonts by the
   fingerprinting handler, which also answers the bare unhashed name.
   The manual is generated at build time and cannot know a hash, so it
   asks for the bare name and takes the no-cache that comes with it.

   No script runs on these pages. The contents panel is a <details>, the
   crop on a screenshot was computed when the page was generated, and a
   heading's anchor is an ordinary link.

   The palette below is a copy of jam.css's, under the manual's own
   names, and palette_test.go holds the two copies equal. Three values
   are the manual's own and are not held: --m-line-strong is lighter
   than the app's (a rule in prose, not a control's edge),
   --m-accent-soft and --m-note are a shade paler (a wash behind
   reading, not behind a button). Change one of those knowingly; change
   any other here and in jam.css together. */

@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/sourcesans3-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/static/fonts/sourcesans3-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/sourceserif4-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/static/fonts/sourceserif4-italic.woff2") format("woff2"); }

:root {
  color-scheme: light dark;

  --m-page: hsl(240 5% 98.5%);
  --m-sheet: #fff;
  --m-sheet-2: hsl(240 5% 95.5%);
  --m-line: hsl(240 5% 90%);
  --m-line-strong: hsl(240 5% 78%);
  --m-ink: hsl(240 5% 15%);
  --m-muted: hsl(240 5% 38%);
  --m-faint: hsl(240 5% 48%);

  --m-accent: hsl(342 75% 55%);
  --m-accent-strong: hsl(342 70% 46%);
  --m-accent-soft: hsl(342 95% 96%);

  --m-note: hsl(205 90% 95%);
  --m-note-line: hsl(205 80% 80%);
  --m-note-ink: hsl(205 88% 22%);
  --m-warn: hsl(45 90% 94%);
  --m-warn-line: hsl(38 80% 70%);
  --m-warn-ink: hsl(30 85% 26%);
  --m-stop: hsl(2 90% 96%);
  --m-stop-line: hsl(2 75% 78%);
  --m-stop-ink: hsl(2 75% 30%);

  --m-sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --m-serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --m-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --m-radius: 8px;
  --m-shadow: 0 1px 2px hsl(240 5% 20% / 0.05), 0 4px 16px hsl(240 5% 20% / 0.06);
  --m-measure: 40rem;
  --m-nav: 15rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --m-page: hsl(240 5% 6%);
    --m-sheet: hsl(240 5% 12%);
    --m-sheet-2: hsl(240 5% 16%);
    --m-line: hsl(240 5% 19%);
    --m-line-strong: hsl(240 5% 32%);
    --m-ink: hsl(240 5% 95%);
    --m-muted: hsl(240 5% 72%);
    --m-faint: hsl(240 5% 62%);

    --m-accent: hsl(342 80% 68%);
    --m-accent-strong: hsl(342 85% 76%);
    --m-accent-soft: hsl(342 40% 16%);

    --m-note: hsl(205 45% 15%);
    --m-note-line: hsl(205 40% 32%);
    --m-note-ink: hsl(205 70% 86%);
    --m-warn: hsl(38 40% 15%);
    --m-warn-line: hsl(38 40% 34%);
    --m-warn-ink: hsl(42 80% 82%);
    --m-stop: hsl(2 40% 15%);
    --m-stop-line: hsl(2 40% 34%);
    --m-stop-ink: hsl(2 80% 84%);

    --m-shadow: 0 1px 2px hsl(0 0% 0% / 0.4), 0 4px 16px hsl(0 0% 0% / 0.3);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scrollbar-gutter: stable; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--m-page);
  color: var(--m-ink);
  font-family: var(--m-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* ── Chrome ─────────────────────────────────────────────────────── */

.manual-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 101;
  padding: 0.625rem 1rem;
  background: var(--m-accent);
  color: #fff;
  border-radius: 0 0 var(--m-radius) 0;
  text-decoration: none;
}
.manual-skip:focus { left: 0; }

/* The header is the one the API reference has too: docs-header.css,
   from internal/jam/docheader. What is the manual's own here is the
   Contents link in it. */

/* The contents live at the foot of the page on a narrow screen, so the
   link to them is only there. On a wide one they are the left column
   and the link would point at something already in view. */
.manual-contents-link { display: none; }

/* The page is FIRST in the source and the contents come after it, so a
   narrow screen and a screen reader both meet the words before the
   index. Grid placement puts the contents back on the left when there
   is room for them, which is the whole reason to use grid here. */
.manual-frame {
  display: grid;
  grid-template-columns: var(--m-nav) minmax(0, 1fr);
  gap: 2.5rem;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}
.manual-nav { grid-column: 1; grid-row: 1; }
.manual-main { grid-column: 2; grid-row: 1; }

/* ── Contents ───────────────────────────────────────────────────── */

.manual-nav {
  align-self: start;
  position: sticky;
  top: 4.25rem;
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  padding: 1.75rem 0;
  font-size: 0.875rem;
}

.manual-nav-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m-faint);
  margin: 0 0 0.5rem;
  padding: 0 0.625rem;
}

.manual-nav ul { list-style: none; margin: 0; padding: 0; }
.manual-nav ul ul { margin: 0.125rem 0 0.5rem 0.75rem; border-left: 1px solid var(--m-line); }
.manual-nav li { margin: 0; }

.manual-nav a,
.manual-nav-group {
  display: block;
  padding: 0.25rem 0.625rem;
  border-radius: 5px;
  color: var(--m-muted);
  text-decoration: none;
}
.manual-nav > ul > li > a { color: var(--m-ink); font-weight: 600; margin-top: 1rem; }
.manual-nav > ul > li:first-child > a { margin-top: 0; }
.manual-nav a:hover { background: var(--m-sheet-2); color: var(--m-ink); }
.manual-nav a[aria-current="page"] {
  background: var(--m-accent-soft);
  color: var(--m-accent-strong);
  font-weight: 600;
}
.manual-nav-group {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m-faint);
  margin-top: 0.5rem;
}

/* ── The page ───────────────────────────────────────────────────── */

.manual-main { min-width: 0; padding: 2.5rem 0 0; }
.manual-article { max-width: var(--m-measure); }

.manual-crumbs { margin-bottom: 1.25rem; font-size: 0.8125rem; }
.manual-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--m-faint);
}
.manual-crumbs li + li::before { content: "/"; margin-right: 0.375rem; color: var(--m-line-strong); }
.manual-crumbs a { color: var(--m-faint); text-decoration: none; }
.manual-crumbs a:hover { color: var(--m-accent); text-decoration: underline; }
.manual-crumbs [aria-current="page"] { color: var(--m-muted); }

.manual-article h1 {
  font-family: var(--m-serif);
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 1.25rem;
}

.manual-article h2 {
  font-family: var(--m-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 3rem 0 0.875rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--m-line);
  text-wrap: balance;
}
.manual-article h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 2.25rem 0 0.625rem;
  text-wrap: balance;
}
.manual-article h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--m-muted);
  margin: 1.75rem 0 0.5rem;
}

.manual-anchor { color: inherit; text-decoration: none; }
.manual-anchor::after {
  content: "#";
  margin-left: 0.4em;
  font-family: var(--m-sans);
  font-weight: 400;
  color: var(--m-accent);
  opacity: 0;
}
@media (any-pointer: fine) {
  .manual-anchor:hover::after, .manual-anchor:focus-visible::after { opacity: 1; }
}
.manual-anchor:focus-visible::after { opacity: 1; }

.manual-article p,
.manual-article li {
  font-family: var(--m-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.manual-article p { margin: 0 0 1.125rem; }
.manual-article ul, .manual-article ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.manual-article li { margin-bottom: 0.4rem; }
.manual-article li > ul, .manual-article li > ol { margin: 0.4rem 0 0.5rem; }

.manual-article a { color: var(--m-accent-strong); text-underline-offset: 2px; }
.manual-article a:hover { color: var(--m-accent); }

.manual-article strong { font-weight: 700; }
.manual-article hr { border: 0; border-top: 1px solid var(--m-line); margin: 2.5rem 0; }

.manual-article code {
  font-family: var(--m-mono);
  font-size: 0.875em;
  background: var(--m-sheet-2);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
.manual-article pre {
  background: var(--m-sheet);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  padding: 1rem 1.125rem;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  line-height: 1.5;
}
.manual-article pre code { background: none; padding: 0; font-size: 0.8125rem; }

/* A key on a keyboard, which is a different thing from a fragment of
   code and should not look like one. */
.manual-article kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.1em 0.4em;
  font-family: var(--m-sans);
  font-size: 0.8125em;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--m-ink);
  background: var(--m-sheet);
  border: 1px solid var(--m-line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
}
.manual-article kbd + kbd { margin-left: 0.15em; }

.manual-article blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--m-line-strong);
  color: var(--m-muted);
  font-style: italic;
}
.manual-article blockquote p:last-child { margin-bottom: 0; }

/* Tables scroll inside their own box rather than widening the page. */
.manual-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}
.manual-article th, .manual-article td {
  border-bottom: 1px solid var(--m-line);
  padding: 0.5rem 0.75rem 0.5rem 0;
  text-align: left;
  vertical-align: top;
}
.manual-article th { font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--m-muted); }

/* ── Callouts ───────────────────────────────────────────────────── */

.manual-callout {
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--m-note-line);
  border-radius: var(--m-radius);
  background: var(--m-note);
  color: var(--m-note-ink);
}
.manual-callout p:last-child { margin-bottom: 0; }
.manual-callout a { color: inherit; }
.manual-callout-kind {
  font-family: var(--m-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.375rem !important;
  opacity: 0.85;
}
.manual-callout--warning, .manual-callout--important {
  background: var(--m-warn); border-color: var(--m-warn-line); color: var(--m-warn-ink);
}
.manual-callout--caution {
  background: var(--m-stop); border-color: var(--m-stop-line); color: var(--m-stop-ink);
}

/* ── Screenshots ────────────────────────────────────────────────── */

.manual-shot { margin: 1.75rem 0 2rem; }
.manual-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  background: var(--m-sheet);
}
.manual-shot figcaption {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--m-faint);
}

/* A crop shows one band of a taller screenshot. The two percentages
   were worked out from the file itself when the page was generated. */
.manual-shot--cropped img {
  object-view-box: inset(var(--manual-crop-top) 0 calc(100% - var(--manual-crop-top) - var(--manual-crop-height)) 0);
}

/* A torn edge says "this is a piece of a longer screen", which is
   exactly what a crop is. It replaces the border, so it also drops it. */
.manual-shot--torn img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  --tear: polygon(0% 1%, 4% 0.3%, 9% 1.1%, 14% 0.4%, 19% 1%, 24% 0.4%, 30% 1.1%, 36% 0.3%,
    42% 0.9%, 48% 0.4%, 54% 1%, 60% 0.3%, 66% 0.9%, 72% 0.4%, 78% 1.1%, 84% 0.3%, 90% 0.9%, 95% 0.4%, 100% 1%,
    100% 99%, 95% 99.6%, 90% 99.1%, 84% 99.7%, 78% 98.9%, 72% 99.6%, 66% 99.1%, 60% 99.7%,
    54% 99%, 48% 99.6%, 42% 99.1%, 36% 99.7%, 30% 98.9%, 24% 99.6%, 19% 99%, 14% 99.6%, 9% 98.9%, 4% 99.7%, 0% 99%);
  clip-path: var(--tear);
  filter: drop-shadow(0 2px 8px hsl(240 5% 20% / 0.18));
}

/* ── Cards, on the section index pages ──────────────────────────── */

.manual-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 1.75rem 0 2rem;
}
.manual-card {
  display: block;
  padding: 1.125rem 1.25rem;
  background: var(--m-sheet);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  text-decoration: none;
  color: inherit;
}
.manual-card:hover { border-color: var(--m-accent); box-shadow: var(--m-shadow); }
.manual-card strong { display: block; font-size: 1rem; color: var(--m-accent-strong); margin-bottom: 0.25rem; }
.manual-card span {
  display: block;
  font-family: var(--m-serif);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--m-muted);
}

/* ── Buttons and the pager ──────────────────────────────────────── */

.manual-next {
  display: inline-block;
  margin: 0.5rem 0 0.5rem;
  padding: 0.5rem 1.125rem;
  background: var(--m-accent);
  color: #fff !important;
  border-radius: 6px;
  font-family: var(--m-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.manual-next::after { content: " \2192"; }
.manual-next:hover { background: var(--m-accent-strong); color: #fff !important; }

.manual-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--m-measure);
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--m-line);
}
.manual-pager a {
  flex: 1 1 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  background: var(--m-sheet);
  color: var(--m-ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
}
.manual-pager a:hover { border-color: var(--m-accent); color: var(--m-accent-strong); }
.manual-pager span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m-faint);
  margin-bottom: 0.125rem;
}
.manual-pager-next { text-align: right; }

:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--m-accent-soft); color: var(--m-accent-strong); }

/* ── Search ─────────────────────────────────────────────────────── */

/* The box above the contents, and the same box filled in at the top
   of the results page. A GET form to /manual/search: no script. */
.manual-search { margin: 0 0 1.5rem; }
.manual-search label { display: block; }
.manual-search-row { display: flex; gap: 0.375rem; padding: 0 0.625rem; }
.manual-search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--m-ink);
  background: var(--m-sheet);
  border: 1px solid var(--m-line);
  border-radius: 5px;
  padding: 0.3125rem 0.5rem;
}
.manual-search button {
  font: inherit;
  font-weight: 600;
  color: var(--m-ink);
  background: var(--m-sheet-2);
  border: 1px solid var(--m-line);
  border-radius: 5px;
  padding: 0.3125rem 0.75rem;
  cursor: pointer;
}
.manual-search button:hover { color: var(--m-accent-strong); }

.manual-search-page { margin: 0 0 1.75rem; }
.manual-search-page label { font-weight: 600; margin-bottom: 0.375rem; }
.manual-search-page .manual-search-row { padding: 0; max-width: 28rem; }
.manual-search-page input,
.manual-search-page button { padding: 0.5rem 0.75rem; }

.manual-search-count,
.manual-search-none { color: var(--m-muted); }
.manual-article .manual-results { list-style: none; padding: 0; }
.manual-article .manual-results li { margin: 0 0 1.25rem; }
.manual-article .manual-results li > a { font-weight: 600; font-size: 1.0625rem; }
.manual-article .manual-results p { margin: 0.25rem 0 0; color: var(--m-muted); font-size: 0.9375rem; }
.manual-results mark { background: var(--m-accent-soft); color: var(--m-accent-strong); border-radius: 2px; }

/* ── Narrow ─────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .manual-frame { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 3rem; }
  /* Source order, which is page then contents. */
  .manual-nav, .manual-main { grid-column: 1; }
  .manual-main { grid-row: 1; }
  .manual-nav {
    grid-row: 2;
    position: static;
    max-height: none;
    margin-top: 3rem;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--m-line);
  }
  .manual-contents-link { display: inline; }
  .manual-main { padding-top: 1.75rem; }
  .manual-article h1 { font-size: 1.75rem; }
  .manual-article h2 { font-size: 1.3125rem; margin-top: 2.25rem; }
  .manual-pager { flex-direction: column; }
}

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