/* notes.rhys.wtf, in rhys.wtf's design language. The fonts, palette,
   tokens, dark scheme, header, toggle, apps mark and menu, section
   headings, footer and form controls are copied from links' static/main.css
   (from dailies', from profiles', itself from rhyswtf-rs/style/main.css):
   keep them in step. Notes' own parts are at the end. 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: 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. */
    --font-body: Recoleta, system-ui, -apple-system, sans-serif, var(--font-emoji);
    --font-display: RecoletaBold, Recoleta, system-ui, sans-serif, var(--font-emoji);
    --font-ui: Figtree, system-ui, -apple-system, sans-serif, var(--font-emoji);
    --font-italic: Lora-Italic, Georgia, serif;
    /* The device's own colour emoji, last, for what the fonts above
       don't have (a task's 📅, ✅): not a box. The rendered page, the
       textarea being written in and its twin all use these same stacks,
       so an emoji is as wide in each. */
    --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

    /* 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);
    /* 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,
.hint,
.facts,
.list,
.skip-link,
.card__meta,
.card__empty,
.day__date,
.archive__date,
.edition__meta,
.edition__nav,
.token {
    font-family: var(--font-ui);
}

/* Selected text, in the editor too, in the palette's own colours rather
   than the browser's blue: text (fg1 or dark-fg0) on bg2 passes AA in
   every palette and scheme. */
::selection {
    background: var(--gruvbox-bg2);
    color: var(--color-text);
}

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; app.js 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="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="time"],
select,
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;
}

.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);
}

.hint {
    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;
}

/* Above an admin's view of someone's notes (admin_view.rs): whose they
   are, that it's read-only, and that it's recorded. */
.admin-banner {
    font-weight: 700;
    padding: 0.6rem 1rem;
    border: 2px solid var(--color-error);
    border-radius: 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    margin: 0 0 1rem;
}

.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;
}

/* 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);
}

.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;
    }

    .facts {
        grid-template-columns: 1fr;
    }

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


/* ------------------------------------------------------------------ */
/* Notes' own parts. Notes is green: --gruvbox-green-faded.             */

:root {
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace, var(--font-emoji);
    --sidebar: 17rem;
    --accent: var(--gruvbox-green-faded);
}

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

code,
pre {
    font-family: var(--mono);
    font-size: 0.9em;
}

mark {
    background: var(--gruvbox-yellow);
    color: var(--gruvbox-dark-bg0);
    border-radius: 0.2em;
    padding: 0 0.1em;
}

.link-button {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

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

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

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

.plain-list li {
    padding: 0.2rem 0;
    overflow-wrap: anywhere;
}

.section-title {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.35rem;
    color: var(--color-text-strong);
    margin: 1.5rem 0 0.5rem;
}

.check {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

/* The shell: the sidebar beside the page. */
.shell {
    flex: 1;
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    gap: 0 2rem;
    width: 100%;
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 var(--spacing) var(--spacing);
}

.content {
    min-width: 0;
    padding: 0.5rem 0 1rem;
}

.sidebar {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    padding: 0.5rem 0 1rem;
    min-width: 0;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar__top {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.sidebar__close,
.sidebar-toggle {
    display: none;
}

.sidebar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sidebar__actions form {
    margin: 0;
}

.sidebar__search input,
.search input[type="search"] {
    width: 100%;
    min-width: 0;
    padding: 0.45rem 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);
}

.sidebar__section {
    margin: 0 0 1rem;
}

.sidebar__title {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.1rem;
    margin: 0 0 0.3rem;
    color: var(--color-text-strong);
}

.sidebar__title a {
    text-decoration: none;
}

.sidebar__title a:hover {
    text-decoration: underline;
}

/* The folder tree: folders open and shut (<details>), pages are links. */
.tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tree .tree {
    margin-left: 0.55rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--color-track);
}

.tree details summary {
    margin: 0;
    text-decoration: none;
    list-style: none;
    padding: 0.1rem 0;
}

.tree details summary::-webkit-details-marker {
    display: none;
}

.tree__summary::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    color: var(--color-muted);
    transition: transform 0.1s;
}

.tree details[open] > .tree__summary::before {
    transform: rotate(90deg);
}

.tree__name {
    color: var(--color-text-strong);
}

.tree__page a,
.side-list a {
    display: block;
    padding: 0.08rem 0 0.08rem 1em;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-list a {
    padding-left: 0;
}

.tree__page a:hover,
.side-list a:hover {
    text-decoration: underline;
}

/* The page shown: tinted, with Notes' green down its left edge, so it
   stands out from the links around it. */
.tree a[aria-current="page"],
.side-list a[aria-current="page"] {
    color: var(--color-text-strong);
    font-weight: 600;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow: inset 3px 0 0 var(--accent);
    border-radius: 0 4px 4px 0;
}

.side-list a[aria-current="page"] {
    padding-left: 0.6em;
}

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

.side-tags {
    margin: 0;
    line-height: 2;
}

/* Tags: small pills. */
.tag {
    display: inline-block;
    padding: 0 0.5rem;
    border: 1px solid var(--color-track);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    line-height: 1.6;
    text-decoration: none;
    color: var(--accent);
    background: var(--color-surface);
    white-space: nowrap;
}

.tag:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.tag__count {
    margin-left: 0.35em;
    color: var(--color-muted);
    font-size: 0.8em;
}

.tag--on {
    border-color: var(--accent);
}

.tag--on a {
    text-decoration: none;
    margin-left: 0.2em;
}

/* A page's head: where it is, and what can be done with it. */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0 0 0.75rem;
}

.crumbs {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--color-muted);
    overflow-wrap: anywhere;
    min-width: 0;
}

