/* profiles.rhys.wtf, in rhys.wtf's design language. The fonts, palette,
   tokens, dark scheme, header, toggle, section headings, footer and form
   controls are copied from rhyswtf-rs/style/main.css: keep them in step
   with it. Recoleta is licensed for rhys.wtf sites only. */

@font-face {
    font-family: Recoleta;
    src: url('/static/Recoleta.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: RecoletaBold;
    src: url('/static/RecoletaBold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: Figtree;
    src: url('/static/Figtree-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: "Monaspace Neon";
    src: url('/static/MonaspaceNeon-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: Lora-Italic;
    src: url('/static/Lora-Italic-VariableFont_wght.woff2') format('woff2');
    font-display: swap;
}

:root {
    /* The rhys.wtf type system: Recoleta Bold for headings, Recoleta for
       reading, Figtree for the interface, Lora Italic for the logo only,
       Monaspace Neon for anything monospaced (fingerprints, keys). */
    --font-body: Recoleta, system-ui, -apple-system, sans-serif;
    --font-display: RecoletaBold, Recoleta, system-ui, sans-serif;
    --font-ui: Figtree, system-ui, -apple-system, sans-serif;
    --font-italic: Lora-Italic, Georgia, serif;
    --font-mono: "Monaspace Neon", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* Gruvbox light palette — https://github.com/morhetz/gruvbox */
    --gruvbox-bg0-hard: #f9f5d7;
    --gruvbox-bg0: #fbf1c7;
    --gruvbox-bg0-soft: #f2e5bc;
    --gruvbox-bg1: #ebdbb2;
    --gruvbox-bg2: #d5c4a1;
    --gruvbox-bg3: #bdae93;
    --gruvbox-bg4: #a89984;

    --gruvbox-fg0: #282828;
    --gruvbox-fg1: #3c3836;
    --gruvbox-fg2: #504945;
    --gruvbox-fg3: #665c54;
    --gruvbox-fg4: #7c6f64;

    --gruvbox-gray: #928374;

    --gruvbox-red: #cc241d;
    --gruvbox-green: #98971a;
    --gruvbox-yellow: #d79921;
    --gruvbox-blue: #458588;
    --gruvbox-purple: #b16286;
    --gruvbox-aqua: #689d6a;
    --gruvbox-orange: #d65d0e;

    --gruvbox-red-faded: #9d0006;
    --gruvbox-green-faded: #79740e;
    --gruvbox-yellow-faded: #b57614;
    --gruvbox-blue-faded: #076678;
    --gruvbox-purple-faded: #8f3f71;
    --gruvbox-aqua-faded: #427b58;
    --gruvbox-orange-faded: #af3a03;

    /* Semantic tokens — change these to retheme without touching components.
       They reference only the --gruvbox-* slots, which palettes.css (loaded
       after this file) redefines for each palette but Gruvbox: keep it so. */
    --color-bg: var(--gruvbox-bg0);
    --color-surface: var(--gruvbox-bg0-hard);
    --color-border: var(--gruvbox-fg0);
    --color-text: var(--gruvbox-fg1);
    --color-text-strong: var(--gruvbox-fg3);
    --color-muted: var(--gruvbox-fg3);
    --color-link: var(--gruvbox-fg1);
    --color-link-hover: var(--gruvbox-blue-faded);
    --color-error: var(--gruvbox-red-faded);
    /* Empty part of progress bars. */
    --color-track: var(--gruvbox-bg1);
    /* Panels set apart from the page (OpenPGP keys): a step darker than
       it in light, and than the page's bg1 in dark. */
    --color-panel: var(--gruvbox-bg0-soft);
    /* Glyphs on an accent fill (app icons), the same in both schemes.
       palettes.css sets it for each palette. */
    --color-on-accent: #fbf1c7;

    --spacing: 1rem;
    --radius: 1rem;

    /* Form controls and scrollbars follow the palette in each scheme. */
    color-scheme: light;

    /* Gruvbox dark palette, held here and applied by the two blocks below
       (once for the OS preference, once for the explicit choice) so the
       values exist in exactly one place. The plain accents are the same in
       both schemes, as in Gruvbox itself; the "faded" slots, which this
       stylesheet uses for emphasis, take the dark scheme's bright variants. */
    --gruvbox-dark-bg0-hard: #1d2021;
    --gruvbox-dark-bg0: #282828;
    --gruvbox-dark-bg0-soft: #32302f;
    --gruvbox-dark-bg1: #3c3836;
    --gruvbox-dark-bg2: #504945;
    --gruvbox-dark-bg3: #665c54;
    --gruvbox-dark-bg4: #7c6f64;
    --gruvbox-dark-fg0: #fbf1c7;
    --gruvbox-dark-fg1: #ebdbb2;
    --gruvbox-dark-fg2: #d5c4a1;
    --gruvbox-dark-fg3: #bdae93;
    --gruvbox-dark-fg4: #a89984;
    --gruvbox-dark-red-bright: #fb4934;
    --gruvbox-dark-green-bright: #b8bb26;
    --gruvbox-dark-yellow-bright: #fabd2f;
    --gruvbox-dark-blue-bright: #83a598;
    --gruvbox-dark-purple-bright: #d3869b;
    --gruvbox-dark-aqua-bright: #8ec07c;
    --gruvbox-dark-orange-bright: #fe8019;
}

/* Dark scheme. The visitor's choice (`data-theme` on <html>, set from the
   `theme` cookie by the server and by the header toggle in the browser)
   beats the OS preference in both directions: the first block applies
   the OS's dark preference unless light was chosen, the second applies a
   dark choice regardless of the OS. The two must stay identical. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --gruvbox-bg0-hard: var(--gruvbox-dark-bg0-hard);
        --gruvbox-bg0: var(--gruvbox-dark-bg0);
        --gruvbox-bg0-soft: var(--gruvbox-dark-bg0-soft);
        --gruvbox-bg1: var(--gruvbox-dark-bg1);
        --gruvbox-bg2: var(--gruvbox-dark-bg2);
        --gruvbox-bg3: var(--gruvbox-dark-bg3);
        --gruvbox-bg4: var(--gruvbox-dark-bg4);
        --gruvbox-fg0: var(--gruvbox-dark-fg0);
        --gruvbox-fg1: var(--gruvbox-dark-fg1);
        --gruvbox-fg2: var(--gruvbox-dark-fg2);
        --gruvbox-fg3: var(--gruvbox-dark-fg3);
        --gruvbox-fg4: var(--gruvbox-dark-fg4);
        --gruvbox-red-faded: var(--gruvbox-dark-red-bright);
        --gruvbox-green-faded: var(--gruvbox-dark-green-bright);
        --gruvbox-yellow-faded: var(--gruvbox-dark-yellow-bright);
        --gruvbox-blue-faded: var(--gruvbox-dark-blue-bright);
        --gruvbox-purple-faded: var(--gruvbox-dark-purple-bright);
        --gruvbox-aqua-faded: var(--gruvbox-dark-aqua-bright);
        --gruvbox-orange-faded: var(--gruvbox-dark-orange-bright);
        /* The page sits on bg1 rather than bg0, so controls on the darker
           surface stand out, and all text and borders take the brightest
           foreground. */
        --color-bg: var(--gruvbox-bg1);
        --color-text: var(--gruvbox-fg0);
        --color-text-strong: var(--gruvbox-fg0);
        --color-muted: var(--gruvbox-fg0);
        --color-link: var(--gruvbox-fg0);
        --color-border: var(--gruvbox-fg0);
        --color-track: var(--gruvbox-bg2);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --gruvbox-bg0-hard: var(--gruvbox-dark-bg0-hard);
    --gruvbox-bg0: var(--gruvbox-dark-bg0);
    --gruvbox-bg0-soft: var(--gruvbox-dark-bg0-soft);
    --gruvbox-bg1: var(--gruvbox-dark-bg1);
    --gruvbox-bg2: var(--gruvbox-dark-bg2);
    --gruvbox-bg3: var(--gruvbox-dark-bg3);
    --gruvbox-bg4: var(--gruvbox-dark-bg4);
    --gruvbox-fg0: var(--gruvbox-dark-fg0);
    --gruvbox-fg1: var(--gruvbox-dark-fg1);
    --gruvbox-fg2: var(--gruvbox-dark-fg2);
    --gruvbox-fg3: var(--gruvbox-dark-fg3);
    --gruvbox-fg4: var(--gruvbox-dark-fg4);
    --gruvbox-red-faded: var(--gruvbox-dark-red-bright);
    --gruvbox-green-faded: var(--gruvbox-dark-green-bright);
    --gruvbox-yellow-faded: var(--gruvbox-dark-yellow-bright);
    --gruvbox-blue-faded: var(--gruvbox-dark-blue-bright);
    --gruvbox-purple-faded: var(--gruvbox-dark-purple-bright);
    --gruvbox-aqua-faded: var(--gruvbox-dark-aqua-bright);
    --gruvbox-orange-faded: var(--gruvbox-dark-orange-bright);
    /* The page sits on bg1 rather than bg0, so controls on the darker
       surface stand out, and all text and borders take the brightest
       foreground. */
    --color-bg: var(--gruvbox-bg1);
    --color-text: var(--gruvbox-fg0);
    --color-text-strong: var(--gruvbox-fg0);
    --color-muted: var(--gruvbox-fg0);
    --color-link: var(--gruvbox-fg0);
    --color-border: var(--gruvbox-fg0);
    --color-track: var(--gruvbox-bg2);
}

html {
    /* 100%, not smaller: anything else shrinks text on iOS in landscape. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

/* Interface text is Figtree; prose (paragraphs, leads, descriptions) stays
   in the body's Recoleta. */
label,
input,
select,
textarea,
button,
.button,
.help,
.notice,
.error,
.badge,
.aside,
.facts,
.list,
.skip-link,
.profile__handle,
.profile__joined,
.apps__empty,
.app__description {
    font-family: var(--font-ui);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--color-link);
}

a:hover {
    color: var(--color-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-link-hover);
    outline-offset: 2px;
}

strong {
    font-family: var(--font-display);
    font-weight: normal;
}

.page {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing);
}

/* Site header, as on rhys.wtf, with this app's name beside the title. */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.site-header__brand {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.6rem;
    min-width: 0;
}

.site-header__title {
    font-family: var(--font-italic);
    font-size: 3rem;
    color: var(--color-text-strong);
    text-decoration: none;
}

.site-header__title:hover,
.site-header__app:hover {
    color: var(--color-text-strong);
    text-decoration: underline;
}

.site-header__app {
    font-family: var(--font-ui);
    font-size: 1.6rem;
    color: var(--color-muted);
    text-decoration: none;
}

/* Top right, the same in every rhys.wtf app: the apps mark, opening the
   apps menu with the light/dark switch at its foot. */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The apps mark: a rounded square per app in its Gruvbox colour, faded in
   light and bright in dark (the tokens flip). Profiles is red, feeds
   purple, dailies orange; later apps add squares. */
.apps-mark { width: 2rem; height: 2rem; display: block; }
.apps-mark__red { fill: var(--gruvbox-red-faded); }
.apps-mark__orange { fill: var(--gruvbox-orange-faded); }
.apps-mark__yellow { fill: var(--gruvbox-yellow-faded); }
.apps-mark__green { fill: var(--gruvbox-green-faded); }
.apps-mark__aqua { fill: var(--gruvbox-aqua-faded); }
.apps-mark__gray { fill: var(--gruvbox-gray); }
.apps-mark__blue { fill: var(--gruvbox-blue-faded); }
.apps-mark__purple { fill: var(--gruvbox-purple-faded); }

/* An app's icon: its favicon glyph on a square in its colour. */
.app-icon { width: 2rem; height: 2rem; flex: none; }
.app-icon__back { fill: var(--gruvbox-blue-faded); }
.app-icon--red .app-icon__back { fill: var(--gruvbox-red-faded); }
.app-icon--purple .app-icon__back { fill: var(--gruvbox-purple-faded); }
.app-icon--blue .app-icon__back { fill: var(--gruvbox-blue-faded); }
.app-icon--green .app-icon__back { fill: var(--gruvbox-green-faded); }
.app-icon--orange .app-icon__back { fill: var(--gruvbox-orange-faded); }
.app-icon--yellow .app-icon__back { fill: var(--gruvbox-yellow-faded); }
.app-icon--aqua .app-icon__back { fill: var(--gruvbox-aqua-faded); }
.app-icon--gray .app-icon__back { fill: var(--gruvbox-gray); }
/* The glyphs carry fill="#fbf1c7" for copies without this stylesheet;
   here they follow the palette. */
.app-icon g,
.app-icon text { fill: var(--color-on-accent); }
.app-icon [stroke]:not([stroke="none"]) { stroke: var(--color-on-accent); }

/* The app switcher: click the mark for a list of every app. A <details>,
   so it works without JavaScript; the browser bundle (web/) closes it on an outside click. */
.apps-menu { position: relative; }

.apps-menu__button {
    list-style: none;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 0.6rem;
    line-height: 0;
}

.apps-menu__button::-webkit-details-marker { display: none; }
.apps-menu__button:hover,
.apps-menu[open] .apps-menu__button { background: var(--color-surface); }
.apps-menu__button:focus-visible { outline: 2px solid var(--color-link-hover); }

.apps-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 20;
    min-width: 17rem;
    padding: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.apps-menu__list { list-style: none; margin: 0; padding: 0; }

.apps-menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.6rem;
    text-decoration: none;
    color: var(--color-text);
}

.apps-menu__item:hover,
.apps-menu__item:focus-visible { background: var(--color-bg); }

.apps-menu__text { display: flex; flex-direction: column; min-width: 0; }
.apps-menu__name { font-family: var(--font-ui); font-size: 1.1rem; }
.apps-menu__desc { font-family: var(--font-ui); font-size: 0.9rem; color: var(--color-muted); }

/* The menu's last row, under a rule: the light/dark switch, laid out like
   an app (glyph in a 2rem box, then its name). The moon and "Dark mode"
   show in the light scheme, the sun and "Light mode" in the dark. */
.apps-menu__rule {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 0.5rem 0.25rem;
}

.theme-toggle {
    margin: 0;
}

.theme-toggle__button {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.theme-toggle__glyph {
    width: 2rem;
    height: 2rem;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--color-text-strong);
}

.theme-toggle__icon,
.menu-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: none;
}

