/* The site looks like the app: dark (or light, following the system), monospace, a
   header line at the top and a key bar at the bottom. The app's colours, with the dim
   grey (and in light mode the yellow, red and green) adjusted so text keeps a contrast
   of at least 4.5:1 (WCAG AA) on both backgrounds. */

:root {
    color-scheme: dark light;
    --bg: #0c0c0e;
    --bg-raised: #151518;
    --bg-selected: #e8e8e8;
    --fg: #d6d6d6;
    --fg-selected: #0c0c0e;
    --dim: #8a8a92;
    --rule: #26262b;
    --yellow: #f2c230;
    --red: #e5484d;
    --magenta: #d05ad6;
    --green: #49c26b;
    --font: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f7f7f5;
        --bg-raised: #ececea;
        --bg-selected: #1c1c1e;
        --fg: #1c1c1e;
        --fg-selected: #f7f7f5;
        --dim: #62626a;
        --rule: #d9d9d6;
        --yellow: #866208;
        --red: #c0282e;
        --green: #21743a;
        --magenta: #a8329f;
    }
}

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

/* Links to a section (#download), and whatever has the keyboard focus, stay clear of the
   pinned header and key bar. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 5em;
    scroll-padding-bottom: calc(4em + env(safe-area-inset-bottom));
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    font: 0.9375rem/1.5 var(--font); /* 15px, or more when the visitor asks for bigger text */
    font-variant-numeric: tabular-nums;
}

@media (min-width: 700px) { body { font-size: 1rem; } }

/* The header line: the name at the left, the page at the right. */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2ch;
    padding: 0.6em max(2ch, env(safe-area-inset-right)) 0.6em max(2ch, env(safe-area-inset-left));
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg);
    padding-top: calc(0.6em + env(safe-area-inset-top));
    font-weight: bold;
}
header a { text-decoration: none; display: inline-flex; align-items: center; gap: 1ch; }
header img { width: 1.6em; height: 1.6em; }
header .brand { text-transform: uppercase; }
header > a { font-size: 1.3em; letter-spacing: 0.05em; }
header .where { color: var(--dim); font-weight: normal; }
/* Too narrow for both on one line: the key bar lights the page anyway. */
@media (max-width: 380px) { header .where { display: none; } }

main {
    flex: 1;
    width: 100%;
    max-width: 82ch;
    margin: 0 auto;
    padding: 1em max(2ch, env(safe-area-inset-right)) 2em max(2ch, env(safe-area-inset-left));
}

h1, h2, h3 { font-size: 1em; margin: 1.6em 0 0.5em; }
h1 { margin-top: 0.5em; }
h2 { color: var(--yellow); }
/* The download is what most visitors came for: its heading stands out. */
h2#download { font-size: 1.5em; margin-top: 1.4em; padding-top: 0.6em; border-top: 1px solid var(--rule); }
p { margin: 0.6em 0; }
ul, ol { padding-left: 3ch; margin: 0.6em 0; }
li { margin: 0.4em 0; }
li::marker { color: var(--dim); }

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus-visible { color: var(--yellow); }
:focus-visible { outline: 1px solid var(--yellow); outline-offset: 2px; }

.dim { color: var(--dim); }
.ok { color: var(--green); }
.warn { color: var(--red); }
.small { font-size: 0.875em; }

/* Read by screen readers, not shown. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

code, kbd, pre { font-family: inherit; font-size: 1em; }
code { color: var(--magenta); overflow-wrap: anywhere; }
kbd { color: var(--fg); background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 2px; padding: 0 0.5ch; white-space: nowrap; }

/* Commands scroll inside their box, never the page. */
pre {
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    padding: 0.6em 1.5ch;
    overflow-x: auto;
    line-height: 1.4;
}
pre code { color: inherit; overflow-wrap: normal; }
pre .dim { user-select: none; }

/* Screenshots: full width, tap for the full-size image. */
figure { margin: 1em 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
figcaption { color: var(--dim); font-size: 0.875em; margin-top: 0.3em; }
/* The link is the picture's size, so its focus outline and the scroll to it cover the picture. */
figure a { display: block; cursor: zoom-in; }

/* The screenshot viewer (viewer.js): the picture as big as the screen allows, and a bar
   at the bottom like the key bar, with the close button big enough to tap. */
dialog.viewer {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--bg);
    color: var(--dim);
}
dialog.viewer[open] { display: flex; flex-direction: column; }
dialog.viewer:focus-visible { outline: none; }
dialog.viewer::backdrop { background: var(--bg); }
dialog.viewer img {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: contain;
    padding: env(safe-area-inset-top) 0 0;
    cursor: zoom-out;
}
dialog.viewer .bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 2.5ch;
    padding: 0 max(2ch, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(2ch, env(safe-area-inset-left));
    background: var(--bg-raised);
    border-top: 1px solid var(--rule);
}
dialog.viewer button {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg);
    font: inherit;
    cursor: pointer;
}
dialog.viewer button:hover { color: var(--yellow); }
dialog.viewer kbd { background: var(--bg); padding: 0 0.4ch; }
dialog.viewer .count { margin-left: auto; }
/* No arrow keys on a phone: the bar says only what a tap does. */
@media (max-width: 560px) { dialog.viewer .step { display: none; } }
body:has(dialog.viewer[open]) { overflow: hidden; }

