/* One stylesheet for both faces of the box: the public page nginx serves from
 * /var/www/dmezhnov, and the account area the service renders behind /account/.
 * Shared on purpose — an account page that looks nothing like the site it sits
 * on is the kind of seam that makes a visitor look twice.
 *
 * Both pages come out of the same Rust function (view::login_page), so the
 * public one is no longer a hand-kept copy; this file is the only place where
 * the two could still drift apart.
 *
 * Mobile first, and not as a slogan: almost every person using this opens it on
 * a phone to paste a link into an app. Everything below is sized for a 360 px
 * viewport and then allowed to grow; nothing anywhere is allowed to scroll
 * sideways.
 */

:root {
    --bg: #fbfbf9;
    --fg: #1c1c1a;
    --muted: #6b6b66;
    --line: #dedcd6;
    --card: #ffffff;
    --accent: #2f5d50;
    --accent-fg: #ffffff;
    --bad: #8c2f22;
    --good: #2f6d3f;
    --radius: 10px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16171a;
        --fg: #e8e8e4;
        --muted: #9a9a94;
        --line: #2e3034;
        --card: #1e2024;
        --accent: #6fae99;
        --accent-fg: #10221c;
        --bad: #e08a7c;
        --good: #8fc99f;
    }
}

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

html {
    /* iOS Safari bumps the font of a "small" page; this keeps the sizes here
     * meaning what they say. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 1.5rem 1.15rem 3rem;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.6 ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    /* Centred column rather than a grid: every page here is one column of text
     * and cards, on every width. */
    max-width: 46rem;
    margin-inline: auto;
}

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

h1 {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
}

h2 {
    font-size: 1.15rem;
    margin: 2rem 0 0.75rem;
}

p {
    margin: 0 0 1rem;
}

.muted {
    color: var(--muted);
}

.small {
    font-size: 0.875rem;
}

header.site {
    margin-bottom: 1.75rem;
}

header.site .tagline {
    color: var(--muted);
    margin: 0;
}

footer.site {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.875rem;
}

/* -- the gate -------------------------------------------------------------- */

/* Both the public page and the portal's own login page, which are the same
 * markup on purpose: a failed login is served by the app at /account/login, and
 * the page must not appear to change under someone who is already unsure why
 * their password did not work.
 *
 * Centred rather than left at the top, because there is nothing else on it —
 * a lone form pinned under the address bar reads as a page that failed to load
 * the rest of itself. */
body.gate {
    display: flex;
    align-items: center;
    justify-content: center;
    /* vh first as the fallback: on mobile Safari it counts the collapsed
     * toolbar, which pushes the form below the fold on the first paint. svh is
     * the viewport actually visible, and every browser that understands it
     * overrides the line above. */
    min-height: 100vh;
    min-height: 100svh;
    padding-block: 2rem;
}

.gate-box {
    width: 100%;
    /* Narrower than the text column: a full-width pair of inputs on a laptop
     * looks like a form that lost its layout. */
    max-width: 22rem;
}

.gate-box h1 {
    margin-bottom: 1.25rem;
}

/* -- cards ----------------------------------------------------------------- */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 0.85rem;
}

.card h3 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    /* Peer names are user-chosen and can be long on a narrow screen. */
    overflow-wrap: anywhere;
}

.card .meta {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.row.between {
    justify-content: space-between;
}

.row.end {
    justify-content: flex-end;
}

.dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--muted);
    flex: none;
}

.dot.on {
    background: var(--good);
}

/* -- forms ----------------------------------------------------------------- */

label {
    display: block;
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 0.3rem;
}

