/*
 * Two pages, on somebody else's phone.
 *
 * Sized for a guest holding a handset at an event rather than for a desk: one column, large
 * touch targets, and text that stays legible outdoors. No web fonts — a venue's wifi is the
 * worst network this product will ever meet, and a font that has not arrived leaves a page
 * that cannot be read at all.
 */

:root {
    color-scheme: light dark;
    --ink: #16130d;
    --paper: #fbfaf7;
    --muted: #5f5849;
    --line: #e2ddd1;
    --accent: #f5b301;
    --on-accent: #16130d;
    /*
     * Links are not the accent, on light backgrounds.
     *
     * #f5b301 on #fbfaf7 is roughly 1.9:1 — fine for a filled button where the amber is the
     * background, and unreadable for body text. This is the same hue taken dark enough to
     * clear 4.5:1, which is what a link in a paragraph needs.
     */
    --link: #8a6100;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #f3f0e9;
        --paper: #16130d;
        --muted: #a49a86;
        --line: #322c21;
        /* On a dark background the accent itself is legible, and is the family colour. */
        --link: #f5b301;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 1.5rem 1.25rem 4rem;
    background: var(--paper);
    color: var(--ink);
    font: 1.0625rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

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

/*
    The mark and the name, read as one thing.

    Centred and above the heading rather than beside it: this is the first thing on the page
    and it is answering "who is asking", not competing with what is being asked.

    The image carries an empty alt and the name is real text next to it. A screen reader
    saying "Yellow Track logo, Yellow Track" is the same thing twice, and the name has to be
    text anyway for anybody who blocks images on a slow connection.
*/
.brand {
    text-align: center;
    margin: 0 0 1.75rem;
}

.brand img {
    display: block;
    margin: 0 auto 0.375rem;
    height: auto;
}

.brand-name {
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
}

/*
    Centred, with the mark above it, so the top of the page reads as one masthead rather than
    a centred logo sitting on top of a left-aligned page. The fields below stay left-aligned:
    a label belongs above its box, at its edge.
*/
h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 0.25rem;
    text-align: center;
}

.event {
    color: var(--muted);
    margin: 0 0 2rem;
    text-align: center;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

input {
    width: 100%;
    padding: 0.875rem 0.75rem;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
}

input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

button {
    width: 100%;
    /* 48px at the default size: a thumb, not a cursor. */
    padding: 0.875rem 1rem;
    font: inherit;
    font-weight: 700;
    color: var(--on-accent);
    background: var(--accent);
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
}

button[disabled] {
    opacity: 0.55;
    cursor: default;
}

.note {
    color: var(--muted);
    font-size: 0.9375rem;
    margin-top: 1.5rem;
}

/*
 * Said in words as well as in colour, and never in colour alone: this is read outdoors, in
 * sunlight, by somebody who may not distinguish red from grey.
 */
.problem {
    border-left: 3px solid #c0392b;
    background: rgba(192, 57, 43, 0.08);
    padding: 0.75rem 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
    margin-bottom: 1.5rem;
}

.done {
    border-left: 3px solid #1f8a4c;
    background: rgba(31, 138, 76, 0.08);
    padding: 0.75rem 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

/*
 * Underlined as well as coloured. Colour alone is not a link to somebody who cannot
 * distinguish it from the surrounding text.
 */
a {
    color: var(--link);
    text-underline-offset: 0.15em;
}

/* The gallery tiles are links wrapping an image, and want none of that. */
.grid a {
    text-decoration: none;
}

[hidden] {
    display: none !important;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.5rem;
}

.grid a {
    display: block;
    aspect-ratio: 1;
    background: var(--line);
    border-radius: 0.375rem;
    overflow: hidden;
}

.grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}