.menu-icon,
.theme-toggle__icon--moon,
.theme-toggle__label--to-dark {
    display: block;
}

.theme-toggle__label--to-light {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__icon--moon,
    :root:not([data-theme="light"]) .theme-toggle__label--to-dark {
        display: none;
    }

    :root:not([data-theme="light"]) .theme-toggle__icon--sun,
    :root:not([data-theme="light"]) .theme-toggle__label--to-light {
        display: block;
    }
}

:root[data-theme="dark"] .theme-toggle__icon--moon,
:root[data-theme="dark"] .theme-toggle__label--to-dark {
    display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--sun,
:root[data-theme="dark"] .theme-toggle__label--to-light {
    display: block;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    padding: 0.5rem 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    z-index: 10;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* Home hero, as rhys.wtf's greeting. */
.greeting {
    text-align: center;
    margin: 2rem 0 3rem;
}

.greeting__hello {
    font-family: var(--font-display);
    font-size: clamp(3rem, 12vw, 6rem);
    font-weight: normal;
    color: var(--color-text-strong);
    margin: 0;
    line-height: 1;
}

.greeting__welcome {
    font-family: var(--font-body);
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    color: var(--color-text-strong);
    margin: 0.5rem 0 0;
}

.lead {
    font-size: 1.2rem;
}

/* Section heading: title and rule. */
.section-header {
    margin-bottom: 1rem;
}

.section-header__title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: normal;
    color: var(--color-text-strong);
    margin: 0 0 -0.25rem 0;
}

.section-header__rule {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 0;
}

/* Sign-in-sized pages: rhys.wtf's login column. */
.narrow {
    max-width: 24rem;
    margin: 2rem auto;
}

.narrow__title,
.page-title {
    font-family: var(--font-display);
    font-weight: normal;
    margin: 0 0 1rem 0;
}

.page-title {
    font-size: 2.5rem;
    color: var(--color-text-strong);
}

.narrow-form {
    max-width: 24rem;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    min-width: 0;
    padding: 0.5rem;
    font-size: 1rem;
    font-family: var(--font-ui);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}

.prefixed {
    display: flex;
    align-items: stretch;
}

/* The prefix keeps its width and stays on one line ("/d/" would
   otherwise break at each slash); the input takes the rest of the row. */
.prefixed__prefix {
    flex: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    border: 1px solid var(--color-border);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--gruvbox-bg0-soft);
    color: var(--color-muted);
}

