/* The colours are in themes.css, which is loaded first. */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}

body {
    background: var(--background);
    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

button,
input {
    font: inherit;
}

/* Going from page to page within an app cross-fades instead of blinking,
   where the browser can: it keeps the old page up until the new one is ready
   to paint. It is here, in a stylesheet every page loads first (and usually
   from the cache), because when the new page hasn't opted in by the time it
   is ready (its own stylesheet still on its way), the browser aborts the
   transition with an error. An app's header can stay put with
   view-transition-name. */
@view-transition {
    navigation: auto;
}

::view-transition-group(root) {
    animation-duration: 0.18s;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* The header's buttons, every app's alike: the theme toggle, and
   .header-button for the others (Home, Log in, Log out). A header button
   needs no other class: this is all of its look. */
.theme-toggle,
.header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    height: 38px;
    margin: 0;

    border: 1px solid var(--border-strong);
    border-radius: 10px;

    background: var(--surface);
    color: var(--text-soft);

    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.theme-toggle:hover,
.header-button:hover {
    color: var(--text);
    border-color: var(--accent);
}

.theme-toggle:focus-visible,
.header-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;

    width: 38px;
    padding: 0;
}

.header-button {
    padding: 0 12px;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

.theme-toggle .sun {
    display: none;
}

.theme-toggle .moon {
    display: block;
}

:root[data-scheme="dark"] .theme-toggle .sun {
    display: block;
}

:root[data-scheme="dark"] .theme-toggle .moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-scheme="light"]) .theme-toggle .sun {
        display: block;
    }

    :root:not([data-scheme="light"]) .theme-toggle .moon {
        display: none;
    }
}

/* An icon from icons/ (shared_icon() in the apps): the size of the text
   beside it, in its colour. */
.icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

/* Every app's link back to the home page. On a phone, only its icon: the
   word stays for screen readers. */
@media (max-width: 600px) {
    .home-link .label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .home-link.header-button {
        width: 38px;
        padding: 0;
    }
}