/*
 * Everything every page shares: the palette, the base elements, the header, and the
 * few form pieces more than one feature uses. A feature's own rules live beside its
 * page in css/<feature>.css, linked from that page's head.
 */


/* --- tokens ----------------------------------------------------------------- */

/* WaveFront's dark appearance, by the colorset each value comes from. Dark only:
   the app's light side is a different palette, not a lighter one, and the pages
   would need their own to match it. */
:root {
    color-scheme: dark;

    --accent: #ff0035;                /* AccentColor, LogoBar */
    --accent-soft: rgb(255 0 53 / .14);
    --bg: #141414;                    /* ListBackground */
    --card: #1c1c1e;                  /* ListRowBackground */
    --bar: #222222;                   /* NavigationBackground */
    --inset: #0e0e0e;                 /* TimelineBackground */
    --ruler: #161616;                 /* RulerBackground */
    --track: #3a3a3c;                 /* ModulationPlaceholder */
    --edge: #2c2c2e;                  /* between TextTertiary and the card */
    --text: #d1d1d8;                  /* TextPrimary */
    --muted: #98989d;                 /* LogoText. TextSecondary fails contrast on a card */
    --faint: #68686a;                 /* TextSecondary: decoration and disabled, never copy */
    --ok: #30d158;
    --warn: #ff9f0a;

    --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, monospace;
    --radius: 4px;
    --measure: 46rem;
    --gutter: 1rem;
    --header: 56px;
}


/* --- base ------------------------------------------------------------------- */

* {
    box-sizing: border-box;
}

/* The attribute wins over any display rule: the scripts hide and show by it. */
[hidden] {
    display: none !important;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    font: 15px/1.5 var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* A text page: one measure, centred. A page that owns its layout, like the session,
   overrides this on its own main. */
main {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 2rem var(--gutter) 4rem;
}

h1 {
    font-size: 1.4rem;
    margin: 0 0 .25rem;
}

h2 {
    font-size: 1.05rem;
    margin: 2rem 0 .5rem;
}

h3 {
    font-size: .95rem;
    margin: 1.25rem 0 .5rem;
}

a {
    color: var(--text);

    &:hover {
        color: #ffffff;
    }
}

.lede {
    color: var(--muted);
    margin-top: 0;
}

.hint {
    color: var(--muted);
    font-size: .85rem;
}

.warning {
    color: var(--warn);
}

.error {
    color: var(--accent);
    border-left: 3px solid var(--accent);
    padding-left: .7rem;
}

output {
    font-variant-numeric: tabular-nums;
}


/* --- controls --------------------------------------------------------------- */

button,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 40px;
    padding: 0 1rem;
    font: inherit;
    font-weight: 500;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;

    &:hover:not(:disabled) {
        border-color: var(--track);
        color: #ffffff;
    }

    &:disabled {
        opacity: .4;
        cursor: default;
    }

    /* Red with near-black text: white on the accent fails contrast, this passes. */
    &.primary {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--bg);
        font-weight: 600;
    }

    &.small {
        height: 32px;
        padding: 0 .75rem;
        font-size: .85rem;
    }

    &.danger {
        color: var(--accent);
    }
}

input[type=text],
input[type=number],
input[type=password],
select {
    height: 40px;
    padding: 0 .65rem;
    font: inherit;
    color: var(--text);
    background: var(--inset);
    border: 1px solid var(--edge);
    border-radius: var(--radius);

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

/* The browser's chevron sits flush against the edge; this one keeps its distance.
   A data URI rather than a file: same origin, and one fewer request. */
select {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398989d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 14px;
}

input[type=number] {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
}

/* The fill left of the thumb is --fill, set by whoever moves the value. Without it
   the track is plain, which is still a slider. */
input[type=range] {
    appearance: none;
    width: 100%;
    height: 4px;
    margin: 8px 0;
    border-radius: 2px;
    background: linear-gradient(to right, var(--accent) var(--fill, 0%), var(--track) var(--fill, 0%));

    &::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        border: 0;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 3px rgb(0 0 0 / .6);
    }

    &::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border: 0;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 3px rgb(0 0 0 / .6);
    }

    &::-moz-range-track {
        background: transparent;
    }

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