.crumbs [aria-current] {
    color: var(--color-text-strong);
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    font-family: var(--font-ui);
}

.page-actions__link {
    font-family: var(--font-ui);
    font-size: 0.95rem;
}

.page-meta {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 1.5rem 0 0;
}

/* Frontmatter, as a small table of properties. */
.properties {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.1rem 1rem;
    margin: 0 0 0.75rem;
    padding: 0.4rem 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    border-left: 3px solid var(--color-track);
}

.properties__row {
    display: contents;
}

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

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

.page-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem;
    margin: 0 0 1rem;
    font-family: var(--font-ui);
}

.add-tag {
    font-size: 0.85rem;
}

.add-tag summary {
    margin: 0;
    display: inline;
    list-style: none;
    color: var(--color-muted);
}

.add-tag summary::-webkit-details-marker {
    display: none;
}

.add-tag[open] {
    flex-basis: 100%;
}

.add-tag__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0;
    max-width: 28rem;
}

.add-tag__form input[type="text"] {
    flex: 1 1 10rem;
    width: auto;
    padding: 0.3rem 0.6rem;
}

/* A note as it reads: Recoleta, a comfortable measure. */
.note {
    max-width: 46rem;
    font-size: 1.08rem;
    overflow-wrap: anywhere;
}

.note > :first-child {
    margin-top: 0;
}

.note h1,
.note h2,
.note h3,
.note h4,
.note h5,
.note h6 {
    font-family: var(--font-display);
    font-weight: normal;
    color: var(--color-text-strong);
    line-height: 1.2;
    margin: 1.4em 0 0.5em;
    scroll-margin-top: 1rem;
}

.note h1 { font-size: 2.2rem; }
.note h2 { font-size: 1.6rem; }
.note h3 { font-size: 1.3rem; }
.note h4,
.note h5,
.note h6 { font-size: 1.1rem; }

.note ul,
.note ol {
    padding-left: 1.4rem;
}

.note li > ul,
.note li > ol {
    margin: 0.15rem 0;
}

/* A task's list item: the checkbox is the marker. */
.note li:has(> .task),
.note li:has(> p > .task) {
    list-style: none;
    margin-left: -1.4rem;
}

.note li:has(> .task) > ul,
.note li:has(> p > .task) > ul {
    margin-left: 1.4rem;
}

.note blockquote {
    margin: 1rem 0;
    padding: 0.1rem 1rem;
    border-left: 3px solid var(--color-track);
    color: var(--color-text-strong);
}

.note blockquote[class^="markdown-alert"] {
    border-left-color: var(--accent);
    background: var(--color-surface);
}

.note :not(pre) > code {
    padding: 0.05em 0.3em;
    border-radius: 0.3em;
    background: var(--color-surface);
    border: 1px solid var(--color-track);
}

/* Mermaid diagrams (rhyswtf-mermaid's mermaid.css): their surfaces are
   mixed from the page's own background. */
.mermaid {
    --mermaid-page: var(--color-bg);
}

.note pre {
    padding: 0.75rem 1rem;
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
    line-height: 1.45;
}

.note table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1rem 0;
    font-family: var(--font-ui);
    font-size: 0.95rem;
}

.note th,
.note td {
    border: 1px solid var(--color-track);
    padding: 0.3rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.note th {
    background: var(--color-surface);
}

.note hr {
    border: 0;
    border-top: 1px solid var(--color-track);
    margin: 1.5rem 0;
}

.note img {
    max-width: 100%;
    height: auto;
}

/* Handwriting pages and other embedded pictures: on a card, so a white
   scan sits well in the dark scheme too. */
.note img.embed {
    display: block;
    margin: 1rem 0;
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
    background: #fff;
}

.wiki {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.wiki--missing {
    color: var(--color-muted);
    text-decoration-style: dashed;
}

.wiki--missing::after {
    content: " +";
    font-family: var(--font-ui);
    font-size: 0.8em;
}

.wiki--ambiguous {
    text-decoration-style: dotted;
}

.wiki--file::before {
    content: "📎 ";
}

/* SilverBullet's live blocks: shown, labelled, not run. */
.sb-block {
    margin: 1rem 0;
    border: 1px dashed var(--color-track);
    border-radius: calc(var(--radius) / 2);
    padding: 0.4rem 0.6rem 0.1rem;
}

.sb-block__label {
    margin: 0 0 0.3rem;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--color-muted);
}

.sb-block pre {
    margin: 0 0 0.5rem;
    white-space: pre-wrap;
}

.sb-expr {
    border-style: dashed !important;
    color: var(--color-muted);
}

.footnote-definition {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin: 0.5rem 0;
}

.footnote-definition p {
    display: inline;
}

.footnote-definition-label {
    margin-right: 0.4em;
}

/* Task checkboxes: buttons, so they work in any paragraph and without
   script (they post the page's task form). */
.task {
    display: inline-block;
    box-sizing: border-box;
    width: 1.05em;
    height: 1.05em;
    margin: 0 0.35em 0 0;
    padding: 0;
    vertical-align: -0.15em;
    border: 1.5px solid var(--color-border);
    border-radius: 0.25em;
    background: var(--color-surface);
    cursor: pointer;
    position: relative;
}

.task[aria-checked="true"] {
    background: var(--accent);
    border-color: var(--accent);
}

.task[aria-checked="true"]::after {
    content: "";
    position: absolute;
    left: 0.3em;
    top: 0.08em;
    width: 0.25em;
    height: 0.5em;
    border: solid var(--color-surface);
    border-width: 0 0.13em 0.13em 0;
    transform: rotate(45deg);
}

.task:hover {
    border-color: var(--accent);
}

.task--static {
    cursor: default;
}

.task[aria-busy="true"] {
    opacity: 0.5;
}

.note li:has(> .task[aria-checked="true"]) {
    color: var(--color-muted);
}

.backlinks {
    margin-top: 2rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-track);
    font-family: var(--font-ui);
}