.prefixed input {
    flex: 1;
    width: auto;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.help {
    font-size: 0.95rem;
    color: var(--color-muted);
    margin: 0;
}

.help:empty {
    display: none;
}

/* Buttons: rhys.wtf's outlined pills. */
.button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5rem 1rem;
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.5;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--gruvbox-bg0-soft);
    color: var(--color-text);
}

.button:disabled {
    opacity: 0.55;
    cursor: progress;
}

.button--small {
    display: inline-block;
    width: auto;
    padding: 0.35rem 0.75rem;
}

/* Account settings and Edit profile: every button fits its label, the
   same size as .button--small, rather than spanning the form. The
   sign-in and sign-up pages keep their full-width buttons. */
.account .button {
    display: inline-block;
    width: auto;
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
}

.button--danger {
    border-color: var(--color-error);
    color: var(--color-error);
}

.button--danger:hover {
    background: var(--color-error);
    color: var(--color-bg);
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rule {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

.aside {
    margin-top: 1.25rem;
}

details summary {
    cursor: pointer;
    text-decoration: underline;
    margin: 0.5rem 0;
}

details[open] summary {
    margin-bottom: 0.75rem;
}

/* Messages: rhys.wtf's .error box, and a neutral twin. */
.error,
.notice {
    padding: 0.5rem var(--spacing);
    border: 1px solid var(--color-error);
    border-radius: var(--radius);
    margin: 0 0 1rem;
}

/* On the surface, not the page: in the dark schemes the bright reds
   only pass AA on the darker surface (Gruvbox's #fb4934 is 3.4:1 on its
   dark page, 4.8:1 on the surface). */
.error {
    color: var(--color-error);
    background: var(--color-surface);
}

.notice {
    border-color: var(--color-border);
    background: var(--color-surface);
}

.error p,
.notice p {
    margin: 0.25rem 0;
}

/* First-time setup */
.choice {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
    margin-top: 1rem;
}

.choice__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.4rem;
    margin: 0;
}

.choice--fallback summary {
    color: var(--color-muted);
}

.badge {
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--gruvbox-green-faded);
    border: 1px solid currentColor;
    border-radius: var(--radius);
    padding: 0 0.5rem;
}

