/* MerklePage brand layer — sits on top of Pico CSS (pico.min.css).
   Pico handles typography, forms, buttons, tables, nav, cards, layout and
   the dark theme. This file only covers the bits Pico can't know about. */

/* Header / brand — compact top bar */
body > header {
  padding-block: 0.4rem;
}

body > header nav {
  --pico-nav-element-spacing-vertical: 0.25rem;
  font-size: 0.85rem;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  /* Match the header search input's box height so the logo lines up with the
     other nav controls: line-height (0.85rem × 1.5) + padding-block (2 × 0.25rem)
     + borders (2 × --pico-border-width). */
  height: 1.9rem;
  display: block;
}

.header-search {
  margin-bottom: 0;
}

.header-search input {
  margin-bottom: 0;
  width: 12rem;
  max-width: 40vw;
  font-size: 0.85rem;
  padding-block: 0.25rem;
}

/* "Sync" nav badge — a small dot shown when the content repo is ahead of or
   behind its remote (drawn from the cached RemoteStatus, see remotestatus.py).
   Decorative only; the out-of-sync state is also announced in .visually-hidden
   text and the link's title. */
.sync-badge {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.3rem;
  border-radius: 50%;
  background: var(--pico-del-color, #d93526);
  vertical-align: middle;
}

/* Visually hide content while keeping it available to screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Auth */
.current-user {
  color: var(--pico-muted-color);
}

.logout-form {
  margin: 0;
}

/* Render the logout submit button as a plain nav link. */
.linklike {
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--pico-primary);
  font: inherit;
  cursor: pointer;
}

.linklike:hover {
  background: none;
  color: var(--pico-primary-hover);
  text-decoration: underline;
}

.login-card {
  max-width: 24rem;
  margin: 2rem auto;
}

.login-error {
  color: #c0392b;
}

/* "Red links": inter-page links whose target page does not exist yet. The
   trailing "?" is a non-colour cue (accessibility) and is hidden from a11y
   tree / copied text by being generated content. */
article a.missing-link {
  color: #c0392b;
}

article a.missing-link::after {
  content: "?";
  font-size: 0.75em;
  vertical-align: super;
  opacity: 0.7;
}

@media (prefers-color-scheme: dark) {
  article a.missing-link {
    color: #e74c3c;
  }
}

/* Flash messages / sync status */
.flash {
  white-space: pre-wrap;
  padding: 0.6rem 0.8rem;
  border-radius: var(--pico-border-radius);
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.flash-success {
  background: rgba(60, 160, 90, 0.15);
  border: 1px solid rgba(60, 160, 90, 0.5);
}

.flash-error {
  background: rgba(192, 57, 43, 0.15);
  border: 1px solid rgba(192, 57, 43, 0.5);
}

.flash-warning {
  background: rgba(214, 158, 46, 0.15);
  border: 1px solid rgba(214, 158, 46, 0.5);
}

.sync-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  margin: 1rem 0;
}

.sync-status dt {
  color: var(--pico-muted-color);
}

.sync-status dd {
  margin: 0;
}

.sync-form button {
  width: auto;
}

.diffstat {
  font-size: 0.85rem;
  overflow-x: auto;
}

.untracked-list {
  font-size: 0.9rem;
}