/* The dashboard: dailies and open tasks, beside each other on wide
   screens. */
.dashboard {
    margin-top: 2rem;
}

.dashboard--top {
    margin: 0 0 2rem;
}

.home-index {
    padding-top: 1rem;
    border-top: 1px solid var(--color-track);
}

.dashboard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem 1.5rem;
}

.panel {
    padding: 0.25rem 1rem 0.75rem;
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
    background: var(--color-surface);
    font-family: var(--font-ui);
    min-width: 0;
}

.panel .section-title {
    margin-top: 0.75rem;
}

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

.task-list__item {
    padding: 0.25rem 0;
    overflow-wrap: anywhere;
}

.task-list__page {
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* The editor: Comments' editor, page-sized. */
.editor {
    margin: 0;
}

.editor__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.25rem 1rem;
}

.editor__tabs {
    display: flex;
    gap: 0.25rem;
}

.editor__tab {
    padding: 0.25rem 0.9rem;
    border: 1px solid var(--color-track);
    border-bottom: 0;
    border-radius: calc(var(--radius) / 3) calc(var(--radius) / 3) 0 0;
    background: transparent;
    font: inherit;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--color-muted);
    cursor: pointer;
}

.editor__tab[aria-selected="true"] {
    color: var(--color-text);
    background: var(--color-surface);
    border-color: var(--color-muted);
}

.editor__status {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--color-muted);
    padding-bottom: 0.2rem;
}

.editor__status--error {
    color: var(--color-error);
}

.editor__body {
    display: block;
    width: 100%;
    min-height: 60vh;
    padding: 0.75rem 0.9rem;
    font-family: var(--mono);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-muted);
    border-radius: 0 calc(var(--radius) / 3) calc(var(--radius) / 3) calc(var(--radius) / 3);
    resize: vertical;
    tab-size: 4;
}

.editor__body[hidden],
.editor__preview[hidden] {
    display: none;
}

.editor--dragging .editor__body {
    border-style: dashed;
    border-color: var(--accent);
}

.editor__preview {
    min-height: 60vh;
    max-width: none;
    padding: 0.75rem 0.9rem;
    border: 1px dashed var(--color-muted);
    border-radius: 0 calc(var(--radius) / 3) calc(var(--radius) / 3) calc(var(--radius) / 3);
}

.editor__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    margin: 0.5rem 0;
    font-family: var(--font-ui);
    font-size: 0.9rem;
}

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

.editor__attach {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-muted);
}

.editor__attach input {
    max-width: 14rem;
    font-size: 0.85rem;
}

.editor__hint {
    color: var(--color-muted);
    margin-left: auto;
}

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

.editor__buttons .button:first-child {
    display: inline-block;
    width: auto;
    padding: 0.4rem 1.5rem;
}

/* With the script, the second Preview button is the tab instead, and
   files go in by paste, drop or picker. */
.editor--scripted .editor__preview-button {
    display: none;
}

.conflict__sides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem 1.5rem;
}

.conflict__side .editor__body {
    min-height: 40vh;
    border-radius: calc(var(--radius) / 3);
    margin-bottom: 0.75rem;
}

.conflict__side .button {
    display: inline-block;
    width: auto;
}

.conflict-panel {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-error);
    border-radius: calc(var(--radius) / 2);
    font-family: var(--font-ui);
}

.conflict-panel textarea {
    border-radius: calc(var(--radius) / 3);
    font-family: var(--mono);
    font-size: 0.85rem;
    min-height: 12rem;
    margin: 0.5rem 0;
}

.conflict-panel__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* History. */
.versions {
    padding-left: 1.2rem;
    font-family: var(--font-ui);
}

.versions__item {
    padding: 0.15rem 0;
}

.diff {
    padding: 0.5rem 0;
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
    font-size: 0.85rem;
    line-height: 1.45;
}

.diff > * {
    display: block;
    padding: 0 0.75rem;
    text-decoration: none;
    white-space: pre-wrap;
}