.passkey-create,
.passkey-login {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Account */
.account__section {
    margin-top: 2.5rem;
}

/* Label beside value while the facts' own box has room, stacked below
   30rem of it (a container query on .facts-box or .account, not the
   window). */
.facts-box,
.account {
    container-type: inline-size;
}

.facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.25rem 1.5rem;
    font-size: 1.1rem;
    margin: 0;
}

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

.facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.list__item form {
    margin: 0;
}

/* A list item's text may hold a path, an address or an error: it wraps
   rather than pushing the item past the page. */
.list__item > div {
    min-width: 0;
    overflow-wrap: break-word;
}

.account__aside {
    margin-top: 1rem;
}

/* Edit profile: the profile as others see it. */
.profile-preview {
    margin: 1.5rem 0 0;
    padding: 0.5rem 1rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.profile-preview__caption {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--color-muted);
}

.profile--preview {
    margin: 0.5rem 0 0;
}

.profile--preview .profile__avatar {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2.25rem;
}

.profile--preview .profile__name {
    font-size: 2rem;
}

.profile__own {
    font-family: var(--font-ui);
}

/* Account settings: the theme, a card per palette with a light and a dark
   preview. */
.palette-options {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.palette-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    cursor: pointer;
}

.palette-option:has(input:checked) {
    outline: 2px solid var(--color-border);
    outline-offset: -3px;
}