/* Tables of keys. */
table { border-collapse: collapse; margin: 0.6em 0; }
th, td { padding: 0.15em 2ch 0.15em 0; vertical-align: top; text-align: left; font-weight: normal; }
th[scope="row"] { white-space: nowrap; }

/* The pitch on the home page. */
.pitch { font-size: 1.5em; line-height: 1.3; margin: 0.6em 0 0.4em; }
.goal { font-size: 1.1em; color: var(--dim); }
.beta { border-left: 2px solid var(--yellow); padding-left: 1.5ch; }

/* The download for the visitor's system, chosen by site.js; the full list follows. */
.download { margin: 1em 0; }
.download[hidden] { display: none; }
.button {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* big enough to tap */
    padding: 0.4em 2ch;
    background: var(--bg-selected);
    color: var(--fg-selected);
    text-decoration: none;
    font-weight: bold;
}
.button:hover, .button:focus-visible { background: var(--yellow); color: var(--fg-selected); }
.download .also { margin-top: 0.5em; }

/* Features read like a listing: a green mark, then the line; a wrapped line lines up
   with the text, not the mark. */
ul.features { list-style: none; padding-left: 0; }
ul.features li { padding-left: 2ch; text-indent: -2ch; }
ul.features li::before { content: "+ "; color: var(--green); white-space: pre; }

.legal { color: var(--dim); font-size: 0.8em; border-top: 1px solid var(--rule); padding-top: 0.4em; margin-top: 3em; }

/* The key bar, like the app's: always at the bottom. On a phone each entry is a link
   big enough to tap; it wraps rather than scroll. */
nav.keys {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.5ch;
    padding: 0.35em max(2ch, env(safe-area-inset-right)) calc(0.35em + env(safe-area-inset-bottom)) max(2ch, env(safe-area-inset-left));
    background: var(--bg-raised);
    border-top: 1px solid var(--rule);
    color: var(--dim);
}
nav.keys a { text-decoration: none; padding: 0.3em 0; white-space: nowrap; }
nav.keys a:hover, nav.keys a:focus-visible { color: var(--fg); }
nav.keys kbd { background: var(--bg); padding: 0 0.4ch; }
nav.keys a[aria-current="page"] { color: var(--fg); }
nav.keys a[aria-current="page"] kbd { background: var(--bg-selected); color: var(--fg-selected); border-color: var(--bg-selected); }
/* The switch that turns the keys off (keys.js), at the far end. */
nav.keys .keys-switch {
    margin-left: auto;
    padding: 0.3em 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
nav.keys .keys-switch:hover { color: var(--fg); }
nav.keys .keys-switch[aria-pressed="true"] .state { color: var(--fg); }

/* Windows high contrast replaces the colours: the lit key keeps a system highlight and an
   underline, so the page it marks still shows. */
@media (forced-colors: active) {
    nav.keys a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
    nav.keys a[aria-current="page"] kbd { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}

/* A touch screen, or one too short for a comfortable bar, gets key bar entries at least
   44px tall: big enough to tap. */
@media (pointer: coarse), (max-height: 500px) {
    nav.keys a, nav.keys .keys-switch { display: inline-flex; align-items: center; min-height: 44px; }
}


/* A phone: the six keys in two rows of three, each 44px tall, so the pinned header and
   key bar leave the screen to the page. A long label wraps inside its cell. */
@media (max-width: 560px) {
    header { padding: 0.4em 2ch; padding-top: calc(0.4em + env(safe-area-inset-top)); }
    header > a { font-size: 1.15em; }
    nav.keys {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 1.5ch;
        padding: 0 max(1.5ch, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(1.5ch, env(safe-area-inset-left));
        font-size: 0.9em;
    }
    nav.keys a { display: flex; align-items: center; min-height: 44px; padding: 0; white-space: normal; line-height: 1.2; }
    /* No room for a seventh cell; a phone rarely has a keyboard to need it. */
    nav.keys .keys-switch { display: none; }
    html { scroll-padding-bottom: calc(7em + env(safe-area-inset-bottom)); }
}

/* A short screen (a phone on its side, a window zoomed to 400%): the header and the key bar
   stay at the top and the bottom of the page instead of pinned, leaving it the screen.
   After the phone rules, so it wins on a screen that is both. */
@media (max-height: 500px) {
    header, nav.keys { position: static; }
    html { scroll-padding: 1em; }
}

/* On paper: dark text on white, no pinned header, no key bar or viewer. */
@media print {
    :root {
        --bg: #fff;
        --bg-raised: #f2f2f2;
        --fg: #000;
        --dim: #444;
        --rule: #bbb;
        --yellow: #5c4300;
        --red: #a01d22;
        --green: #1a5c2e;
        --magenta: #7a2474;
    }
    header { position: static; }
    nav.keys, dialog.viewer { display: none; }
    pre { white-space: pre-wrap; }
}