.diff__added {
    background: color-mix(in srgb, var(--gruvbox-green) 22%, transparent);
}

.diff__removed {
    background: color-mix(in srgb, var(--gruvbox-red) 20%, transparent);
}

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

.version-text {
    margin-top: 1.5rem;
}

/* Search. */
.search {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 1rem;
    max-width: 36rem;
}

.search input[type="search"] {
    flex: 1;
}

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

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

.hit {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-track);
}

.hit__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.hit__path {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--color-muted);
    overflow-wrap: anywhere;
}

.hit__snippet {
    margin: 0.25rem 0 0;
    overflow-wrap: anywhere;
}

.tag-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 2.1;
}

.tag-tree .tag-tree {
    margin-left: 1.1rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--color-track);
}

/* Folders. */
.folder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
}

.folder-actions form {
    display: flex;
    gap: 0.4rem;
}

.folder-actions input[type="text"] {
    width: 11rem;
    padding: 0.3rem 0.6rem;
}

/* A folder's "Publish as posts" setting, under its actions. */
.posts-box {
    flex-basis: 100%;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    padding: 0.4rem 0.8rem;
}

.posts-box__summary {
    cursor: pointer;
    font-family: var(--font-ui);
}

.posts-box__form {
    max-width: 28rem;
    margin: 0.5rem 0;
}

.badge--posts {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0 0.45rem;
    border-radius: 0.6rem;
    color: var(--gruvbox-green-faded);
    border: 1px solid currentColor;
    vertical-align: middle;
}

.folder-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.folder-list__folder {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
    background: var(--color-surface);
    font-family: var(--font-ui);
    text-decoration: none;
}

.folder-list__folder:hover {
    border-color: var(--accent);
}

.page-list,
.files {
    font-family: var(--font-ui);
}

/* The pickers, as in Comments: a small window of rows. */
.picker {
    font-family: var(--font-ui);
}

.picker__crumbs {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}

.picker__search {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.picker__search input {
    flex: 1;
    min-width: 0;
}

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

.picker__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-track);
}

.picker__name {
    flex: 1 1 14rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.picker__icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
    margin-right: 0.4em;
    color: var(--color-muted);
}

.picker__row--folder .picker__name {
    text-decoration: none;
    font-weight: 600;
}

.picker__meta,
.picker__desc {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.picker__desc {
    flex-basis: 100%;
}

.picker__insert {
    margin: 0;
}

.picker__snippet {
    width: 100%;
    font-family: var(--mono);
    font-size: 0.9rem;
}

/* Phones and narrow windows: the sidebar folds away behind Menu, and
   opens over the page (as #sidebar is the target, or with the script's
   class). */
@media (max-width: 52rem) {
    .shell {
        display: block;
        padding: 0 var(--spacing) var(--spacing);
    }

    .sidebar-toggle {
        display: inline-block;
        font-family: var(--font-ui);
        padding: 0.3rem 0.8rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        text-decoration: none;
        background: var(--color-surface);
    }

    .sidebar {
        display: none;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 20;
        width: min(22rem, 88vw);
        max-height: none;
        height: 100%;
        padding: 1rem;
        background: var(--color-bg);
        border-right: 1px solid var(--color-border);
        box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.35);
    }

    .sidebar:target,
    .sidebar--open {
        display: block;
    }

    .sidebar__close {
        display: inline-block;
        align-self: flex-end;
        font-family: var(--font-ui);
    }

    .page-head {
        flex-direction: column;
    }

    .editor__hint {
        margin-left: 0;
        flex-basis: 100%;
    }

    .note {
        font-size: 1.02rem;
    }
}

@media (max-width: 30rem) {
    .page-title {
        font-size: 2rem;
    }

    .note h1 {
        font-size: 1.8rem;
    }

    .folder-actions input[type="text"] {
        width: 9rem;
    }
}

/* Settings: the feed's addresses, to copy into a reader. */
.feed-url {
    display: block;
    width: 100%;
    margin: 0.25rem 0 0.75rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
}

/* The sidebar's views: Tasks, Dailies, Tags. */
.sidebar__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding: 0.5rem 0 0;
}

.sidebar__links a[aria-current="page"] {
    font-weight: bold;
}

/* The home page's Today strip: the date, today's daily, the tasks. */
.today {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2rem;
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.2rem;
    border: 1.5px solid var(--color-border);
    border-radius: calc(var(--radius) / 2);
    background: var(--color-surface);
    font-family: var(--font-ui);
}

.today p {
    margin: 0;
}

