/*
 * Nexus additions to site.css.
 *
 * site.css is a pinned copy of branchthroughzero.co.uk's stylesheet and is not
 * edited, so that taking a newer one is a file replacement rather than a merge.
 * Everything Nexus needs that a marketing site never did lives here, and it is
 * deliberately short: three components and one input type.
 */

/* site.css styles text inputs and textareas. Nexus asks for email addresses. */
.field input[type="email"] {
    display: block;
    width: 100%;
    padding: 0.6rem 0.7rem;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--ink-muted);
    border-radius: 6px;
}
.field input[type="email"]:focus-visible { border-color: var(--accent); }

/* --------------------------------------------------------------- state */

/*
 * What a machine or a certificate is doing. The mark before the label carries
 * the same meaning as the colour, so the state survives being read aloud, being
 * printed, or being looked at by somebody who does not separate red and green.
 */
.state {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}
.state::before { font-size: 0.8em; line-height: 1; }
.state-on { color: var(--accent); }
.state-on::before { content: "\25CF"; }        /* filled circle */
.state-off { color: var(--ink-muted); }
.state-off::before { content: "\25CB"; }       /* hollow circle */
.state-warn { color: var(--edge); }
.state-warn::before { content: "\25B2"; }      /* triangle */
.state-none { color: var(--ink-muted); font-weight: 500; }
.state-none::before { content: "\2014"; }      /* em dash */

/* --------------------------------------------------------------- token */

/*
 * The one-time reveal. Large, mono, selectable, and stated once to be gone
 * afterwards. Borrows the accent rule from .alert so it reads as the same
 * family of "pay attention to this".
 */
.token {
    margin-top: 1.5rem;
    padding: 1.1rem 1.25rem;
    max-width: var(--measure);
    background: var(--tint);
    border-left: 3px solid var(--accent);
}
.token code {
    display: block;
    font-family: var(--mono);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
    word-break: break-all;
    user-select: all;
}
.token .note { margin-top: 0.65rem; font-size: 0.88rem; color: var(--ink-muted); }
.token .actions { margin-top: 1rem; }

/* --------------------------------------------------------------- empty */

/* The state a marketing site never has: nothing here yet, and what to do. */
.empty {
    margin-top: 1.5rem;
    padding: 2rem 0 0;
    border-top: 1px solid var(--rule);
    max-width: var(--measure);
}
.empty p { color: var(--ink-muted); }
.empty .actions { margin-top: 1.25rem; }

/* ---------------------------------------------------------------- heads */

/*
 * site.css belongs to a marketing site, where a page has a hero h1 and its
 * sections are h2. A Nexus page is one thing, so the section heading is the
 * h1. Same type, different tag.
 */
.head h1 {
    margin-top: 0.6rem;
    font-size: clamp(1.6rem, 2.8vw, 2.15rem);
    letter-spacing: -0.018em;
}

/* --------------------------------------------------------------- select */

/* Same treatment as the text inputs site.css styles, for the one place Nexus
   asks somebody to choose between their own machines. */
.field select {
    display: block;
    width: 100%;
    padding: 0.6rem 0.7rem;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--ink-muted);
    border-radius: 6px;
}
.field select:focus-visible { border-color: var(--accent); }

/* ---------------------------------------------------------------- errors */

/*
 * Something went wrong, said so that it looks like it.
 *
 * site.css has one --accent and no colour for a failure, because the site it
 * came from never had to report one. Nexus does: a mistyped confirmation, a
 * name already taken, a token that has expired. Without this they arrive in the
 * same green as a success and read as though the thing worked.
 *
 * The red is dark enough to pass AA on --surface and on --paper, and the border
 * carries the meaning as well as the colour so it does not rely on being seen
 * as red.
 */
:root {
    --bad:      #8c2f2f;
    --bad-tint: #f7ecec;
}

.status.bad {
    background: var(--bad-tint);
    border-left-color: var(--bad);
}

/* site.css colours these with --edge, which is a green: right for a hint,
   wrong for the thing telling you a field is unacceptable. */
.field .err { color: var(--bad); }