/*
 * Cosmind Code: what every page shares, whatever the theme (README.md). The colours are the
 * themes' (theme-cosmind-*.css, written by tools/build_themes.py); this file only reads Gitea's
 * variables. Loaded by templates/custom/header.tmpl after Gitea's own stylesheets, so a rule here
 * wins over Gitea's at the same specificity. Selectors that reach into Gitea's markup hide or
 * restyle, never move or rebuild: when an upgrade renames something, the rule stops matching
 * and Gitea's own look comes back.
 */

/* ===== Fonts: Inter for text, JetBrains Mono for code, both served from here ================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* While Inter loads, Arial stands in at Inter's size and line metrics, so the page does not
   jump when the font arrives. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

:root {
  --fonts-proportional: "Inter", "Inter Fallback", -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
  --fonts-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--fonts-emoji);
  --border-radius: 6px;
  --border-radius-medium: 10px;
  --cosmind-radius-card: 12px;
  --cosmind-focus: var(--color-primary);
  --cosmind-ease: cubic-bezier(0.2, 0, 0, 1);
}

body {
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Code reads character by character: no ligatures, Inter's digit and letter variants off. */
pre,
code,
kbd,
samp,
.code-inner,
.lines-num,
.tw-font-mono,
.CodeMirror,
.monaco-editor,
.cm-editor {
  font-feature-settings: "liga" 0, "calt" 0;
  font-variant-ligatures: none;
}

/* Selected text: the Cosmind blue with its own text colour (Gitea's rule puts white on a pale
   blue, which the dark theme's light primary cannot carry). */
::selection,
relative-time::part(root)::selection {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

/* ===== Focus: one visible ring everywhere, for the keyboard only ============================ */

a:focus-visible,
button:focus-visible,
.ui.button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
.ui.dropdown:focus-visible,
.ui.checkbox input:focus-visible ~ label::before,
[tabindex]:focus-visible {
  outline: 2px solid var(--cosmind-focus);
  outline-offset: 2px;
  border-radius: var(--border-radius);
}

/* Inside menus and the navbar the ring sits inside the item, so it is never clipped. */
.menu .item:focus-visible,
#navbar .item:focus-visible,
.ui.secondary.menu .item:focus-visible {
  outline-offset: -2px;
}

input:not([type="checkbox"], [type="radio"]):focus-visible,
textarea:focus-visible,
select:focus-visible,
.ui.input input:focus,
.ui.form input:not([type="checkbox"], [type="radio"]):focus,
.ui.form select:focus,
.ui.form textarea:focus,
.ui.search > .prompt:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-30);
  outline: none;
}

/* ===== Motion: short and calm; none at all when the system asks for less ==================== */

.ui.button,
#navbar .item,
.ui.menu .item {
  transition: background-color 120ms var(--cosmind-ease), color 120ms var(--cosmind-ease), border-color 120ms var(--cosmind-ease);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Navbar: the Cosmind lockup, and only what a visitor can use ========================== */

/* The logo link holds Gitea's 30px icon; the word mark "COSMIND code" is drawn after it, as in
   Cosmind Sign and the admin page. The link keeps Gitea's aria-label, so the words are not read
   twice. */
#navbar #navbar-logo {
  gap: 10px;
  padding-right: 14px;
}

#navbar #navbar-logo img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

#navbar #navbar-logo::before,
#navbar #navbar-logo::after {
  order: 1;
  line-height: 1;
  white-space: nowrap;
}

#navbar #navbar-logo::before {
  content: "COSMIND";
  font-weight: var(--font-weight-bold);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--color-text-dark);
}

#navbar #navbar-logo::after {
  content: "code";
  order: 2;
  margin-left: -4px;
  font-size: 15px;
  color: var(--color-text-light-2);
}

#navbar .navbar-left > .item,
#navbar .navbar-right > .item {
  border-radius: var(--border-radius);
}

#navbar .navbar-left > .item.active {
  background: transparent;
  color: var(--color-text-dark);
  font-weight: var(--font-weight-medium);
  box-shadow: inset 0 -2px 0 var(--color-primary);
  border-radius: 0;
}

/* Gitea's help link goes to its own documentation: not ours to send people to. */
#navbar a.item[href="https://docs.gitea.com"] {
  display: none;
}

/* A signed-out visitor can only sign in: explore needs an account here ([service.explore]). */
#navbar:has(a.item[href$="/user/login"]) .navbar-left > a.item[href*="/explore/"] {
  display: none;
}