.today__weekday {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.today__date {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.15;
    color: var(--color-text-strong);
}

.today__daily {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.today__button {
    font-size: 1.05rem;
    padding: 0.55rem 1.2rem;
}

.today__days {
    display: flex;
    gap: 0.9rem;
    font-size: 0.9rem;
}

.today__counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
}

.today__counts a {
    text-decoration: none;
    color: var(--color-text);
}

.today__counts a:hover {
    text-decoration: underline;
}

.today__counts strong {
    font-size: 1.25rem;
    font-family: var(--font-display);
    font-weight: normal;
    color: var(--color-text-strong);
}

.today__count--overdue strong,
.tasks-summary a.tasks-summary__overdue {
    color: var(--color-error);
    font-weight: bold;
}

/* A page with live blocks reads in sections, one per top-level heading;
   two in a row listing the same kind of thing go side by side. */
.note:has(> .note-row, > .note-pair) {
    max-width: none;
}

.note-row,
.note-pair {
    max-width: 46rem;
}

.note-section {
    min-width: 0;
}

.note-section > :first-child {
    margin-top: 0.75rem;
}

/* Live blocks' results. */
.query {
    margin: 0.5rem 0 1rem;
    font-family: var(--font-ui);
    font-size: 0.98rem;
}

.note .q-pages,
.note .q-tasks,
.q-pages,
.q-tasks {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A long list of pages (ten dailies, say) flows into columns. */
.q-pages:has(> li:nth-child(8)) {
    columns: 2 14rem;
    column-gap: 2rem;
}

.q-pages li {
    break-inside: avoid;
}

.note .q-pages li,
.note .q-tasks li {
    margin: 0;
}

.q-pages li {
    padding: 0.2rem 0;
    overflow-wrap: anywhere;
}

.q-pages__folder,
.q-pages__date {
    color: var(--color-muted);
}

.q-pages a {
    text-decoration-color: var(--color-track);
}

.q-pages a:hover {
    text-decoration-color: currentColor;
}

.q-task {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.15rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-track);
    overflow-wrap: anywhere;
}

.q-task:last-child {
    border-bottom: 0;
}

.q-task > form,
.q-task > .task {
    grid-row: span 2;
    padding-top: 0.15rem;
}

.q-task__meta {
    grid-column: 2;
    font-size: 0.82rem;
    color: var(--color-muted);
}

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

.q-task--done .q-task__text {
    color: var(--color-muted);
    text-decoration: line-through;
}

/* A task's dates (📅 due, ✅ done, ⏳ scheduled, 🛫 start, ➕ created,
   ❌ cancelled, 🔁 repeats), shown as small chips; the file keeps them as
   written. The emoji are the device's own, in colour (--font-emoji is
   last in --font-ui). */
.tdate {
    display: inline-block;
    padding: 0 0.45em;
    border: 1px solid var(--color-track);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.82em;
    font-weight: normal;
    font-style: normal;
    line-height: 1.5;
    color: var(--color-text-strong);
    background: var(--color-surface);
    white-space: nowrap;
    vertical-align: 0.06em;
    text-decoration: none;
}

/* The emoji font first here: some text fonts have plain ✅ and ⏳. */
.tdate__icon {
    font-family: var(--font-emoji), var(--font-ui);
}

.tdate--overdue {
    border-color: var(--color-error);
    color: var(--color-error);
    font-weight: bold;
}

.tdate--today {
    border-color: var(--color-text);
    color: var(--color-text);
    font-weight: bold;
}

.tdate--muted {
    color: var(--color-muted);
    opacity: 0.8;
}

.query__empty,
.query__more {
    color: var(--color-muted);
    font-style: italic;
    margin: 0.25rem 0;
}

.query--error {
    border: 1.5px dashed var(--color-error);
    border-radius: calc(var(--radius) / 2);
    padding: 0.5rem 0.75rem;
}

.query__error {
    margin: 0 0 0.4rem;
    color: var(--color-error);
}

.query__src {
    margin: 0;
    white-space: pre-wrap;
}

.button-block {
    margin: 0.5rem 0 0.75rem;
}

.button-block .button {
    display: inline-block;
    width: auto;
    padding: 0.4rem 1.1rem;
}

.button--static {
    cursor: default;
    opacity: 0.7;
}

/* /tasks: the filters, then the groups. */
.tasks-summary a {
    color: var(--color-text);
}

.task-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.6rem 1rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
    background: var(--color-surface);
    font-family: var(--font-ui);
}

.task-filters__field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.task-filters__field label {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.task-filters input[type="text"] {
    width: 11rem;
}

.task-filters__done {
    padding-bottom: 0.4rem;
}

.task-filters__buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tasks-groups {
    max-width: none;
    font-family: var(--font-ui);
}

.tasks-group .section-title {
    margin-top: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1.5px solid var(--color-border);
}

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

.tasks-grouping {
    margin-top: 2rem;
    font-family: var(--font-ui);
}

/* /dailies: a month as a calendar, then the list. */
.dailies-actions {
    margin: 0 0 1rem;
}

.calendar {
    max-width: 34rem;
    font-family: var(--font-ui);
}

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

.calendar__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.5rem;
    color: var(--color-text-strong);
}

.calendar__step {
    white-space: nowrap;
}

.calendar__count {
    margin: 0.2rem 0 0.6rem;
    font-size: 0.9rem;
}

.calendar__grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.calendar__grid th {
    padding: 0.3rem 0;
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--color-muted);
}

.calendar__day {
    height: 3rem;
    padding: 0;
    border: 1px solid var(--color-track);
    text-align: center;
    vertical-align: middle;
}

.calendar__day > a,
.calendar__day > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 2.2rem;
}

.calendar__day > span:first-child {
    color: var(--color-muted);
}

.calendar__day--has {
    background: var(--color-surface);
}

