/* Generated by Scripts/MakeSite.py - edit that, not this.
 *
 * Sits on top of help.css, which styles the body of every topic and is shared with the CHM. This
 * file adds only the shell a page on the web needs and a page in a help viewer does not: the
 * contents down the left, and a column that does not run the full width of a monitor. The colours
 * are help.css's own, so the shell and the content do not look like two different products.
 *
 * **The layout is AltTab's**, deliberately. A help viewer supplies a contents tree of its own; a
 * web page has to carry one, and a top bar with a handful of links is not it - on a topic there is
 * then no way to see where you are or step to the next page, and that is the shape this started as.
 */

* { box-sizing: border-box; }

/* The WHOLE shell is centred - sidebar and text together - not just the text inside its column.
 * `1fr`... no: minmax(0, 58rem) for the second track so it can shrink between 60rem and 75rem
 * instead of overflowing, with justify-content moving the pair. help.css's own body padding has to
 * go, or every grid cell inherits it; main carries it instead. */
body {
    display: grid;
    grid-template-columns: 17rem minmax(0, 58rem);
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    max-width: none;
    /* help.css sets 10pt, which is right for a help pane read close up and small in a browser
     * window. One point up for the web only; the CHM is untouched because it does not load this. */
    font-size: 11pt;
}

/* Headings keep their ratio to the body rather than staying at help.css's absolute points, or a
 * larger body under the same 17pt h1 closes the gap between them to nothing. */
h1 { font-size: 19pt; }
h2 { font-size: 13pt; }
p.lead { font-size: 13pt; }
p.caption { font-size: 9.5pt; }
code { font-size: 10pt; }

/* The sidebar is the contents, and the contents is Help/Contents.hhc - the same reading order as
 * the CHM's tree, so the two cannot disagree about what exists or in what order. */
nav.toc {
    background: #f6f8fa;
    border-right: 1px solid #d8d8d8;
    padding: 18px 16px;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
}

/* The shipping application's own icon, at its own 32x32 frame so it is drawn 1:1 with no
 * resampling. Flex rather than an inline image so it centres against the two lines of text instead
 * of sitting on the first one's baseline. */
nav.toc .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    color: #1a1a1a;
}

nav.toc .brand img { flex: none; width: 32px; height: 32px; border: none; margin: 0; }
nav.toc .brand b { font-weight: inherit; }
nav.toc .brand span {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    color: #666666;
}

nav.toc ul { list-style: none; margin: 16px 0 0 0; padding: 0; }
nav.toc ul ul { margin: 2px 0 6px 0; padding-left: 10px; }
nav.toc li { margin: 1px 0; }

nav.toc a {
    display: block;
    padding: 4px 8px;
    border-radius: 5px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: .93rem;
}

nav.toc a:hover { background: #ffffff; color: #1a1a1a; }

/* Where you are. aria-current rather than a class, so it says so to a screen reader too. */
nav.toc a[aria-current="page"] { background: #0067c0; color: #ffffff; font-weight: 600; }

/* A section heading with no page of its own - "Working with groups" is one. */
nav.toc .section {
    display: block;
    padding: 10px 8px 2px 8px;
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #666666;
}

nav.toc .away {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #d8d8d8;
}

nav.toc .away a { color: #0067c0; font-size: .9rem; padding-left: 8px; }

/* The marked page, when it is one of the links below the rule - About is. This has to come after
 * the rule above, not rely on the general a[aria-current] one further up: that sets white text,
 * `.away a` then sets it back to blue, and the result is blue text on the blue marker, which reads
 * as a solid bar with nothing in it. Which is exactly how it rendered. */
nav.toc .away a[aria-current="page"] { background: #0067c0; color: #ffffff; font-weight: 600; }

/* 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 sidebar. */
main { padding: 22px 34px 44px 34px; }

.sitefoot {
    margin-top: 34px;
    padding-top: 12px;
    border-top: 1px solid #e6e6e6;
    font-size: 9.5pt;
    color: #666666;
}

/* The landing page. */
.hero { text-align: center; padding: 6px 0 4px 0; }
.hero h1 { font-size: 24pt; border-bottom: none; margin-bottom: 6px; padding-bottom: 0; }
.hero p.lead { font-size: 12.5pt; max-width: 620px; margin: 0 auto 18px auto; }

.buttons { margin: 16px 0 8px 0; }

a.button {
    display: inline-block;
    background: #0067c0;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    padding: 9px 20px;
    margin: 0 6px 8px 6px;
    border-radius: 4px;
}

a.button:hover { background: #004a8c; color: #ffffff; }
a.button.secondary { background: #ffffff; color: #0067c0; border: 1px solid #c8d4e0; }
a.button.secondary:hover { background: #f2f7fb; color: #004a8c; }

/* The landing page's screenshot, centred under a centred hero. The topics keep help.css's
 * left-aligned pictures: there the text runs down the left edge, and a picture that steps away
 * from it loses its place in the argument. */
.shot { text-align: center; margin: 18px 0 0 0; }
.shot p { margin: 0; }

.features { display: flex; flex-wrap: wrap; gap: 0 28px; }
.features > div { flex: 1 1 260px; }
.features h2 { margin-top: 18px; }

/* Below 60rem the sidebar becomes a band across the top: a 17rem column on a phone leaves nothing
 * for the text. */
@media (max-width: 60rem) {
    body { grid-template-columns: 1fr; }
    nav.toc {
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid #d8d8d8;
    }
    main { padding: 18px 14px 30px 14px; }
    .hero h1 { font-size: 19pt; }
}

/* A screenshot at its captured size, on click.
 *
 * The same lightbox as PasteJump's and AltTab's sites, with the same ids and classes, so the three
 * read as one family. The Groups dialog is captured at 986px and the reading column is about 860px,
 * so it is drawn smaller than it was taken and its text softens; on a phone every shot is. A reader
 * gets 1:1 on demand rather than a wider page. SITE ONLY: help.css is untouched and the CHM never
 * loads this file or site-shots.js. */
.shot img, main > p > img { cursor: zoom-in; }

#shotbox {
    position: fixed; top: 0; right: 0; bottom: 0; left: 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 overlay scrolls when the image
     * is larger than the window. help.css caps every img at 98%, so this has to say none. */
    max-width: none; background: #ffffff; border: none; margin: 0;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .5);
}
#shotbox figcaption {
    color: #e6edf3; font-size: .95rem; margin: .9rem auto 0 auto; 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; }