/* On the sign-in page itself the navbar's own "Sign in" would point at the page you are on. */
body:has(.cosmind-signin) #navbar a.item[href*="/user/login"] {
  display: none;
}

/* ===== Surfaces ============================================================================= */

.ui.segment,
.ui.attached.segment,
.ui.attached.header,
.ui.table,
.repository .ui.attached.table,
.ui.cards > .card,
.ui.card {
  border-color: var(--color-secondary);
}

.ui.segment:not(.attached),
.ui.top.attached.header,
.ui.attached.segment:last-child,
.repository.file.list #repo-files-table,
.ui.cards > .card,
.ui.card {
  box-shadow: 0 1px 2px var(--color-shadow);
}

.ui.dropdown .menu,
.ui.menu .dropdown.item .menu,
.tippy-box[data-theme="menu"],
.tippy-box[data-theme="box-with-header"],
.ui.modal {
  box-shadow: 0 12px 32px -8px var(--color-shadow), 0 2px 6px var(--color-shadow);
  border-color: var(--color-secondary);
}

.ui.modal {
  border-radius: var(--cosmind-radius-card);
}

/* ===== Buttons and solid colours =========================================================== */

/* Text on a solid named colour (the green "Open" and purple "Merged" labels, red buttons, Actions
   statuses) is --cosmind-on-named: white in the light theme, dark ink in the dark one, where the
   named colours are light enough to read as text (tools/build_themes.py checks both). */
.ui.ui.ui.ui:is(.red, .orange, .yellow, .green, .purple).label:not(.basic),
.ui.ui.ui.ui:is(.red, .green).button:not(.basic),
.ui.ui.ui.red.buttons:not(.basic) .button:not(.basic),
.runner-container.runner-container :is(.task-status-success, .task-status-failure, .task-status-running, .task-status-cancelled, .task-status-blocked) {
  color: var(--cosmind-on-named);
}

/* Gitea paints a failed job in its light red, too pale for any text on it. */
.runner-container.runner-container .task-status-failure {
  background-color: var(--color-red);
}

.ui.button {
  font-weight: var(--font-weight-medium);
}

.ui.primary.button,
.ui.primary.buttons .button {
  border-color: transparent;
  box-shadow: 0 1px 2px var(--color-shadow);
}

/* ===== Type ================================================================================= */

.markup h1,
.markup h2,
.markup h3,
.ui.header,
.repo-header .repo-title {
  letter-spacing: -0.01em;
}

.markup h1,
.markup h2 {
  font-weight: var(--font-weight-semibold);
}

.markup code,
.markup tt {
  border-radius: 4px;
}

/* The activity feed's 32px action icons outweigh the words beside them: smaller and quieter. */
#activity-feed .item-trailing > .svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-light-3);
}

/* A link inside a sentence must not differ from the words around it by colour alone (WCAG 1.4.1):
   a quiet underline where Gitea writes sentences, stronger on hover. */
:is(.markup, #activity-feed .item-main, .timeline-item .text, .issue-title-meta, .comment-header-left, .page-footer .left-links span) a:not(.ui, .label, .mention, .ref-issue, .commit-id, .anchor) {
  text-decoration-line: underline;
  text-decoration-color: var(--color-primary-alpha-40);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

:is(.markup, #activity-feed .item-main, .timeline-item .text, .issue-title-meta, .comment-header-left, .page-footer .left-links span) a:not(.ui, .label, .mention, .ref-issue, .commit-id, .anchor):hover {
  text-decoration-color: currentcolor;
}

/* Avatars in the issue sidebar are links: at least a 24px target (WCAG 2.5.8). */
.issue-content-right a:has(> img.avatar) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
}

/* ===== Footer: brand, privacy, licences ===================================================== */

.page-footer.cosmind-footer {
  align-items: center;
  gap: 8px 24px;
  padding: 14px 24px;
  color: var(--color-text-light-2);
  font-size: 13px;
}

.cosmind-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-light-2);
  text-decoration: none;
}

.cosmind-footer-brand:hover {
  color: var(--color-text);
  text-decoration: none;
}

.cosmind-footer-brand svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Gitea keeps room for its theme and language menus; without them the links sit flush right. */
.page-footer.cosmind-footer .right-links {
  min-width: 0;
}

