/* Reset and element defaults. */

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

html {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-family, system-ui, sans-serif);
    font-size: var(--text-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-normal);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-tight);
    text-wrap: balance;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration-thickness: var(--border-width);
    text-underline-offset: 0.2em;
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

::selection {
    background: var(--color-fg);
    color: var(--color-bg);
}

[hidden] {
    display: none !important;
}

/* Shared helpers */

.container {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

/* A narrower column for pages that are mostly reading and writing, such as settings. */
.container--narrow {
    max-width: calc(var(--reading-width) + 2 * var(--space-5));
}

/*
 * Above phone width, pages that hold a block editor keep side margins wide
 * enough for its block buttons, which hang outside the text.
 */
@media (min-width: 40.6875rem) {
    .container--gutter,
    .container--narrow {
        padding-inline: var(--gutter-wide);
    }

    .container--narrow {
        max-width: calc(var(--reading-width) + 2 * var(--gutter-wide));
    }
}

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

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.empty {
    padding: var(--space-7) var(--space-4);
    border: var(--border-width) dashed var(--color-hairline);
    border-radius: var(--radius);
    color: var(--color-muted);
    text-align: center;
}

.loading {
    padding: var(--space-7) 0;
    color: var(--color-muted);
    text-align: center;
}

/* Turns an icon steadily, for anything in progress. */
/* A ring with a gap, turning, for waiting on something. */
.spinner {
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    border: var(--border-width) solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-round);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.section-title {
    font-size: var(--text-lg);
}

.noscript {
    padding: var(--space-6);
    text-align: center;
}

@media (max-width: 40rem) {
    .container {
        padding-inline: var(--space-4);
    }
}

/*
 * A phone on its side is wide but has little to spare, so the page keeps the
 * top bar's margins and the editor's block buttons move inside (see editor.css).
 */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 32rem) {
    .container--gutter,
    .container--narrow {
        padding-inline: var(--space-5);
    }

    .container--narrow {
        max-width: calc(var(--reading-width) + 2 * var(--space-5));
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}