.calendar__day--has > a {
    font-weight: bold;
    color: var(--color-text-strong);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.calendar__day--out {
    border-color: transparent;
}

.calendar__day--today {
    outline: 2.5px solid var(--color-border);
    outline-offset: -2.5px;
}

.calendar__day--today > a,
.calendar__day--today > span:first-child {
    min-height: 1.6rem;
    height: auto;
}

.calendar__today {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dailies-list {
    margin-top: 2rem;
    font-family: var(--font-ui);
}

.dailies-list__month {
    margin: 1rem 0 0.3rem;
    font-size: 1rem;
}

.dailies-list__days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Wide screens: pairs of sections side by side; the dailies' and other
   long lists of pages flow into columns. */
@media (min-width: 70rem) {
    .note-row,
    .note-pair {
        max-width: none;
    }

    .note-pair {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 2.5rem;
    }

    .note-row > .note-section {
        max-width: 46rem;
    }
}

@media (max-width: 30rem) {
    .today {
        padding: 0.75rem 0.9rem;
    }

    .today__counts {
        margin-left: 0;
    }

    .task-filters input[type="text"] {
        width: 100%;
    }

    .task-filters__field {
        flex: 1 1 100%;
    }

    .calendar__day {
        height: 2.6rem;
    }
}

/* The live editor (editor/web/src/live.rs). A page's blocks are wrapped
   (.blk, with their byte ranges) with or without script, and the
   wrappers change nothing on their own; only once the editors' bundle is
   running (data-live="on") are they something to click and write in. No
   animations: on e-ink a block swaps once on entering and once on
   leaving, and the textarea is set like the text it holds, so as little
   as possible moves. */
.note > .blk:first-child > :first-child,
.note-section > .blk:first-child > :first-child {
    margin-top: 0;
}

.note[data-live="on"] .blk {
    cursor: text;
    border-radius: calc(var(--radius) / 3);
}

.note[data-live="on"] .blk[data-k="query"],
.note[data-live="on"] .blk[data-k="button"] {
    cursor: auto;
}

.note[data-live="on"] .blk:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0.25rem;
}

@media (hover: hover) {
    .note[data-live="on"] .blk:hover:not(.blk--editing) {
        outline: 1px dashed var(--color-muted);
        outline-offset: 0.25rem;
    }
}

/* A query or button block's way to its source: always there on touch,
   on hover or focus with a mouse. */
.blk__edit {
    float: right;
    margin: 0 0 0.3rem 0.6rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
}

@media (hover: hover) {
    .blk__edit {
        opacity: 0;
    }

    .blk:hover > .blk__edit,
    .blk:focus-within > .blk__edit {
        opacity: 1;
    }
}

.blk-edit {
    display: block;
    width: 100%;
    margin: 0.5em 0;
    padding: 0.2rem 0.4rem;
    font: inherit;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-muted);
    border-radius: calc(var(--radius) / 3);
    resize: none;
    overflow: hidden;
    /* Grows with its text, without script, where supported (the WASM
       sizes it elsewhere). */
    field-sizing: content;
    min-height: 2.2rem;
}

.blk-edit:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.blk-edit--heading {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.3;
}

.blk-edit--code,
.blk-edit--table,
.blk-edit--query,
.blk-edit--button,
.blk-edit--html {
    font-family: var(--mono);
    font-size: 0.95rem;
    tab-size: 4;
}

li.blk--editing {
    list-style: none;
}

/* Left, and waiting for the server's render: its text as written. */
.blk--pending {
    margin: 0.75em 0;
    white-space: pre-wrap;
    color: var(--color-muted);
}

/* An empty page's place to write. */
.blk--empty {
    min-height: 2.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px dashed var(--color-muted);
    color: var(--color-muted);
    font-family: var(--font-ui);
}

.blk--empty::before {
    content: "Click to write…";
}

.blk--empty.blk--editing {
    padding: 0;
    border: 0;
}

.blk--empty.blk--editing::before {
    content: none;
}

.live-status {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--color-muted);
}

.live-status--error {
    color: var(--color-error);
}

/* ![[audio:<id>]] (a recording, from Files) and audio attachments: the
   browser's own player, no script (recordings.rs). */
.audio-embed {
    display: block;
    width: 100%;
    max-width: 28rem;
    height: 2.5rem;
    margin: 0.25rem 0;
}

span.audio-embed {
    height: auto;
    color: var(--color-muted);
}

/* ![[diagram:<id>]]: a diagram from Diagrams, every page, on a card like
   the handwriting scans, linked to it there (diagrams.rs). */
.diagram-embed {
    display: block;
    margin: 1rem 0;
}

.diagram-embed__link {
    display: grid;
    gap: 0.5rem;
    text-decoration: none;
}

.note img.diagram-embed__page {
    display: block;
    width: 100%;
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
    background: #fff;
}

.diagram-embed__caption,
.diagram-embed--missing {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* The note's diagram has changed since it was transcribed. */
.diagram-changed {
    border-left: 4px solid var(--gruvbox-yellow-faded);
}

/* The diagrams picker's pictures. */
.picker__thumb {
    width: 6rem;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
    background: #fff;
}

.picker__thumb--portrait {
    width: 3.4rem;
    aspect-ratio: 3 / 4;
}

/* Settings: how pages are edited, a button each (src/editing.rs). */
.editing-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin: 0.5rem 0;
}