.page-footer.cosmind-footer .right-links > a {
  border-left: 0;
  padding-left: 0;
  color: var(--color-text-light-2);
}

.page-footer.cosmind-footer .right-links > a:hover {
  color: var(--color-text);
}

@media (max-width: 767.98px) {
  .page-footer.cosmind-footer {
    flex-direction: column;
    padding: 16px;
  }
}

/* ===== The Cosmind lockup, for our own pages ================================================ */

.cosmind-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--color-text-dark);
  text-decoration: none;
  line-height: 1;
}

.cosmind-lockup:hover {
  color: var(--color-text-dark);
  text-decoration: none;
}

.cosmind-lockup img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.cosmind-wordmark {
  font-weight: var(--font-weight-bold);
  font-size: 17px;
  letter-spacing: 0.08em;
}

.cosmind-wordmark-product {
  margin-left: -4px;
  font-size: 18px;
  color: var(--color-text-light-2);
}

/* The one call to action of the landing and sign-in pages: Cosmind blue, the mark inside. */
.cosmind-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 28px 0 22px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px var(--color-shadow), 0 8px 24px -12px var(--color-primary-alpha-80);
  transition: background-color 150ms var(--cosmind-ease), transform 150ms var(--cosmind-ease), box-shadow 150ms var(--cosmind-ease);
}

.cosmind-cta:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-contrast);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px var(--color-shadow), 0 12px 28px -12px var(--color-primary-alpha-90);
}

.cosmind-cta:active {
  background: var(--color-primary-active);
  transform: none;
}

.cosmind-cta:focus-visible {
  outline: 2px solid var(--cosmind-focus);
  outline-offset: 3px;
  border-radius: 999px;
}

.cosmind-cta svg {
  flex-shrink: 0;
}

.cosmind-cta-block {
  display: flex;
  width: 100%;
}

/* ===== Landing page (templates/home.tmpl), for visitors who are not signed in =============== */

/* The page is the hero alone: the lockup in its corner, the astronaut of cosmind.si beside the
   words, one way in. Gitea's navbar has nothing for a visitor here, so it steps aside. */
body:has(.cosmind-landing) #navbar {
  display: none;
}

/* The hero fills the window above the footer: Gitea's wrapper becomes a column without its
   bottom spacing. */
body:has(.cosmind-landing) .full.height {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.page-content.cosmind-landing {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 600px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--color-body);
}

.cosmind-landing-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/cosmind/astronaut-light.avif") right center / cover no-repeat;
  pointer-events: none;
}

.cosmind-landing-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--color-body) 0%, var(--color-body) 34%, transparent 70%);
}

html[data-theme^="cosmind-dark"] .cosmind-landing-art {
  background-image: url("../img/cosmind/astronaut-dark.avif");
}

@media (prefers-color-scheme: dark) {
  html[data-theme^="cosmind-auto"] .cosmind-landing-art {
    background-image: url("../img/cosmind/astronaut-dark.avif");
  }
}

.cosmind-landing-top {
  padding: 40px clamp(24px, 5.5vw, 76px) 0;
}

.cosmind-landing-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: min(100%, 780px);
  padding: 40px 24px 96px clamp(24px, 12vw, 176px);
}