input[type="text"],
input[type="password"],
select {
    width: 100%;
    padding: 0.7rem 0.75rem;
    /* 16px minimum, or iOS zooms the whole page in on focus. */
    font-size: 1rem;
    font-family: inherit;
    /* Stated rather than inherited, and stated for the select too: a form
     * control does not take the body's line-height on its own, and a select left
     * at the browser default comes out a few pixels shorter than the password
     * box under it. The pair then reads as misaligned on exactly the page where
     * nothing should look slightly wrong. */
    line-height: 1.6;
    color: var(--fg);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* The one select on the site: who you are, on the login page. Its native
 * appearance is kept on purpose — a phone opens a native select as a full-screen
 * picker, which is a better control than anything that could be drawn here, and
 * it is the first thing a person has to use. */

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.field {
    margin-bottom: 0.9rem;
}

/* -- the eye on a password box --------------------------------------------- */

/* The button sits over the right end of the input rather than beside it: the
 * gate is 22 rem wide on a phone, and a control in the row would take width the
 * password box needs more. */
.secret {
    position: relative;
}

/* Both selectors on purpose — the input becomes type="text" the moment the eye
 * is pressed, and the room for the button has to stay reserved. */
.secret input[type="password"],
.secret input[type="text"] {
    padding-right: 3rem;
}

.secret .reveal {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    /* 3 rem against a ~3 rem tall input: a square tap target at the edge of the
     * thumb's reach, which is where the thumb already is on a phone. */
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--muted);
}

/* The UA's own display:none for [hidden] loses to the rule above; without this
 * the button is visible before the script unhides it, and stays visible on a
 * browser where the script never runs. */
.secret .reveal[hidden] {
    display: none;
}

.secret .reveal svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

/* Pressed means the password is on screen: the eye gets crossed out and the
 * colour comes up to the text's, so the state is readable without reading the
 * field. */
.secret .reveal[aria-pressed="true"] {
    color: var(--fg);
}

.secret .reveal .slash {
    visibility: hidden;
}

.secret .reveal[aria-pressed="true"] .slash {
    visibility: visible;
}

/* Drawn inside the button rather than around it: an outline at the default
 * offset would sit on top of the input's own border. */
.secret .reveal:focus-visible {
    outline-offset: -4px;
}

/* A field the browser filled in is painted with the browser's own background —
 * a pale box in a dark theme, and it stops short of the 3 rem the eye sits in,
 * so the field reads as if it ended before the button. An inset shadow is the
 * only thing that overrides that background; `background` itself is ignored. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--card) inset;
    -webkit-text-fill-color: var(--fg);
    caret-color: var(--fg);
}

button {
    font: inherit;
    /* 44 px of height at the default font size: the tap target Apple and Google
     * both ask for, and the reason padding is this generous. */
    padding: 0.7rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-fg);
    cursor: pointer;
}

button.secondary {
    background: transparent;
    color: var(--fg);
    border-color: var(--line);
}

button.danger {
    background: transparent;
    color: var(--bad);
    border-color: var(--line);
}

button.wide {
    width: 100%;
}

form.inline {
    display: inline;
}

/* -- the native link ------------------------------------------------------- */

textarea.link {
    width: 100%;
    /* The link is ~1.5 KB on one line; wrapping it is what makes it selectable
     * by hand when the copy button is unavailable (http, old browser). */
    min-height: 7rem;
    padding: 0.65rem 0.7rem;
    font: 0.8rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    resize: vertical;
    overflow-wrap: anywhere;
}

.notice {
    border-left: 3px solid var(--accent);
    padding: 0.1rem 0 0.1rem 0.8rem;
    margin: 0 0 1.25rem;
}

.notice.bad {
    border-color: var(--bad);
    color: var(--bad);
}

/* -- the installer button -------------------------------------------------- */

/* An <a> rather than a <button> in a <form>: it is a link to GitHub, and a link
 * is what a browser lets you long-press, copy and send to the person you are
 * talking through the install over the phone — which is how half of these
 * handouts actually happen. */
.download {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    /* Full width and two lines tall on purpose. This is the one control on the
     * page for the person who has nothing installed yet, and it competes for
     * attention with a list of their own devices right above it. */
    width: 100%;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-fg);
    text-align: center;
    text-decoration: none;
}

.download .what {
    font-weight: 600;
}

.download .meta {
    font-size: 0.8rem;
    /* Not var(--muted): on the accent fill that is a colour from the page
     * background's palette and drops below contrast in the dark theme. */
    opacity: 0.85;
}

ol.steps {
    padding-left: 1.3rem;
    margin: 0 0 1rem;
}

ol.steps li {
    margin-bottom: 0.4rem;
}