/* KeyPressOSD website. Authored, not produced from markdown - see build-manual.py.
   The layout is shared with alttab.sourceforge.io and pastejump.sourceforge.io on purpose. */
:root {
  color-scheme: light dark;
  --bg: #ffffff; --fg: #1f2328; --muted: #59636e; --line: #d1d9e0;
  --accent: #0969da; --code-bg: #f6f8fa; --quote: #59636e; --sidebar: #f6f8fa;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117; --fg: #e6edf3; --muted: #9198a1; --line: #3d444d;
    --accent: #4493f8; --code-bg: #161b22; --quote: #9198a1; --sidebar: #161b22;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
/* The WHOLE shell is centred - contents sidebar and text together - not just the text within its column.
   `1fr` for the second track would make it eat every spare pixel and pin the sidebar to the left edge
   however wide the monitor is; capping that track and letting justify-content centre the pair is what
   moves the block. minmax(0, ...) rather than a bare 58rem so the track can shrink between 60rem and
   75rem instead of overflowing. Below 60rem the media query at the foot collapses to one column. */
body {
  font: 16px/1.65 -apple-system, "Segoe UI", system-ui, sans-serif;
  display: grid; grid-template-columns: 17rem minmax(0, 58rem);
  justify-content: center; min-height: 100vh;
}
/* The sidebar is the contents, which is TOPICS - the same reading order as the .chm's tree. */
nav.toc {
  background: var(--sidebar); border-right: 1px solid var(--line);
  padding: 1.5rem 1.25rem; position: sticky; top: 0; align-self: start; max-height: 100vh;
  overflow-y: auto;
}
/* The SHIPPING application's own icon beside the name, and the .ico rather than a PNG scaled from the
   256px art: the file carries 16, 32 and 48 pixel frames, so a browser asked for 32 draws that frame
   1:1 with no resampling. One asset serves the favicon and this.
   Flex rather than an inline image so the icon centres against the two lines of text instead of sitting
   on the first one's baseline; the <b> keeps the name and the tagline stacked, since as a flex item it
   is blockified and the span inside it is already display:block. */
nav.toc .brand {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.3rem; font-weight: 700; text-decoration: none; color: var(--fg);
}
nav.toc .brand img { flex: none; width: 32px; height: 32px; border: 0; border-radius: 0; }
nav.toc .brand b { font-weight: inherit; }
nav.toc .brand span { display: block; font-size: .8rem; font-weight: 400; color: var(--muted); }
nav.toc ol { list-style: none; margin: 1.25rem 0 0; padding: 0; }
nav.toc li { margin: .1rem 0; }
nav.toc a {
  display: block; padding: .35rem .6rem; border-radius: 6px;
  color: var(--fg); text-decoration: none; font-size: .95rem;
}
nav.toc a:hover { background: var(--bg); }
nav.toc a[aria-current="page"] { background: var(--accent); color: #fff; font-weight: 600; }
nav.toc .away { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
nav.toc .away a { color: var(--accent); font-size: .9rem; padding-left: 0; }

/* The measure is the grid track's, so no max-width here: capping it in both places centres the text
   inside a column that is itself hard against the left edge. */
main { padding: 2.5rem 3rem 4rem; min-width: 0; }
h1, h2, h3 { line-height: 1.25; margin: 2rem 0 .75rem; }
h1 { font-size: 2rem; margin-top: 0; letter-spacing: -.02em; }
h2 { font-size: 1.45rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
h3 { font-size: 1.15rem; }
p, ul, ol, table, blockquote, pre { margin: 0 0 1rem; }
a { color: var(--accent); }
/* Images are pictures of a window or of the panel: shown at their own size, never stretched past it. */
img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
/* KeyPressOSD's own: the tour is a <video>, which needs the same two rules an image gets or it renders
   at its intrinsic size and overflows the column on a phone. */
video.shot { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px;
             display: block; margin: 0 0 1rem; }
/* KeyPressOSD's own: a figure's caption is the italic paragraph the manual writes under it, and it
   should read as a caption rather than as body text. */
main p > em:only-child { color: var(--muted); font-size: .92rem; }
code { background: var(--code-bg); padding: .15em .35em; border-radius: 4px; font-size: .9em;
       font-family: ui-monospace, Consolas, monospace; }
pre { background: var(--code-bg); padding: .9rem 1rem; border-radius: 6px; overflow-x: auto; }
pre code { background: none; padding: 0; }
blockquote { margin-left: 0; padding: .1rem 1rem; border-left: 3px solid var(--line); color: var(--quote); }
/* Wide tables scroll inside themselves rather than making the page scroll sideways. */
.table-wrap { overflow-x: auto; margin: 0 0 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { border: 1px solid var(--line); padding: .45rem .7rem; text-align: left; vertical-align: top; }
th { background: var(--code-bg); }
footer.stamp { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line);
               color: var(--muted); font-size: .85rem; }

@media (max-width: 60rem) {
  body { grid-template-columns: 1fr; }
  nav.toc { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
  main { padding: 1.75rem 1.25rem 3rem; }
}

/* Figures at full size on click - the same lightbox, ids and classes as pastejump.sourceforge.io.

   The manual's figures are sized for the .chm's help window and the column here is 58rem, so a figure
   can be drawn smaller than it was captured, and the settings windows' text goes soft when it is. The
   page cannot be widened without ruining the measure for reading, so a reader opens one at 1:1 instead.
   SITE ONLY: site.css and site-shots.js never reach docs/help, so the .chm is untouched. */
p.figure img { cursor: zoom-in; }

#shotbox {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: rgba(13, 17, 23, .88);
  overflow: auto; padding: 2rem; text-align: center;
}
#shotbox.open { display: block; }
#shotbox img {
  /* No max-width: the whole point is the pixels as captured. The container scrolls when the image
     is larger than the window. */
  max-width: none; background: #fff;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .5);
}
#shotbox figcaption {
  color: #e6edf3; font-size: .95rem; margin: .9rem auto 0; max-width: 60rem;
}
#shotbox .hint { color: #8b949e; font-size: .85rem; margin-top: .35rem; }
#shotbox button {
  position: fixed; top: .75rem; right: 1rem;
  background: #21262d; color: #e6edf3; border: 1px solid #484f58;
  border-radius: .35rem; padding: .35rem .7rem; font: inherit; cursor: pointer;
}
body.shotbox-open { overflow: hidden; }