.cosmind-eyebrow {
  margin: 0 0 20px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cosmind-landing-title {
  margin: 0;
  color: var(--color-text-dark);
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: var(--font-weight-normal);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.cosmind-landing-title span {
  display: block;
}

.cosmind-landing-lead {
  max-width: 30rem;
  margin: 24px 0 40px;
  color: var(--color-text-light-1);
  font-size: 18px;
  line-height: 1.55;
}

.cosmind-landing-note {
  max-width: 30rem;
  margin: 20px 0 0;
  color: var(--color-text-light-2);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .page-content.cosmind-landing {
    min-height: auto;
  }
  .cosmind-landing-top {
    padding: 28px 24px 0;
  }
  .cosmind-landing-body {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    padding: 40px 24px 8px;
  }
  .cosmind-landing-art {
    position: relative;
    inset: auto;
    z-index: 0;
    order: 2;
    flex: 1 0 auto;
    min-height: 240px;
    height: 42svh;
    max-height: 440px;
    margin: 24px 0 0;
    background-image: url("../img/cosmind/astronaut-light-mobile.avif");
    background-position: 0 62%;
    background-size: 112% auto;
    mask-image: linear-gradient(180deg, transparent, #000 22%, #000 80%, transparent);
  }
  .cosmind-landing-art::after {
    display: none;
  }
  html[data-theme^="cosmind-dark"] .cosmind-landing-art {
    background-image: url("../img/cosmind/astronaut-dark-mobile.avif");
  }
  .cosmind-landing-title {
    font-size: clamp(34px, 9vw, 44px);
  }
  .cosmind-landing-lead {
    font-size: 17px;
    margin-bottom: 32px;
  }
  .cosmind-cta {
    width: 100%;
  }
}

@media (max-width: 767.98px) and (prefers-color-scheme: dark) {
  html[data-theme^="cosmind-auto"] .cosmind-landing-art {
    background-image: url("../img/cosmind/astronaut-dark-mobile.avif");
  }
}

/* ===== Sign-in (templates/user/auth/signin_inner.tmpl) ====================================== */

.page-content.user.signin .cosmind-signin {
  width: 100%;
  max-width: 420px;
  margin: clamp(24px, 8vh, 96px) auto 48px;
}

.cosmind-signin-card {
  padding: 40px 36px 32px;
  background: var(--color-box-body);
  border: 1px solid var(--color-secondary);
  border-radius: 16px;
  box-shadow: 0 1px 2px var(--color-shadow), 0 24px 48px -32px var(--color-shadow);
  text-align: center;
}

.cosmind-signin-card > img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.cosmind-signin-title {
  margin: 20px 0 8px;
  color: var(--color-text-dark);
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.cosmind-signin-text {
  margin: 0 0 28px;
  color: var(--color-text-light-2);
  font-size: 15px;
  line-height: 1.5;
}

.cosmind-signin-providers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cosmind-signin-local {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-secondary);
  text-align: left;
}

.cosmind-signin-local > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-light-2);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.cosmind-signin-local > summary::-webkit-details-marker {
  display: none;
}

.cosmind-signin-local > summary:hover {
  color: var(--color-text);
}

.cosmind-signin-local > summary svg {
  transition: transform 150ms var(--cosmind-ease);
}

.cosmind-signin-local[open] > summary svg {
  transform: rotate(90deg);
}

.cosmind-signin-local .ui.form {
  margin-top: 16px;
}

.cosmind-signin-help {
  margin: 20px 0 0;
  color: var(--color-text-light-2);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 767.98px) {
  .cosmind-signin-card {
    padding: 32px 20px 24px;
    border-radius: 14px;
  }
}

/* ===== 404 and 500 (templates/status/) ====================================================== */

.cosmind-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
  margin: clamp(32px, 10vh, 120px) auto 64px;
  padding: 0 16px;
  text-align: center;
}

.cosmind-status-art {
  width: min(280px, 70vw);
  height: auto;
  color: var(--color-primary);
}

.cosmind-status-art .cosmind-status-orbit {
  stroke: var(--color-secondary-dark-2);
}

.cosmind-status-code {
  margin: 28px 0 0;
  color: var(--color-primary);
  font-family: var(--fonts-monospace);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cosmind-status-title {
  margin: 12px 0 0;
  color: var(--color-text-dark);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.cosmind-status-text {
  margin: 14px 0 0;
  color: var(--color-text-light-1);
  font-size: 16px;
  line-height: 1.6;
}

.cosmind-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.cosmind-status-actions .cosmind-cta {
  min-height: 44px;
  padding: 0 22px;
  font-size: 15px;
}

.cosmind-button-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--color-input-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.cosmind-button-quiet:hover {
  background: var(--color-hover);
  color: var(--color-text-dark);
  text-decoration: none;
}

.cosmind-status-detail {
  width: 100%;
  margin-top: 32px;
  text-align: left;
}

.cosmind-status-detail pre {
  max-height: 320px;
  overflow: auto;
  padding: 12px 14px;
  background: var(--color-markup-code-block);
  border-radius: var(--border-radius-medium);
  font-size: 12px;
}

.cosmind-status-meta {
  margin-top: 24px;
  color: var(--color-text-light-2);
  font-size: 13px;
}

/* The lost satellite floats a little; held still when less motion is asked for. */
@keyframes cosmind-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(3px, -5px);
  }
}

.cosmind-status-art .cosmind-status-satellite {
  animation: cosmind-drift 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cosmind-status-art .cosmind-status-satellite {
    animation: none;
  }
}