.editing-choice__way {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    padding: 0.8rem 1rem;
    text-align: left;
    font: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
    cursor: pointer;
}

.editing-choice__way:hover {
    border-color: var(--color-muted);
}

.editing-choice__way:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.editing-choice__way[aria-pressed="true"] {
    border: 2px solid var(--accent);
    padding: calc(0.8rem - 1px) calc(1rem - 1px);
    background: var(--color-surface);
    cursor: default;
}

.editing-choice__name {
    font-family: var(--font-ui);
    font-weight: 600;
}

.editing-choice__now {
    font-weight: normal;
    color: var(--color-muted);
}

.editing-choice__about {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.4;
}

/* Always editing (editor/web/src/live/always.rs; Settings → Editing).
   Only once the editors' bundle is running (data-live="on") on a page of
   someone who chose it (data-mode="always"); otherwise the page is as
   above. The block being written is a textarea over its painted twin
   (.blk-hl): the same characters in the same box, so they line up
   exactly. The textarea's own text is transparent; the twin shows it in
   the block's own type with its Markdown marks faint. After leaving, the
   twin stays until the server's render is back, so nothing moves. */
/* That this stylesheet has these rules: always.rs checks, and fetches it
   again if a browser's copy is older than the editor. */
.note[data-live="on"][data-mode="always"] {
    --always-rules: 1;
}

.note[data-live="on"][data-mode="always"] .blk {
    border-radius: 0;
}

@media (hover: hover) {
    .note[data-live="on"][data-mode="always"] .blk:hover:not(.blk--editing) {
        outline: none;
    }
}

.note[data-live="on"][data-mode="always"] .blk--src {
    position: relative;
    margin: 1em 0;
    color: var(--color-text);
    white-space: normal;
}

.note[data-live="on"][data-mode="always"] > .blk--src:first-child,
.note[data-live="on"][data-mode="always"] .note-section > .blk--src:first-child {
    margin-top: 0;
}

.note[data-live="on"][data-mode="always"] li.blk--src {
    list-style: none;
    margin: 0;
}

/* Where you're writing: a bar in the margin, so it's plain without a box. */
.note[data-live="on"][data-mode="always"] .blk--editing::before {
    content: "";
    position: absolute;
    top: 0.1em;
    bottom: 0.1em;
    left: calc(-0.8rem - var(--hang, 0px));
    width: 2px;
    border-radius: 1px;
    background: var(--accent);
}

.note[data-live="on"][data-mode="always"] .blk--src > .blk-edit,
.note[data-live="on"][data-mode="always"] .blk--src > .blk-hl {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    line-height: 1.5;
    letter-spacing: normal;
    word-spacing: normal;
    text-align: start;
    text-indent: 0;
    text-transform: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    tab-size: 4;
    color: var(--color-text);
}

.note[data-live="on"][data-mode="always"] .blk--src > .blk-edit {
    resize: none;
    overflow: hidden;
    field-sizing: content;
}

.note[data-live="on"][data-mode="always"] .blk--src > .blk-edit:focus {
    outline: none;
}

/* (Over every kind's colour below: the twin shows the text, not this.) */
.note[data-live="on"][data-mode="always"] .blk--src > .blk-edit.blk-edit--hl {
    position: relative;
    z-index: 1;
    color: transparent;
    caret-color: var(--color-text-strong);
}