.controls {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Pushes whatever follows it to the far end of a flex row. */
.spacer {
    margin-left: auto;
}

/* A short form: one column of labelled fields. */
.stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 26rem;

    label {
        display: flex;
        flex-direction: column;
        gap: .3rem;
    }
}

.badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 .45rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--muted);
    background: var(--inset);
    border: 1px solid var(--edge);
    border-radius: var(--radius);

    &.accent {
        color: var(--accent);
        background: var(--accent-soft);
        border-color: transparent;
    }
}

h2.danger {
    color: var(--accent);
}


/* --- header ----------------------------------------------------------------- */

header.site {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: var(--header);
    padding: 0 2rem;
    background: var(--bar);
    border-bottom: 1px solid var(--edge);

    .brand {
        display: flex;
        align-items: center;
        gap: .6rem;
        font-weight: 700;
        letter-spacing: -.01em;
        text-decoration: none;

        .mark {
            width: 22px;
            height: 22px;
            fill: var(--accent);
        }
    }

    nav {
        display: flex;
        align-self: stretch;

        a {
            display: inline-flex;
            align-items: center;
            padding: 0 .9rem;
            font-size: .9rem;
            font-weight: 500;
            color: var(--muted);
            text-decoration: none;

            &:hover {
                color: var(--text);
            }

            &[aria-current=page] {
                color: #ffffff;
                font-weight: 600;
                box-shadow: inset 0 -2px 0 var(--accent);
            }
        }
    }

    .signin {
        margin-left: auto;
        font-size: .9rem;
        text-decoration: none;
    }

    .signin + .menu {
        margin-left: 0;
    }

    .menu {
        margin-left: auto;
    }

    @media (width < 52rem) {
        padding: 0 .75rem 0 var(--gutter);

        nav,
        .signin {
            display: none;
        }

        /* Anchored to the header rather than the button: the button sits at the
           right edge and a dropdown hung from it would leave the screen. */
        .menu .items {
            position: fixed;
            left: .5rem;
            right: .5rem;
            top: calc(var(--header) + 4px);
        }
    }
}


/* --- menu ------------------------------------------------------------------- */

/* A details element dressed as a dropdown. Open state is the browser's; nothing here
   needs a script, and the items are plain links and one form. */
.menu {
    position: relative;

    > summary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        list-style: none;
        border-radius: var(--radius);
        cursor: pointer;

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

        &:hover {
            background: var(--card);
        }

        svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
        }
    }

    .avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--track);
        color: #ffffff;
        font-size: .85rem;
        font-weight: 600;
    }

    .items {
        position: absolute;
        right: 0;
        top: calc(100% + 6px);
        z-index: 10;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 220px;
        padding: .5rem;
        background: var(--card);
        border: 1px solid var(--edge);
        border-radius: var(--radius);
        box-shadow: 0 16px 40px rgb(0 0 0 / .55);

        a,
        button {
            display: flex;
            align-items: center;
            height: 40px;
            padding: 0 .9rem;
            font-size: .9rem;
            font-weight: 500;
            text-decoration: none;
            background: none;
            border: 0;
            border-radius: var(--radius);
            justify-content: flex-start;
            width: 100%;

            &:hover {
                background: var(--bar);
            }
        }

        .who {
            padding: .5rem .9rem .35rem;
            font-size: .8rem;
            color: var(--muted);
            border-bottom: 1px solid var(--edge);
            margin-bottom: .25rem;
        }

        form {
            margin: 0;
        }

        /* The nav's copy for narrow screens, where the inline one is hidden. */
        .narrow {
            display: none;
        }

        @media (width < 52rem) {
            .narrow {
                display: flex;
            }

            .narrow:last-of-type {
                border-bottom: 1px solid var(--edge);
                border-radius: 0;
                margin-bottom: .25rem;
            }
        }
    }
}