.palette-option input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--color-text);
}

.palette-option__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.palette-option__name {
    font-family: var(--font-display);
    font-size: 1.3rem;
}

.palette-option__desc {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--color-muted);
}

.palette-option__cards {
    display: flex;
    gap: 0.5rem;
}

.palette-card {
    width: 6rem;
    height: 3.75rem;
    display: block;
    /* So a card the page's own colour still shows its edge. */
    border-radius: 6px;
    outline: 1px solid var(--color-border);
}

.palette-form__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

@media (max-width: 36rem) {
    .palette-option {
        grid-template-columns: auto 1fr;
    }

    .palette-option__cards {
        grid-column: 2;
    }
}

/* Public profile */
.profile {
    text-align: center;
    margin: 2rem 0 3rem;
}

.profile__avatar {
    width: 6rem;
    height: 6rem;
    margin: 0 auto 1rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-family: var(--font-display);
    font-size: 3rem;
}

.profile__name {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: clamp(2rem, 6vw, 3rem);
    color: var(--color-text-strong);
    margin: 0;
    line-height: 1.1;
}

.profile__handle {
    font-size: 1.25rem;
    color: var(--color-muted);
    margin: 0.25rem 0 0;
}

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

/* A picture fills the avatar disc; without one it shows the initial. The
   <picture> around it (for JPEG XL and AVIF) takes no part in the layout. */
picture.avatar {
    display: contents;
}

img.profile__avatar,
img.picture__preview {
    display: block;
    object-fit: cover;
    padding: 0;
}

.profile__bio {
    max-width: 32rem;
    margin: 1rem auto 0.5rem;
    font-size: 1.15rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Account: the picture beside its forms. */
.picture {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin: 0 0 1.5rem;
}

.picture__preview {
    width: 6rem;
    height: 6rem;
    flex: none;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-family: var(--font-display);
    font-size: 3rem;
}

.picture__forms {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.picture__forms .form {
    margin: 0;
    align-items: flex-start;
}

textarea {
    resize: vertical;
    line-height: 1.4;
}

input[type="file"] {
    font-family: var(--font-ui);
    max-width: 100%;
}

@media (max-width: 30rem) {
    .picture {
        flex-direction: column;
    }
}

/* Your apps: tiles on your own profile, like rhys.wtf's album cards. */
.apps {
    margin-bottom: 3rem;
}

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

.apps__grid {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
    gap: 1.5rem;
}

.app__link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    box-sizing: border-box;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-decoration: none;
}

.app__link:hover .app__name,
.app__link:focus-visible .app__name {
    color: var(--color-link-hover);
}

.app__link .app-icon { width: 3rem; height: 3rem; }

.app__name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    text-decoration: underline;
    margin-top: 0.4rem;
}

.app__description {
    color: var(--color-muted);
    font-size: 1.05rem;
}

/* Site footer, as on rhys.wtf: the one place outside the type system's
   rules, in Recoleta like the rest of rhys.wtf's footer, links and
   sign-out button included. */
.site-footer {
    font-family: var(--font-body);
    text-align: center;
    font-size: 1.2rem;
    padding: 0 var(--spacing) 1rem;
    width: 100%;
}