.note[data-live="on"][data-mode="always"] .blk-edit--hl::selection {
    color: transparent;
    background: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* As tall as its own text (not stretched to the block's), so always.rs
   can tell when it doesn't wrap where the textarea does: then it's set
   aside (--off) and the textarea's own text shows instead. */
.note[data-live="on"][data-mode="always"] .blk--src > .blk-hl:not(.blk-hl--pending) {
    position: absolute;
    inset: 0 0 auto;
    pointer-events: none;
}

.note[data-live="on"][data-mode="always"] .blk--src > .blk-hl--off {
    visibility: hidden;
}

/* The marks and what they mark. Only colour, a stroke and lines: nothing
   that changes a character's width, or the twin wouldn't line up. */
.blk-hl .m {
    color: var(--color-muted);
    opacity: 0.6;
}

.blk-hl .a {
    color: var(--accent);
}

.blk-hl .u {
    color: var(--color-muted);
}

.blk-hl .t {
    color: var(--accent);
}

.blk-hl .c {
    background: var(--color-surface);
    border-radius: 0.2em;
}

.blk-hl .b {
    -webkit-text-stroke: 0.03em currentColor;
}

.blk-hl .i {
    color: var(--color-text-strong);
}

.blk-hl .s {
    text-decoration: line-through;
}

/* Each kind as it reads. */
.note[data-live="on"][data-mode="always"] .blk-src--h1,
.note[data-live="on"][data-mode="always"] .blk-src--h2,
.note[data-live="on"][data-mode="always"] .blk-src--h3,
.note[data-live="on"][data-mode="always"] .blk-src--h4,
.note[data-live="on"][data-mode="always"] .blk-src--h5,
.note[data-live="on"][data-mode="always"] .blk-src--h6,
.note[data-live="on"][data-mode="always"] .blk-src--heading {
    --size: 1.1rem;
    margin: calc(1.4 * var(--size)) 0 calc(0.5 * var(--size));
}

.note[data-live="on"][data-mode="always"] .blk-src--h1 { --size: 2.2rem; }
.note[data-live="on"][data-mode="always"] .blk-src--h2 { --size: 1.6rem; }
.note[data-live="on"][data-mode="always"] .blk-src--h3 { --size: 1.3rem; }

.note[data-live="on"][data-mode="always"] :is(.blk-src--h1, .blk-src--h2, .blk-src--h3, .blk-src--h4, .blk-src--h5, .blk-src--h6, .blk-src--heading) > :is(.blk-edit, .blk-hl) {
    font-family: var(--font-display);
    font-size: var(--size);
    line-height: 1.2;
    color: var(--color-text-strong);
}

/* A list item's marker hangs where its bullet was. */
.note[data-live="on"][data-mode="always"] .blk-src--item,
.note[data-live="on"][data-mode="always"] .blk-src--task,
.note[data-live="on"][data-mode="always"] .blk-src--ol {
    --hang: 0.62em;
}

.note[data-live="on"][data-mode="always"] .blk-src--task { --hang: 1.4rem; }
.note[data-live="on"][data-mode="always"] .blk-src--ol { --hang: 1em; }

.note[data-live="on"][data-mode="always"] li.blk--src > .blk-edit,
.note[data-live="on"][data-mode="always"] li.blk--src > .blk-hl {
    width: calc(100% + var(--hang));
    margin-left: calc(-1 * var(--hang));
    padding-left: var(--hang);
    text-indent: calc(-1 * var(--hang));
}

.note[data-live="on"][data-mode="always"] li.blk--src > .blk-hl:not(.blk-hl--pending) {
    left: calc(-1 * var(--hang));
    margin-left: 0;
}

.note[data-live="on"][data-mode="always"] .blk-src--quote > .blk-edit,
.note[data-live="on"][data-mode="always"] .blk-src--quote > .blk-hl {
    padding: 0.1rem 1rem;
    border-left: 3px solid var(--color-track);
    color: var(--color-text-strong);
}

.note[data-live="on"][data-mode="always"] .blk-src--quote {
    margin: 1rem 0;
}

.note[data-live="on"][data-mode="always"] .blk-src--code,
.note[data-live="on"][data-mode="always"] .blk-src--query,
.note[data-live="on"][data-mode="always"] .blk-src--button,
.note[data-live="on"][data-mode="always"] .blk-src--html,
.note[data-live="on"][data-mode="always"] .blk-src--table,
.note[data-live="on"][data-mode="always"] .blk-src--rule {
    margin: 1rem 0;
}

.note[data-live="on"][data-mode="always"] .blk-src--code > .blk-edit,
.note[data-live="on"][data-mode="always"] .blk-src--code > .blk-hl,
.note[data-live="on"][data-mode="always"] .blk-src--query > .blk-edit,
.note[data-live="on"][data-mode="always"] .blk-src--query > .blk-hl,
.note[data-live="on"][data-mode="always"] .blk-src--button > .blk-edit,
.note[data-live="on"][data-mode="always"] .blk-src--button > .blk-hl {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
    font-family: var(--mono);
    font-size: 0.9em;
    line-height: 1.45;
}

/* The box's colour under the twin, not on the textarea over it. */
.note[data-live="on"][data-mode="always"] .blk-src--code > .blk-hl,
.note[data-live="on"][data-mode="always"] .blk-src--query > .blk-hl,
.note[data-live="on"][data-mode="always"] .blk-src--button > .blk-hl {
    background: var(--color-surface);
}

.note[data-live="on"][data-mode="always"] .blk-src--table > .blk-edit,
.note[data-live="on"][data-mode="always"] .blk-src--table > .blk-hl,
.note[data-live="on"][data-mode="always"] .blk-src--html > .blk-edit,
.note[data-live="on"][data-mode="always"] .blk-src--html > .blk-hl,
.note[data-live="on"][data-mode="always"] .blk-src--rule > .blk-edit,
.note[data-live="on"][data-mode="always"] .blk-src--rule > .blk-hl {
    font-family: var(--mono);
    font-size: 0.9em;
    line-height: 1.45;
}

.note[data-live="on"][data-mode="always"] .blk-src--footnote {
    margin: 0.5rem 0;
}

.note[data-live="on"][data-mode="always"] .blk-src--footnote > .blk-edit,
.note[data-live="on"][data-mode="always"] .blk-src--footnote > .blk-hl {
    font-size: 0.9rem;
}

/* A new page's place to write: a line, not a box. */
.note[data-live="on"][data-mode="always"] .blk--empty {
    min-height: 1.5em;
    padding: 0;
    border: 0;
    font-family: inherit;
}

.note[data-live="on"][data-mode="always"] .blk--empty::before {
    content: "Start writing…";
}

.live-insert {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.7rem;
}

.live-insert[hidden] {
    display: none;
}

.live-insert__label {
    font-size: 0.85rem;
    color: var(--color-muted);
}