/* Changed-files (sync) table */
.diffstat-table {
  font-size: 0.9rem;
}
.diffstat-status {
  width: 8rem;
  color: var(--pico-muted-color);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.diffstat-count {
  width: 7rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.diffstat-add { color: #2da44e; }
.diffstat-del { color: #cf222e; margin-left: 0.4rem; }
.diffstat-bin { color: var(--pico-muted-color); }
.diffstat-old { color: var(--pico-muted-color); }

/* Home hero */
.hero {
  text-align: center;
  padding: 0 0 2rem;
}

.hero-logo {
  width: 300px;
  max-width: 80%;
  height: auto;
}

.hero [role="button"] {
  margin: 0.25rem;
}

/* Recently visited trail (rendered client-side by app.js). Compact, single
   line, kept short so it doesn't eat vertical space. */
.recent-trail {
  display: flex;
  /* Pico's base `nav` rule sets justify-content: space-between, which would
     spread the trail across the full width — pin it to the left instead. */
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0.8rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  color: var(--pico-muted-color);
}

.recent-trail a {
  color: var(--pico-muted-color);
  text-decoration: none;
}

.recent-trail a:hover {
  color: var(--pico-primary);
  text-decoration: underline;
}

.recent-trail .recent-sep {
  color: var(--pico-muted-color);
}

.recent-trail .recent-current {
  color: var(--pico-color);
  font-weight: 600;
}

/* Clear button at the end of the trail. Pico gives every <button> a filled
   background, border and padding; strip it down to an inline text glyph that
   matches the trail's muted links. (Doubled class for specificity — pico.min.css
   loads after this file.) */
.recent-trail .recent-clear.recent-clear {
  width: auto;
  margin: 0 0 0 0.2rem;
  padding: 0 0.3rem;
  border: none;
  background: none;
  box-shadow: none;
  font-size: inherit;
  line-height: inherit;
  color: var(--pico-muted-color);
  cursor: pointer;
}

.recent-trail .recent-clear.recent-clear:hover {
  color: var(--pico-del-color);
}

/* Rendered page content — slightly smaller than Pico's 1rem default for a
   denser, more wiki-like reading width. Headings/lists/etc. are sized in em by
   Pico, so they scale down proportionally from this base. */
article {
  font-size: 0.9rem;
}

/* Markdown table column alignment. markdown-it emits this as an inline
   style="text-align:…" attribute, which our CSP (style-src 'self', no
   'unsafe-inline') strips in the browser; wiki.py rewrites it to these classes
   on the <th>/<td> instead so alignment actually takes effect. */
article th.text-left,
article td.text-left { text-align: left; }
article th.text-center,
article td.text-center { text-align: center; }
article th.text-right,
article td.text-right { text-align: right; }

/* Heading permalinks (anchors_plugin). Small, gray and unobtrusive so the `#`
   sits quietly beside the title rather than competing with it. */
.header-anchor {
  font-size: 0.7em;
  color: var(--pico-muted-color);
  text-decoration: none;
}

/* Per-heading "edit this section" link, injected by app.js on editable pages.
   Hidden until the heading is hovered (or the link itself is focused, for
   keyboard users) to keep the reading view uncluttered. */
.section-edit {
  margin-left: 0.5em;
  font-size: 0.55em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pico-muted-color);
  text-decoration: none;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}
h1:hover > .section-edit,
h2:hover > .section-edit,
h3:hover > .section-edit,
h4:hover > .section-edit,
h5:hover > .section-edit,
h6:hover > .section-edit,
.section-edit:focus {
  opacity: 1;
}

/* Page view toolbar */
.page-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

/* Search results */
.search-result {
  padding: 1rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.result-title {
  font-size: 1.1rem;
  font-weight: 600;
}

.result-path {
  margin: 0.15rem 0 0;
}

.result-excerpt {
  margin: 0.4rem 0 0;
}

.pagination {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.pagination [role="button"] {
  width: auto;
}

.reindex-form {
  margin-top: 2.5rem;
}

.reindex-form button {
  width: auto;
}

/* Editor */
.editor-textarea {
  min-height: 75vh;
  font-family: var(--pico-font-family-monospace);
  resize: vertical;
}

.preview-frame {
  width: 100%;
  min-height: 75vh;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-background-color);
}

/* Preview document body (inside the iframe). The iframe is already the column,
   so fill its width with modest padding rather than Pico's centred .container,
   which would shrink the content again. */
.preview-body {
  padding: 1rem 1.25rem;
}

.preview-frame[hidden],
.editor-textarea[hidden],
.editor-bar-top[hidden],
.editor-format[hidden],
.CodeMirror[hidden] {
  display: none;
}

/* Toolbar row: formatting buttons + the Write/Preview toggle. Sticks to the
   top of the viewport so it stays in reach while scrolling a long page.
   Revealed by app.js (the formatting group only when CodeMirror loads). */
.editor-bar-top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0;
  margin-bottom: 0.4rem;
  background: var(--pico-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.editor-format {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.editor-bar-top button {
  width: auto;
  min-width: 2rem;
  margin-bottom: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: center;
  background: transparent;
  /* Pico redefines --pico-color to the (white) primary-inverse inside every
     <button>; --pico-contrast is the theme-aware text colour and isn't
     shadowed, so it stays legible on the transparent button in both themes. */
  color: var(--pico-contrast);
  border: 1px solid var(--pico-muted-border-color);
}

.editor-bar-top button:hover {
  border-color: var(--pico-primary);
  color: var(--pico-primary);
}

/* The mode toggle sits at the right end and is tinted to stand apart. */
.editor-toggle {
  margin-left: auto;
  color: var(--pico-primary);
  border-color: var(--pico-primary);
}

.editor-sep {
  width: 1px;
  align-self: stretch;
  margin: 0.1rem 0.25rem;
  background: var(--pico-muted-border-color);
}

/* CodeMirror, themed to follow the page (and its light/dark setting).
   These selectors are doubled (.CodeMirror.CodeMirror, …) on purpose: the
   vendored codemirror.css loads after style.css, so equal-specificity rules
   would lose to it. The extra class bumps specificity so our theme wins
   regardless of stylesheet order. */
.CodeMirror.CodeMirror {
  height: auto;
  min-height: 75vh;
  border: 1px solid var(--pico-form-element-border-color, var(--pico-muted-border-color));
  border-radius: var(--pico-border-radius);
  font-family: var(--pico-font-family-monospace);
  font-size: 0.95rem;
  background: var(--pico-form-element-background-color, var(--pico-background-color));
  color: var(--pico-color);
}

.CodeMirror-focused.CodeMirror {
  border-color: var(--pico-primary);
}

.CodeMirror .CodeMirror-cursor {
  border-left-color: var(--pico-color);
}

.CodeMirror .CodeMirror-selected,
.CodeMirror-focused .CodeMirror-selected.CodeMirror-selected {
  background: var(--pico-primary-focus, rgba(120, 120, 200, 0.35));
}

.CodeMirror .CodeMirror-gutters {
  background: transparent;
  border-right: none;
}

/* Syntax-token colours tuned for legibility on either background. The default
   theme's pure blue/purple are hard to read on a dark editor surface. The
   .CodeMirror.cm-s-default prefix (both classes are on the wrapper) outranks
   the vendor's .cm-s-default rules, which would otherwise win by load order. */
.CodeMirror.cm-s-default .cm-header { color: var(--pico-primary); }
.CodeMirror.cm-s-default .cm-link,
.CodeMirror.cm-s-default .cm-url { color: var(--pico-primary); }
.CodeMirror.cm-s-default .cm-quote { color: var(--pico-muted-color); }
.CodeMirror.cm-s-default .cm-comment { color: var(--pico-muted-color); }
.CodeMirror.cm-s-default .cm-keyword,
.CodeMirror.cm-s-default .cm-def,
.CodeMirror.cm-s-default .cm-atom { color: #6c8cff; }
.CodeMirror.cm-s-default .cm-string { color: #c98a5e; }

.editor-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
}

.editor-bar input {
  flex: 1;
  margin-bottom: 0;
}

.editor-bar [role="button"],
.editor-bar button {
  width: auto;
  flex: 0 0 auto;
  margin-bottom: 0;
}

.upload-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.upload-form input[type="file"] {
  flex: 1;
  min-width: 12rem;
  margin: 0;
}

.upload-form .upload-subfolder {
  flex: 0 1 14rem;
  margin: 0;
}

.upload-form button {
  width: auto;
  margin: 0; /* drop Pico's button margin-bottom; else align-items lifts it */
}

.upload-status {
  color: var(--pico-muted-color);
  font-size: 0.85rem;
}

.rename-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.rename-form .rename-label {
  margin: 0;
}

.rename-form .rename-input {
  flex: 1;
  min-width: 14rem;
  margin: 0;
}

.rename-form button {
  width: auto;
  margin: 0; /* drop Pico's button margin-bottom; else align-items lifts it */
}

.delete-form {
  margin-top: 2.5rem;
}

.delete-button {
  width: auto;
  background-color: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

.delete-button:hover {
  background-color: #a93226;
  border-color: #a93226;
}

/* Image alignment helpers (Markdown image attributes: {.align-… width=…}) */
.align-left {
  float: left;
  margin: 0.25rem 1rem 0.75rem 0;
}

.align-right {
  float: right;
  margin: 0.25rem 0 0.75rem 1rem;
}

.align-center {
  display: block;
  margin-inline: auto;
}

/* Image width as a fraction of the content column, e.g. ![alt](x.png){.w-50}.
   Pico's `img { max-width:100%; height:auto }` keeps it within the column and
   preserves aspect ratio. For an arbitrary percentage, quote the width value:
   ![alt](x.png){width="40%"} (unquoted `%` doesn't parse). */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }

/* Contain floated images within the page card. */
article::after {
  content: "";
  display: block;
  clear: both;
}

/* Diagrams */
.diagram {
  margin: 1.25rem 0;
  overflow-x: auto;
}

.diagram svg {
  max-width: 100%;
  height: auto;
}

.diagram-error {
  margin: 1.25rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--pico-border-radius);
  background: rgba(192, 57, 43, 0.15);
  border: 1px solid rgba(192, 57, 43, 0.5);
  font-size: 0.9rem;
}

.diagram-error pre {
  margin: 0.5rem 0 0;
}

/* Attachment download cards (```attachment blocks) */
.attachment-card {
  margin: 1.25rem 0;
}

.attachment-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color, var(--pico-background-color));
  color: inherit;
  text-decoration: none;
}

.attachment-link:hover {
  border-color: var(--pico-primary);
  background: var(--pico-card-sectioning-background-color, transparent);
}

.attachment-icon {
  flex: 0 0 auto;
  color: var(--pico-muted-color);
}

.attachment-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.attachment-title {
  font-weight: 600;
  word-break: break-word;
}

.attachment-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
}

.attachment-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.05rem 0.4rem;
  border-radius: var(--pico-border-radius);
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

.attachment-desc {
  font-size: 0.9rem;
  color: var(--pico-muted-color);
}

.attachment-error {
  margin: 1.25rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--pico-border-radius);
  background: rgba(192, 57, 43, 0.15);
  border: 1px solid rgba(192, 57, 43, 0.5);
  font-size: 0.9rem;
}

.attachment-error pre {
  margin: 0.5rem 0 0;
}

/* Table of contents (```toc blocks). The element is a <nav>, which Pico lays
   out horizontally (flex nav ul / inline-block nav li); the class selectors
   below out-specify those tag rules to restore a normal vertical list. */
.toc {
  display: block;
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color, transparent);
  font-size: 0.95rem;
}

.toc ul {
  display: block;
  margin: 0;
  padding-left: 1.25rem;
  list-style: none;
}

.toc > ul {
  padding-left: 0;
}

.toc li {
  display: list-item;
  /* Pico's `ul li{list-style:square}` sets the marker on the li directly, so
     none-on-the-ul (an inherited value) loses to it — kill it on the li too. */
  list-style: none;
  margin: 0.15rem 0;
  padding: 0;
}

.toc a {
  text-decoration: none;
}

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

.toc-error {
  margin: 1.25rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--pico-border-radius);
  background: rgba(192, 57, 43, 0.15);
  border: 1px solid rgba(192, 57, 43, 0.5);
  font-size: 0.9rem;
}

