/* The look is Telegram's, and so is the blue: plain white, black text, a single
   accent, generous measure - the site should read like the app it belongs to
   and get out of the way. */

/* The accent is darker than the mark's. #0088ff is the brand blue and sits at
   3.52:1 against white, under the 4.5:1 that normal text needs; this one keeps
   its hue and reaches 5.24:1 - the same contrast the green it replaces had, so
   nothing about the page's weight changes with its colour. */
:root {
    --accent: #006ccb;
    --accent-hover: #00549d;
    --frost: #006ccb;
    --ink: #000000;
    --ink-soft: #666e78;
    --paper: #ffffff;
    --line: #e6ecf0;
    --band: #f4f4f5;
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent: #3599f0;
        --accent-hover: #47a9ff;
        --frost: #7cc0ff;
        --ink: #f5f5f5;
        --ink-soft: #8d949c;
        --paper: #212121;
        --line: #303030;
        --band: #1a1a1a;
    }
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0 1.25rem 4rem;
    background: var(--paper);
    color: var(--ink);
    font: 1rem/1.55 -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
}

main {
    max-width: 40rem;
    margin: 0 auto;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* The mark: the block of ice with the nine in it, the same drawing the launcher
   icon uses. An image rather than two rectangles in CSS, because the shape is
   no longer something two rectangles can say. */
.mark {
    display: block;
    width: 5rem;
    height: 5rem;
    margin: 3.5rem auto 1.5rem;
    border-radius: 1.2rem;
    background: url("/mark.png") center / cover no-repeat;
}

.home {
    text-align: center;
}

h1 {
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

h2 {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 2.4rem 0 0.6rem;
}

h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 1.8rem 0 0.5rem;
}

p,
li {
    margin: 0 0 0.85rem;
}

/* The long answer, folded away. The short one is three steps, and a page that
   makes somebody read past everything they do not need yet is a page that
   makes putting a server up look harder than it is. A <details> rather than
   anything scripted: the policy this site serves allows no inline script, and
   a fold that needs one would not open at all. */
details {
    margin: 2.6rem 0 0;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 0.95rem;
    /* The default marker is a stray glyph in a page with no other; the arrow
       below is drawn beside the words instead. */
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

summary::before {
    content: "▸ ";
}

details[open] > summary::before {
    content: "▾ ";
}

summary:hover {
    color: var(--accent-hover);
}

details > *:not(summary) {
    margin-top: 1rem;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--band);
    border-radius: 3px;
    padding: 0.1em 0.35em;
    /* A command with no spaces in it should break rather than push the page
       sideways on a phone. */
    overflow-wrap: anywhere;
}

.lede {
    font-size: 1.15rem;
    color: var(--ink-soft);
    margin-bottom: 2.5rem;
}

/* The two ways to get the app: white on the accent, which is 5.24:1 against
   white and so carries text where the brand blue could not. */
.get { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 0 12px; }
.get a { display: inline-block; padding: 12px 22px; border-radius: 12px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; }
.get a:hover { background: var(--accent-hover); color: #fff; }
.small { font-size: 0.9rem; color: var(--ink-soft); }

.updated {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin: -0.2rem 0 2.5rem;
}

ul {
    padding-left: 1.2rem;
    margin: 0 0 0.85rem;
}

li {
    margin-bottom: 0.4rem;
}

/* A sentence that carries more weight than the paragraph around it. */
.plain {
    background: var(--band);
    border-left: 3px solid var(--accent);
    padding: 0.85rem 1rem;
    margin: 1.4rem 0;
    border-radius: 0 4px 4px 0;
}

.plain p:last-child {
    margin-bottom: 0;
}

/* A line somebody is meant to copy. It scrolls inside itself rather than
   widening the page: a command with a long host name in it would otherwise put
   a sideways scrollbar under everything else on a phone. */
pre {
    background: var(--band);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.85rem 1rem;
    margin: 1.4rem 0;
    overflow-x: auto;
    font: 0.9rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

nav {
    margin-top: 3.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    font-size: 0.94rem;
    color: var(--ink-soft);
}

nav a {
    margin-right: 1.2rem;
    display: inline-block;
    margin-bottom: 0.4rem;
}

.home nav a {
    margin: 0 0.6rem 0.4rem;
}

.back {
    display: inline-block;
    margin: 2.5rem 0 1.2rem;
    font-size: 0.94rem;
}

/* The frost grows out of the mark and behind everything else. Fixed, so it
   does not scroll away from the icon it belongs to, and deaf to the pointer:
   it is weather, not furniture.

   At z-index -1 it was invisible even once the browser was allowed to draw it:
   a negative layer goes behind the body's background, not merely behind the
   text, and the body has one. So it sits at zero and the words sit above it. */
#frost {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

main {
    position: relative;
    z-index: 1;
}

/* Off the picture, still on the page. The name is the one thing the mark
   already says, so on the home page it is a repetition to the eye - but a
   screen reader has no mark to look at, and a page with no h1 at all is one a
   search engine and a reading order both stumble over. Clipped rather than
   display:none, because display:none is not read out either. */
.offscreen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}