.site-footer__rule {
    border: 0;
    border-top: 1px solid var(--color-border);
    width: 30%;
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.5rem;
}

.site-footer__links li + li::before {
    content: "⁕";
    margin-right: 0.5rem;
}

.site-footer__link {
    font-size: 1.3rem;
    text-decoration: underline;
}

.site-footer__form {
    display: inline;
    margin: 0;
}

.site-footer__button {
    font-family: var(--font-body);
    color: var(--color-link);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.site-footer__button:hover {
    color: var(--color-link-hover);
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 30rem) {
    .site-header__title {
        font-size: 2.4rem;
    }

    .site-header__app {
        font-size: 1.3rem;
    }
}

@container (width < 30rem) {
    .facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .facts dd {
        margin-bottom: 0.4rem;
    }
}

/* Admin */
.admin-search {
    display: flex;
    gap: 0.5rem;
    max-width: 32rem;
    margin: 0 0 0.5rem;
}

input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.75rem;
    font-size: 1rem;
    font-family: var(--font-ui);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}

/* The admin tables are rows.css's tables of records: across while their
   own box has room for their columns, a record per row below that. Each
   --rows-min is the width its columns need with usual content before they
   squeeze (measured on staging, 2026-11-09): the accounts' six columns
   with a long name and dates on two lines, and so on. */
.admin-rows {
    margin: 1rem 0;
}

.admin-rows--accounts { --rows-min: 46rem; }
.admin-rows--briefs { --rows-min: 48rem; }
.admin-rows--top { --rows-min: 24rem; }
.admin-rows--recent { --rows-min: 40rem; }
.admin-rows--queue { --rows-min: 44rem; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: 0.95rem;
}

.admin-table th {
    text-align: left;
    font-weight: normal;
    color: var(--color-muted);
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: bottom;
}

.admin-table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--gruvbox-bg2);
    vertical-align: top;
}

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

/* The account (handle, name, email) wraps anywhere, so without a share
   of its own it would take all the room a long name asks for. */
.admin-table__account {
    width: 30%;
    min-width: 12rem;
}

/* Each app's last-active day on one line. */
.admin-table__apps span {
    white-space: nowrap;
}

.admin-table__email {
    color: var(--color-muted);
    font-size: 0.9em;
}

/* Stacked records (rows.css): the account heads its record at full
   width (its 30% is the table's), and a job and the line saying why it
   waits are one record. */