/* Calendar event cards (```event blocks) and the /calendar view */
.event-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color, var(--pico-background-color));
  /* Offset deep-link jumps so the card clears the sticky header. */
  scroll-margin-top: 5rem;
}

.event-card:target {
  border-color: var(--pico-primary);
}

.event-icon {
  flex: 0 0 auto;
  color: var(--pico-muted-color);
}

.event-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.event-title {
  font-weight: 600;
  word-break: break-word;
}

/* Title + optional status badge on one line. */
.event-heading {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.event-status {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.45rem;
  border-radius: 1rem;
  border: 1px solid var(--pico-muted-border-color);
  color: var(--pico-muted-color);
}

.event-status-open {
  border-color: var(--pico-primary);
  color: var(--pico-primary);
}

.event-done .event-title {
  color: var(--pico-muted-color);
  text-decoration: line-through;
}

.event-when {
  font-size: 0.9rem;
  color: var(--pico-muted-color);
}

.event-completed {
  font-size: 0.85rem;
  color: var(--pico-ins-color, var(--pico-muted-color));
}

.event-due {
  font-size: 0.85rem;
  color: var(--pico-muted-color);
}

/* An open, past-deadline event: tint the card edge and the due line. */
.event-overdue {
  border-color: var(--pico-del-color, #d32f2f);
}

.event-overdue-label {
  color: var(--pico-del-color, #d32f2f);
  font-weight: 600;
}

.event-desc {
  font-size: 0.9rem;
}

.event-source {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
}

.event-error {
  margin: 1.25rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--pico-border-radius);
  background: rgba(192, 57, 43, 0.15);
  border: 1px solid rgba(192, 57, 43, 0.5);
  font-size: 0.9rem;
}

.event-error pre {
  margin: 0.5rem 0 0;
}

.calendar-scope {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.calendar-month {
  margin-top: 2rem;
  font-size: 1.1rem;
  color: var(--pico-muted-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding-bottom: 0.25rem;
}

.calendar-entry {
  margin: 0.75rem 0;
}

/* -- page history & diffs ----------------------------------------------- */

.history {
  width: 100%;
  font-size: 0.95rem;
}

.history th,
.history td {
  vertical-align: top;
}

.history time {
  white-space: nowrap;
  color: var(--pico-muted-color);
}

/* Compact email reveal in the history table: a bare "@" after the author name
   that exposes the address via Pico's data-tooltip. It is a real <button> so it
   is focusable — a tap focuses it and shows the tooltip on touch devices. */
.author-email {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0 0.1em;
  border: 0;
  background: none;
  color: var(--pico-muted-color);
  font: inherit;
  font-weight: bold;
  line-height: inherit;
  cursor: help;
  vertical-align: baseline;
}

.author-email:hover,
.author-email:focus {
  color: var(--pico-contrast);
  background: none;
}

.diff-commit {
  color: var(--pico-muted-color);
  font-size: 0.95rem;
}

/* The diff is our own escaped, class-tagged output (see history.py); the
   colours are translucent tints so they read on both light and dark themes. */
.diff {
  overflow-x: auto;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  font-family: var(--pico-font-family-monospace);
  font-size: 0.85rem;
  line-height: 1.45;
}

.diff-line {
  white-space: pre;
  padding: 0 0.6rem;
  border-left: 3px solid transparent;
}

.diff-add {
  background: rgba(46, 160, 67, 0.15);
  border-left-color: rgba(46, 160, 67, 0.6);
}

.diff-del {
  background: rgba(248, 81, 73, 0.15);
  border-left-color: rgba(248, 81, 73, 0.6);
}

.diff-hunk {
  color: var(--pico-primary);
  font-weight: 600;
}

.diff-file,
.diff-meta,
.diff-empty {
  color: var(--pico-muted-color);
}

.revision-banner {
  margin-bottom: 1.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--pico-border-radius);
  border: 1px solid var(--pico-muted-border-color);
  background: rgba(255, 196, 0, 0.12);
  font-size: 0.95rem;
}

/* Emoji — a self-hosted Twemoji colour font so emoji render identically on
   every platform instead of relying on the viewer's OS font. The font only
   contains emoji glyphs, so prepending it to Pico's --pico-font-family-emoji
   fallback (used in both the sans-serif and monospace stacks) makes every text
   element pick it up automatically for emoji codepoints, whether typed natively
   or produced from a `:shortcode:` (see merklepage/emoji.py), and nothing else.
   The font is served same-origin, so the existing `font-src 'self'` CSP covers
   it; font-display: swap shows the OS emoji until it loads. */
@font-face {
  font-family: "Twemoji Mozilla";
  src: url("../fonts/twemoji.woff2") format("woff2");
  font-display: swap;
}

:root {
  --pico-font-family-emoji: "Twemoji Mozilla", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}