/* Generated by tools/build-site.py -- edit that, not this.

   The website's navigation. It is a SEPARATE stylesheet from styles.css on purpose: that one is
   compiled into PasteJump.chm, where the viewer supplies its own contents tree and there is no room
   for a second one. Nothing here reaches the .chm, because this file is only ever written into the
   staged site. */

* { box-sizing: border-box; }

body {
  margin: 0;
  max-width: none;              /* styles.css caps the measure at 1000px; the grid caps it now */
  display: grid;
  grid-template-columns: 16rem minmax(0, 60rem);
  justify-content: center;      /* centres the sidebar and the text TOGETHER, not the text alone */
  min-height: 100vh;
}

main { padding: 1.5rem 2.5rem 4rem; min-width: 0; }

/* The landing page brings its own padding: it is built from full-bleed <section>s each holding a
   .wrap capped at 1000px, so main's padding would be a second helping and would inset the sections'
   own backgrounds away from the column edge. Its sections span the column rather than the viewport
   now, which is what having a sidebar means. */
main.landing { padding: 0; }
main.landing section, main.landing header, main.landing footer { border-radius: 0; }

nav.site-toc {
  background: #f6f8fa; border-right: 1px solid #d1d9e0;
  padding: 1.5rem 1.25rem;
  position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto;
}

nav.site-toc .brand {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.2rem; font-weight: 700; text-decoration: none; color: #1f2328;
}
nav.site-toc .brand img { flex: none; width: 32px; height: 32px; }
nav.site-toc .brand b { font-weight: inherit; }
nav.site-toc .brand span {
  display: block; font-size: .78rem; font-weight: 400; color: #59636e;
}

nav.site-toc ol { list-style: none; margin: 1.25rem 0 0; padding: 0; }
nav.site-toc li { margin: .1rem 0; }
nav.site-toc a {
  display: block; padding: .35rem .6rem; border-radius: 6px;
  color: #1f2328; text-decoration: none; font-size: .93rem;
}
nav.site-toc a:hover { background: #ffffff; }

nav.site-toc .away { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #d1d9e0; }
nav.site-toc .away a { color: #2f6feb; font-size: .9rem; padding-left: .6rem; }

/* LAST in the file deliberately. `.away a` above sets its own colour at the same specificity as this
   rule, so with this one written earlier the later rule won and About & contact rendered as a solid
   blue bar with blue text in it -- an invisible label on a visible highlight. Ordering settles it
   for both lists without either needing an !important or a manufactured extra selector. */
nav.site-toc a[aria-current="page"] { background: #2f6feb; color: #fff; font-weight: 600; }

/* One column on a narrow screen, the sidebar above the text. Matches what the AltTab site does at
   the same breakpoint. */
@media (max-width: 62rem) {
  body { grid-template-columns: 1fr; }
  nav.site-toc {
    position: static; max-height: none;
    border-right: 0; border-bottom: 1px solid #d1d9e0;
  }
  main { padding: 1.25rem 1.25rem 3rem; }
}

/* Shots at full size on click.

   The screenshots are 1260px wide and the column is 1000px, and the theme gallery puts two of them
   side by side at about 440px - so a window shot is downscaled to a third of its size and its text
   becomes mush. Reported as "not much clear... and not able to open as well". The page cannot be
   widened to 1260px without ruining the measure for reading, so the answer is to let a reader open
   one at 1:1 instead. SITE ONLY: none of this reaches docs/help, so the .chm is untouched. */
.shot img, .shots 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, which is what a 1260px shot needs on a small screen. */
  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; }