@container rows (width < 100rem) {
    .admin-table__account {
        width: auto;
        min-width: 0;
    }

    .admin-table .transcription__job--with-why {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .admin-table .transcription__why {
        padding-top: 0.25rem;
    }
}

.admin-pages {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    font-family: var(--font-ui);
}

/* The picture beside the name and handle while they fit beside it on
   one line, above them when not; a name or handle longer than the line
   breaks where it must. */
.admin-user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.admin-user__names {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

.admin-user .page-title {
    margin: 0;
}

.badge--bad {
    color: var(--color-error);
}

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

.badge--admin {
    color: var(--gruvbox-purple-faded);
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.inline-form {
    display: inline;
    margin: 0;
}

.profile__bio--left {
    white-space: pre-line;
}

/* OpenPGP keys: fingerprints in groups of four, wrapping only between
   groups; each key on Account settings, and all of them on a profile, in
   a centred panel on its own background; the paste box. */
.fingerprint {
    font-family: var(--font-mono);
    font-size: 0.95em;
    word-spacing: 0.1em;
    overflow-wrap: normal;
}
.key-card,
.profile__keys {
    box-sizing: border-box;
    max-width: 36rem;
    margin: 1rem auto;
    padding: 1rem 1.25rem;
    text-align: center;
    font-family: var(--font-ui);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.profile__keys {
    margin-top: 1.5rem;
}
.profile__keys-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--color-text-strong);
}
.key-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}
.key-list li + li {
    margin-top: 0.5rem;
}
.key-list__ids {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    font-size: 0.9rem;
    color: var(--color-muted);
}
.key-list .key-list__ids li + li {
    margin-top: 0.1rem;
}
.key-card__fingerprint {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}
.key-card__list {
    list-style: none;
    margin: 0.5rem 0 0.75rem;
    padding: 0;
}
.key-card__list li + li {
    margin-top: 0.15rem;
}
.key-card form {
    margin: 0.6rem 0 0;
}
.profile__keys .help,
.key-card .help {
    margin: 0;
}
.key-confirm {
    margin-top: 1.25rem;
}
.key-confirm > .help {
    margin-bottom: 0.75rem;
}
.key-input {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    width: 100%;
}

/* Account settings' sessions: a device per row, with its sign-out button
   beside it (under it on a phone). */
.session {
    align-items: flex-start;
}

.session__about {
    min-width: 0;
}

.session__about p {
    margin: 0;
}

.session__device {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    font-family: var(--font-ui);
}

.session form {
    flex: none;
}

.apps-used .list__item {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

@media (max-width: 30rem) {
    .session {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* A checkbox with its label beside it and the help under both. */
.field--check {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.field--check input {
    accent-color: var(--color-error);
}

.field--check .help {
    grid-column: 2;
}

.steps {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.steps li {
    margin-bottom: 0.4rem;
}

/* Admin: an account's content across the apps. */
/* The accounts list's "Last active in the apps": folded behind its
   latest, opened with the same ▸ as the apps' content sections. */
.admin-apps > summary {
    cursor: pointer;
    list-style: none;
}

.admin-apps > summary::-webkit-details-marker { display: none; }

.admin-apps > summary::before {
    content: "▸";
    display: inline-block;
    width: 1ch;
    margin-right: 0.35em;
    transition: transform 0.15s;
}

.admin-apps[open] > summary::before {
    transform: rotate(90deg);
}

.admin-apps[open] > summary {
    margin-bottom: 0.25rem;
}

.app-content {
    margin-top: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0 var(--spacing);
}

/* The summary is the app's name and counts: a row to click, not a link. */
.app-content > summary.app-content__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin: 0;
    padding: 0.6rem 0;
    text-decoration: none;
    list-style: none;
}

.app-content > summary.app-content__summary::-webkit-details-marker { display: none; }

.app-content > summary.app-content__summary::before {
    content: "▸";
    display: inline-block;
    width: 1ch;
    transition: transform 0.15s;
}

.app-content[open] > summary.app-content__summary::before {
    transform: rotate(90deg);
}

.app-content[open] {
    padding-bottom: 0.5rem;
}

.app-content[open] > summary.app-content__summary {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.5rem;
}

.app-content__title {
    display: inline;
    font-size: 1.2rem;
    margin: 0;
}

.app-content__counts {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--color-muted);
}

.app-content__storage {
    font-family: var(--font-ui);
}

.app-content__items .list__item {
    padding: 0.4rem 0;
}

.app-content__items .help {
    margin: 0.15rem 0 0;
}

.app-content__text {
    margin: 0.3rem 0;
    padding-left: 0.75rem;
    border-left: 2px solid var(--color-border);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The admin Transcription page: the spend meter, the strategy choices
   and each job's buttons. */
.transcription__meter {
    display: block;
    width: 100%;
    height: 1rem;
    margin: 0.25rem 0 0.75rem;
}
.transcription__strategy fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin: 0 0 0.5rem;
    padding: 0.5rem 1rem 0.75rem;
    font-family: var(--font-ui);
}
.transcription__choice {
    display: block;
    margin: 0.25rem 0;
}
.transcription__strategy {
    margin-bottom: 1rem;
}
.transcription__pause {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.transcription__pause input {
    width: auto;
    flex: 1 1 12rem;
    max-width: 22rem;
}
.admin-table .transcription__job--with-why td {
    border-bottom: none;
    padding-bottom: 0.15rem;
}
.admin-table .transcription__why td {
    padding-top: 0;
    color: var(--color-muted);
}
.transcription__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Claude briefs: the Transcription page's cap fields, and each brief on
   the Close friends page. */
.briefs__cap input {
    flex: 0 1 6rem;
}
.friends__brief {
    flex: 1 1 auto;
    min-width: 0;
}
.friends__brief .help {
    margin: 0.2rem 0;
}
.friends__brief details {
    margin: 0.35rem 0 0.5rem;
}

/* The hub: someone's comments, the inbox, messages (hub_views.rs). */
.tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-ui);
}

.tabs__tab {
    padding: 0.4rem 0.9rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 0.6rem 0.6rem 0 0;
    text-decoration: none;
    margin-bottom: -1px;
}

.tabs__tab[aria-current="page"] {
    border-color: var(--color-border);
    background: var(--color-bg);
    font-weight: bold;
}

.profile-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.profile-strip__picture,
.person__picture {
    display: block;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-panel);
}

.profile-strip__picture { width: 4rem; height: 4rem; }
.profile-strip__name { font-family: var(--font-display); font-weight: normal; font-size: 1.8rem; margin: 0; }
.profile-strip__handle { font-family: var(--font-ui); color: var(--color-muted); margin: 0; }

.person {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-ui);
    text-decoration: none;
    vertical-align: middle;
}

.person__picture { width: 2rem; height: 2rem; }
.person__handle { color: var(--color-muted); }

.hub-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.hub-head__links,
.hub-back,
.pager,
.filters,
.inbox__when,
.inbox__what,
.comment-card__meta,
.message__meta,
.message__actions,
.conversation__link,
.activity__app,
.report__meta,
.live-frame__body {
    font-family: var(--font-ui);
}

.activity,
.activity__comments,
.replies__list,
.inbox,
.conversations,
.messages,
.reports,
.blocked {
    list-style: none;
    margin: 0;
    padding: 0;
}

.activity { margin-top: 1.25rem; }

.activity__thread {
    margin: 0 0 2rem;
}

.activity__private { font-style: italic; }

.activity__title {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.35rem;
    margin: 0;
}

.activity__app {
    color: var(--color-muted);
    margin: 0 0 0.75rem;
}

.activity__comment { margin: 0 0 1rem; }

.comment-card,
.message,
.report {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 0.6rem var(--spacing);
}

.comment-card__meta,
.message__meta,
.report__meta {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin: 0 0 0.25rem;
}

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

.comment-card__stub,
.message__stub {
    font-family: var(--font-ui);
    font-style: italic;
    color: var(--color-muted);
    margin: 0;
}

.replies {
    margin: 0.4rem 0 0 1.25rem;
}

.replies summary {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    margin: 0.25rem 0;
}

.replies__list li { margin: 0 0 0.5rem; }

/* Comments' and messages' Markdown, made safe by Comments. */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md img { max-width: 100%; height: auto; }
.md blockquote {
    margin: 0.5rem 0;
    padding-left: 0.75rem;
    border-left: 3px solid var(--color-track);
    color: var(--color-muted);
}
.md pre,
.md code { font-family: var(--font-mono); font-size: 0.9em; }
.md pre {
    overflow-x: auto;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: var(--color-panel);
}
.md table { border-collapse: collapse; }
.md td,
.md th { border: 1px solid var(--color-track); padding: 0.2rem 0.4rem; }

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.filters__filter {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
}

.filters__filter[aria-current="page"] {
    background: var(--color-text);
    color: var(--color-bg);
}

.filters__all { margin-left: auto; }

.inbox__entry {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-track);
}

.inbox__dot {
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: var(--gruvbox-red);
}

.inbox__main { flex: 1; min-width: 0; }
.inbox__what,
.inbox__text,
.inbox__when { margin: 0; overflow-wrap: anywhere; }
.inbox__entry:not(.inbox__entry--unread) .inbox__what { color: var(--color-muted); }
.inbox__text { margin: 0.15rem 0; }
.inbox__when { font-size: 0.85rem; color: var(--color-muted); }

.new-message { margin: 0 0 1.5rem; }

.conversation {
    border-bottom: 1px solid var(--color-track);
}

.conversation__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    text-decoration: none;
}

.conversation__main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.conversation__last {
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation--unread .conversation__who { font-weight: bold; }

.conversation__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex: none;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.count {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: var(--radius);
    background: var(--gruvbox-red-faded);
    color: var(--color-on-accent);
    text-align: center;
    font-weight: bold;
}

.conversation-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 0 1rem;
}

.conversation-head__block { margin-left: auto; font-family: var(--font-ui); }

.messages {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0 0 1rem;
}

.message {
    max-width: min(36rem, 90%);
    align-self: flex-start;
}

.message--mine {
    align-self: flex-end;
    background: var(--color-panel);
}

.message__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.9rem;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.inline-confirm summary { margin: 0; }
.inline-confirm[open] summary { margin-bottom: 0.4rem; }

.composer__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.live-frame {
    display: block;
    width: 100%;
    height: 3rem;
    border: 0;
}

.live-frame__body {
    margin: 0;
    background: transparent;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.options {
    border: 0;
    padding: 0;
    margin: 0 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-family: var(--font-ui);
}

.options legend { font-weight: bold; margin-bottom: 0.25rem; }

.blocked li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
}

.report { margin: 0 0 1rem; }
.report__reason { font-family: var(--font-ui); margin: 0.4rem 0 0; }

@media (max-width: 30rem) {
    .message { max-width: 100%; }
    .filters__all { margin-left: 0; }
}

.account__subhead {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.15rem;
    margin: 1.25rem 0 0.5rem;
}

/* Recovery codes, the one time they're shown: a numbered list in the
   monospaced face, two columns where there's room. Printed, the page is
   the codes and what they're for, without the site's header, footer and
   buttons. */
.recovery-codes__list {
    columns: 2 14rem;
    margin: 1rem 0;
    padding-left: 2rem;
}

.recovery-codes__list li {
    padding: 0.25rem 0;
    break-inside: avoid;
}

.recovery-codes__code {
    font-family: var(--font-mono);
    font-size: 1.05em;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

@media print {
    .recovery-codes ~ *,
    .site-header__actions,
    .site-footer,
    .skip-link,
    .recovery-codes__actions {
        display: none;
    }
    .recovery-codes__list {
        columns: 1;
    }
}