html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #060607, 0 0 0 0.25rem rgba(253, 148, 37, 0.7);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 110px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.profile-dropdown-menu {
  max-height: 300px;
  overflow-y: auto;
}

.profile-dropdown-search-pin {
  position: sticky;
  top: 0;
  background-color: var(--bs-dropdown-bg, #fff);
  z-index: 1;
}

/* ---------- landing page ---------- */

:root {
  --sigil-accent-1: #f97316; /* orange */
  --sigil-accent-2: #facc15; /* yellow */
  --sigil-accent-1-rgb: 249, 115, 22;
  --sigil-accent-2-rgb: 250, 204, 21;
  --sigil-gradient: linear-gradient(135deg, var(--sigil-accent-1), var(--sigil-accent-2));

  /* the button redesign's own accent, sampled directly from the reference image (close to but not
     identical to --sigil-accent-1 above) - kept separate so it doesn't also change unrelated things
     like the nav underline or the premium gem. */
  --btn-accent: #fd9425;
  --btn-accent-rgb: 253, 148, 37;
  /* the arrow inside the main button's round chip: dark at rest, orange when the chip fills dark on hover */
  --btn-chip-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a0d02' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --btn-chip-arrow-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb923c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* The one look: graphite, a neutral near-black with orange for everything that matters. Every page is dark (<html data-bs-theme="dark">); there is no light look and no switch.
   Change a colour here and it changes everywhere. */
[data-bs-theme="dark"] {
  --bs-body-bg: #060607;
  --bs-tertiary-bg: #17171b;
  --bs-secondary-bg: #1d1d22;
  --bs-border-color: rgba(255, 255, 255, 0.14);

  /* the whole page behind everything: a soft graphite glow that fades to near-black */
  --sg-page: linear-gradient(170deg, #1d1d22 0%, #121215 45%, #060607 100%);

  /* text and lines of the top bar, and the sigil mark's own colours (yellow at the top, orange lower down) */
  --nav-link: #b5b5bf;
  --nav-link-hover: #f4f4f6;
  --nav-line: rgba(255, 255, 255, 0.28);
  --brand-text: #f4f4f6;
  --mark-1: #ffe066;
  --mark-2: #ffa02e;
  --mark-3: #ff5a1f;
  --mark-gloss-top: 0.5;
  --mark-gloss-bottom: 0.21;
}

/* Bootstrap's own blue (links, focus rings, ticked boxes and switches, sliders, the chosen row of a dropdown) becomes the site's orange, so no page falls back to a stray blue. */
[data-bs-theme="dark"] {
  --bs-primary: #fd9425;
  --bs-primary-rgb: 253, 148, 37;
  --bs-link-color: #fd9425;
  --bs-link-color-rgb: 253, 148, 37;
  --bs-link-hover-color: #ffb257;
  --bs-link-hover-color-rgb: 255, 178, 87;
  --bs-focus-ring-color: rgba(253, 148, 37, 0.35);
  --bs-dropdown-link-active-bg: rgba(253, 148, 37, 0.18);
  --bs-dropdown-link-active-color: #fff;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #fd9425;
}

.form-check-input:checked {
  background-color: #fd9425;
  border-color: #fd9425;
}

.form-range::-webkit-slider-thumb { background-color: #fd9425; }
.form-range::-moz-range-thumb { background-color: #fd9425; }

html {
  background: var(--sg-page, var(--bs-body-bg));
  background-attachment: fixed;
  min-height: 100%;
}

body {
  background: transparent;
}

.sigil-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

.sigil-brand-text {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  letter-spacing: -0.03em;
  color: var(--brand-text, #f2f0ec);
}

.navbar-brand.sigil-brand {
  color: var(--brand-text, #f2f0ec);
}

.brand-mark {
  width: 28px;
  height: 28px;
}

.mark-stop-1 { stop-color: var(--mark-1, #ffe066); }
.mark-stop-2 { stop-color: var(--mark-2, #ffa02e); }
.mark-stop-3 { stop-color: var(--mark-3, #ff5a1f); }
.mark-gloss-top { stop-opacity: var(--mark-gloss-top, 0.5); }
.mark-gloss-bottom { stop-opacity: var(--mark-gloss-bottom, 0.21); }

/* /EditEntrance */
/* Edit profile > Creator: the rows of the schedule, featured things and links. One column on a phone, side by side from tablets up. */
.creator-rows { display: grid; gap: 12px; }
.creator-row-locked { opacity: 0.55; }
.creator-lock-note { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--bs-secondary-color); }
.creator-row { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .creator-row-slot { grid-template-columns: 11rem 8rem minmax(0, 1fr); }
  .creator-row-feat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .creator-row-link { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}

/* Edit profile > Profile page: the gallery grid and the banner preview. */
.page-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.page-gallery-item { display: flex; flex-direction: column; gap: 6px; }
.page-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: rgba(127, 127, 127, 0.15); }
.page-gallery-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.page-gallery-actions form { margin: 0; }
.page-banner-preview { width: 100%; max-width: 560px; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 12px; display: block; }

.entrance-page {
  max-width: 52rem;
  margin: 0 auto;
}

.entrance-preview-figure {
  margin: 0 0 1.25rem;
}

.entrance-preview {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.75rem;
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.6);
}

/* Edit profile, Level card: each style in a standard and an Ember version, a preview of the person's own card above its colours, the chosen one outlined */
.levelcard-page {
  max-width: 52rem;
  margin: 0 auto;
}

.levelcard-style { margin-bottom: 1.6rem; }

.levelcard-versions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}

.levelcard-version {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 0.6rem;
  border: 2px solid var(--bs-border-color);
  border-radius: 0.9rem;
  min-width: 0;
}

.levelcard-version:has(input:checked),
.levelcard-chosen {
  border-color: var(--bs-primary, #f97316);
}

.levelcard-preview {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
  background: rgba(127, 127, 127, 0.15);
  cursor: pointer;
}

.levelcard-colours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.levelcard-vname { font-weight: 600; margin-right: 0.35rem; }

.levelcard-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem 0.2rem 0.4rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
}

.levelcard-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.levelcard-swatch:has(input:checked) { border-color: var(--c1); background: color-mix(in srgb, var(--c1) 16%, transparent); }
.levelcard-swatch:has(input:focus-visible), .levelcard-swatch:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
.levelcard-dot { width: 1rem; height: 1rem; border-radius: 50%; background: linear-gradient(135deg, var(--c2), var(--c1)); box-shadow: 0 0 6px color-mix(in srgb, var(--c1) 60%, transparent); }

/* /EditReactions emoji grid, ticked ones get an accent outline */
.reactions-page {
  max-width: 52rem;
  margin: 0 auto;
}

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

.emoji-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  font-size: 1.6rem;
  line-height: 1;
}

.emoji-choice:hover {
  background: rgba(255, 255, 255, 0.1);
}

.emoji-choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.emoji-choice:has(input:checked) {
  border-color: var(--sigil-accent-1);
  background: rgba(var(--sigil-accent-1-rgb), 0.18);
}

.emoji-choice:has(input:focus-visible) {
  outline: 2px solid var(--sigil-accent-2);
  outline-offset: 2px;
}

.emoji-image {
  display: block;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

/* Log in / Log out button (inside the menu on phones) */
.navbar .nav-auth-btn {
  align-self: center;
  margin: 0.5rem 0 0.25rem;
  /* normal padding made the bar taller */
  padding: 0.4rem 1.1rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

@media (min-width: 576px) {
  .navbar .nav-auth-btn {
    margin: 0 0 0 0.5rem;
  }
}

/* The end of the top bar: CONQUEST in a box of its own, then the Log in / Log out link.
   It is not inside the collapsing menu, so on phones it stays in the bar beside the brand:
   brand, then this (pushed right), then the menu button; the links open below. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  order: 2;
  margin: 0 0.6rem 0 auto;
}

.site-nav .navbar-brand {
  order: 1;
}

.site-nav .navbar-toggler {
  order: 3;
}

.site-nav .navbar-collapse {
  order: 4;
}

@media (min-width: 992px) {
  .site-nav .navbar-collapse {
    order: 2;
  }

  .nav-actions {
    order: 3;
    gap: 1.1rem;
    margin: 0 0 0 0.5rem;
  }
}

/* The whole bar needs about 910px (a little more than 1000px with the staff link), and Bootstrap's container is only 960px wide from 992px to 1199px. So from 992px up the links sit in the bar, but in
   this range the bar uses the full width and the links sit a little closer. Below 992px the links fold into the menu button instead (navbar-expand-lg). */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-nav > .container {
    max-width: none;
  }

  .nav-pills-row .nav-link {
    margin: 0 0.45rem;
  }

  .asterism-nav-btn .asterism-nav-word {
    letter-spacing: 0.22em;
    margin-right: -0.22em;
  }
}

/* With the staff link (the widest bar) 992px to about 1100px is still short by about 60px, so there the Asterism button shows only its mark (its name is still its accessible name). */
@media (min-width: 992px) and (max-width: 1099.98px) {
  .nav-pills-row .nav-link {
    margin: 0 0.35rem;
  }

  .asterism-nav-btn .asterism-nav-word {
    display: none;
  }

  .nav-pills-row .asterism-nav-btn {
    padding: 0.28rem 0.5rem;
  }
}

/* Log in / Log out is a plain word with a line under it, not a button. */
.navbar .nav-actions .nav-auth-btn {
  margin: 0;
  padding: 0 0 1px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--nav-line, #3a3835);
  border-radius: 0;
  background: none;
  clip-path: none;
  color: var(--nav-link-hover, #f2f0ec);
  font-family: "Inter", "Segoe UI Variable Text", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.2s ease;
}

.navbar .nav-actions .nav-auth-btn::before,
.navbar .nav-actions .nav-auth-btn::after {
  display: none;
}

.navbar .nav-actions .nav-auth-btn:hover,
.navbar .nav-actions .nav-auth-btn:focus-visible {
  border-color: transparent;
  border-bottom-color: var(--sigil-accent-1);
  background: none;
  color: #fff;
}

/* phones: Log in and the menu button fit on one line */
@media (max-width: 991.98px) {
  .navbar .nav-actions .nav-auth-btn {
    font-size: 0.82rem;
  }

  .site-nav .navbar-brand {
    margin-right: 0.5rem;
  }
}

/* the opened menu: links big enough for a thumb */
@media (max-width: 991.98px) {
  .site-nav .nav-pills-row {
    padding: 0.3rem 0 0.5rem;
  }

  .site-nav .nav-pills-row .nav-link {
    padding: 0.65rem 0;
  }
}

@media (max-width: 359.98px) {
  .nav-actions {
    gap: 0.6rem;
    margin-right: 0.4rem;
  }
}

/* Nav links: quiet, and white when hovered or on the page you are on. */
.site-nav {
  background: transparent;
}

.nav-pills-row .nav-link {
  position: relative;
  padding: 0.4rem 0;
  margin: 0 0.8rem;
  font-family: "Inter", "Segoe UI Variable Text", system-ui, sans-serif;
  font-size: 0.88rem;
  color: var(--nav-link, #8d8a85);
  transition: color 0.2s ease;
}

.nav-pills-row .nav-link:hover,
.nav-pills-row .nav-link:focus-visible,
.nav-pills-row .nav-link.active {
  color: var(--nav-link-hover, #f2f0ec);
}

/* The bar sits in the same column on every page, the narrower one the Ember pages use, so the logo and the links line up the same wherever you are. */
@media (min-width: 1200px) {
  body > header .site-nav > .container {
    max-width: 1180px;
  }
}

/* "Ember" in the bar: an amber word with the small Ember flame (the mark of the emblem, see wwwroot/ember) that breathes, and two tiny embers that drift up off the word and fade. */
.nav-pills-row .nav-ember-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fbbf24;
}

.nav-pills-row .nav-ember-link:hover,
.nav-pills-row .nav-ember-link:focus-visible,
.nav-pills-row .nav-ember-link.active {
  color: #fde68a;
}

.nav-ember-gem {
  flex: none;
  width: 11px;
  height: 22px;
  margin-right: -0.1rem;
  background: url(/ember/ember-mark.svg) center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(249, 115, 22, 0.45));
  animation: nav-ember-beat 3.2s ease-in-out infinite;
}

.nav-ember-word {
  position: relative;
}

.nav-ember-word::before,
.nav-ember-word::after {
  content: "";
  position: absolute;
  bottom: 70%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 4px 1px rgba(249, 115, 22, 0.8);
  opacity: 0;
  animation: nav-ember-rise 2.8s ease-out infinite;
}

.nav-ember-word::before {
  left: 22%;
}

.nav-ember-word::after {
  left: 68%;
  animation-delay: 1.3s;
}

@keyframes nav-ember-beat {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(249, 115, 22, 0.45)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 7px rgba(250, 204, 21, 0.8)); }
}

@keyframes nav-ember-rise {
  0% { transform: translate(0, 4px); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(3px, -11px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-ember-gem,
  .nav-ember-word::before,
  .nav-ember-word::after {
    animation: none !important;
  }
}

/* Dropdowns in the bar ("Sigil Games", and "Developer" or "Moderator" for staff): the same quiet look as the links, with a small menu that opens under the word. */
.nav-pills-row .dropdown-toggle::after {
  margin-left: 0.4em;
  vertical-align: 0.15em;
  border-top-width: 0.28em;
  border-right-width: 0.28em;
  border-left-width: 0.28em;
}

.site-nav .dropdown-menu {
  min-width: 12rem;
  margin-top: 0.5rem;
  padding: 0.4rem;
  border-radius: 10px;
  font-size: 0.88rem;
}

.site-nav .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
}

.nav-game-logo {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
}

.nav-weave-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #fb923c, #ea580c);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

/* The letter tiles for the minigames in the Sigil Games menu (Weave keeps the orange one above). */
.nav-weave-mark.gl-spy { background: linear-gradient(145deg, #6366f1, #4338ca); }
.nav-weave-mark.gl-bomb { background: linear-gradient(145deg, #ef4444, #b91c1c); }
.nav-weave-mark.gl-keepup { background: linear-gradient(145deg, #14b8a6, #0f766e); }
.nav-weave-mark.gl-tod { background: linear-gradient(145deg, #ec4899, #be185d); }
.nav-weave-mark.gl-confess { background: linear-gradient(145deg, #64748b, #475569); }

/* a game's line icon (see GameIcons): white on its colour */
.nav-game-logo.gi svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The Sigil Games menu on a computer is a small panel, not a list: Weave large on top, the other games as cards with a line each, and "All games" along the bottom. Corner ticks and a hairline
   edge, like the home page's path cards. On a phone it stays the plain indented list below. */
@media (min-width: 992px) {
  .nav-games > .dropdown-menu {
    width: 600px;
    margin-top: 0.7rem;
    padding: 16px;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(26, 26, 31, 0.98), rgba(13, 13, 16, 0.985));
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .nav-games > .dropdown-menu.show {
    display: grid;
    animation: gm-open 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .nav-games > .dropdown-menu::before,
  .nav-games > .dropdown-menu::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
      linear-gradient(var(--sigil-accent-1, #f97316), var(--sigil-accent-1, #f97316)) left top / 14px 1px no-repeat,
      linear-gradient(var(--sigil-accent-1, #f97316), var(--sigil-accent-1, #f97316)) left top / 1px 14px no-repeat,
      linear-gradient(var(--sigil-accent-1, #f97316), var(--sigil-accent-1, #f97316)) right top / 14px 1px no-repeat,
      linear-gradient(var(--sigil-accent-1, #f97316), var(--sigil-accent-1, #f97316)) right top / 1px 14px no-repeat;
  }

  .nav-games > .dropdown-menu::after {
    transform: rotate(180deg);
  }

  .nav-games > .dropdown-menu > li {
    min-width: 0;
  }

  .nav-games .dropdown-item {
    height: 100%;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--nav-link-hover, #f2f0ec);
    white-space: normal;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }

  .nav-games .dropdown-item:hover,
  .nav-games .dropdown-item:focus-visible {
    background: rgba(249, 115, 22, 0.09);
    border-color: rgba(249, 115, 22, 0.42);
    color: #fff;
    transform: translateY(-1px);
  }

  .nav-games .dropdown-item.active {
    background: rgba(249, 115, 22, 0.14);
    border-color: rgba(249, 115, 22, 0.5);
    color: #fff;
  }

  .nav-games .nav-game-logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9px;
    font-size: 1.1rem;
  }

  .nav-games .gm-t {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .nav-games .gm-t b {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.005em;
  }

  .nav-games .gm-d {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--nav-link, #8d8a85);
    font-size: 0.78rem;
    line-height: 1.35;
  }

  /* Weave, the game of the day: the whole top row, with its letters on the right. */
  .nav-games .gm-feature {
    grid-column: 1 / -1;
  }

  .nav-games .gm-feature .dropdown-item {
    padding: 1rem 1.1rem;
    background: linear-gradient(100deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.03) 70%);
    border-color: rgba(249, 115, 22, 0.28);
  }

  .nav-games .gm-feature .nav-game-logo {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 12px;
    font-size: 1.5rem;
  }

  .nav-games .gm-feature .gm-t b {
    font-size: 1.25rem;
  }

  .nav-games .gm-feature .gm-d {
    font-size: 0.85rem;
    -webkit-line-clamp: 3;
  }

  .nav-games .gm-art {
    display: flex;
    gap: 5px;
    margin-left: auto;
    flex: none;
  }

  .nav-games .gm-art i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 38px;
    border-radius: 7px;
    background: #fff;
    color: #17171b;
    font: 700 17px var(--font-head, "Space Grotesk", system-ui, sans-serif);
    font-style: normal;
    box-shadow: 0 4px 0 #c9c9d2;
    transform: translateY(0);
    transition: transform 0.2s ease;
  }

  .nav-games .gm-art i.b {
    background: #ffd9b8;
    color: #8a3604;
    box-shadow: 0 4px 0 #e0640c;
  }

  .nav-games .gm-feature .dropdown-item:hover .gm-art i {
    transform: translateY(-3px);
  }

  .nav-games .gm-feature .dropdown-item:hover .gm-art i:nth-child(2) { transition-delay: 0.04s; }
  .nav-games .gm-feature .dropdown-item:hover .gm-art i:nth-child(3) { transition-delay: 0.08s; }
  .nav-games .gm-feature .dropdown-item:hover .gm-art i:nth-child(4) { transition-delay: 0.12s; }
  .nav-games .gm-feature .dropdown-item:hover .gm-art i:nth-child(5) { transition-delay: 0.16s; }

  /* a last game that would sit alone in its row takes the whole row */
  .nav-games > .dropdown-menu > li:nth-last-child(3):nth-child(even) {
    grid-column: 1 / -1;
  }

  /* the line above "All games" and "All games" itself: one quiet row across the bottom */
  .nav-games > .dropdown-menu > li:has(.dropdown-divider),
  .nav-games > .dropdown-menu > li:last-child {
    grid-column: 1 / -1;
  }

  .nav-games .dropdown-divider {
    margin: 2px 0;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .nav-games > .dropdown-menu > li:last-child .dropdown-item {
    justify-content: space-between;
    padding: 0.55rem 0.8rem;
    color: var(--nav-link, #8d8a85);
    font-weight: 600;
  }

  .nav-games > .dropdown-menu > li:last-child .dropdown-item::after {
    content: "\2192";
    color: var(--sigil-accent-1, #f97316);
    transition: transform 0.15s ease;
  }

  .nav-games > .dropdown-menu > li:last-child .dropdown-item:hover::after {
    transform: translateX(4px);
  }

  /* the items arrive one after the other */
  .nav-games > .dropdown-menu.show > li {
    animation: gm-item 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .nav-games > .dropdown-menu.show > li:nth-child(2) { animation-delay: 0.03s; }
  .nav-games > .dropdown-menu.show > li:nth-child(3) { animation-delay: 0.06s; }
  .nav-games > .dropdown-menu.show > li:nth-child(4) { animation-delay: 0.09s; }
  .nav-games > .dropdown-menu.show > li:nth-child(5) { animation-delay: 0.12s; }
  .nav-games > .dropdown-menu.show > li:nth-child(6) { animation-delay: 0.15s; }
  .nav-games > .dropdown-menu.show > li:nth-child(n + 7) { animation-delay: 0.18s; }
}

@keyframes gm-open {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes gm-item {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* on a phone the lines under each game are left out */
@media (max-width: 991.98px) {
  .nav-games .gm-d,
  .nav-games .gm-art {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-games > .dropdown-menu.show,
  .nav-games > .dropdown-menu.show > li {
    animation: none;
  }
}

/* The account, for somebody who is signed in: their own picture in the bar, and under it a panel built like the Sigil Games menu (hairline edge, corner ticks, a header, a card for each choice,
   the items arriving one after the other). It lives outside the phone menu, so it is the same panel on a phone. */
.site-nav .nav-account {
  position: relative;
}

.site-nav .nav-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: linear-gradient(145deg, #2a2a31, #17171b);
  color: #fff;
  font: 700 15px "Space Grotesk", "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.site-nav .nav-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-nav .nav-avatar:hover,
.site-nav .nav-avatar:focus-visible,
.site-nav .nav-avatar[aria-expanded="true"] {
  border-color: var(--sigil-accent-1, #f97316);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18), 0 0 18px rgba(249, 115, 22, 0.35);
  outline: none;
}

.site-nav .nav-avatar:active {
  transform: scale(0.95);
}

/* an Ember member's picture has a gold ring */
.site-nav .nav-avatar.is-ember {
  border-color: rgba(245, 195, 80, 0.85);
  box-shadow: 0 0 0 2px rgba(245, 195, 80, 0.14), 0 0 14px rgba(245, 195, 80, 0.25);
}

.site-nav .nav-avatar.is-ember:hover,
.site-nav .nav-avatar.is-ember:focus-visible,
.site-nav .nav-avatar.is-ember[aria-expanded="true"] {
  border-color: #f5c350;
  box-shadow: 0 0 0 3px rgba(245, 195, 80, 0.22), 0 0 22px rgba(245, 195, 80, 0.45);
}

.site-nav .nav-account > .dropdown-menu {
  width: min(300px, calc(100vw - 32px));
  margin-top: 0.7rem;
  padding: 14px;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(26, 26, 31, 0.98), rgba(13, 13, 16, 0.985));
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-nav .nav-account > .dropdown-menu.show {
  display: grid;
  animation: gm-open 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-nav .nav-account > .dropdown-menu::before,
.site-nav .nav-account > .dropdown-menu::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(var(--sigil-accent-1, #f97316), var(--sigil-accent-1, #f97316)) left top / 14px 1px no-repeat,
    linear-gradient(var(--sigil-accent-1, #f97316), var(--sigil-accent-1, #f97316)) left top / 1px 14px no-repeat,
    linear-gradient(var(--sigil-accent-1, #f97316), var(--sigil-accent-1, #f97316)) right top / 14px 1px no-repeat,
    linear-gradient(var(--sigil-accent-1, #f97316), var(--sigil-accent-1, #f97316)) right top / 1px 14px no-repeat;
}

.site-nav .nav-account > .dropdown-menu::after {
  transform: rotate(180deg);
}

.site-nav .nav-account .na-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-nav .nav-account .na-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: linear-gradient(145deg, #2a2a31, #17171b);
  color: #fff;
  font: 700 18px "Space Grotesk", "Inter", system-ui, sans-serif;
}

.site-nav .nav-account .na-av img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-nav .nav-account .na-av.is-ember {
  border-color: rgba(245, 195, 80, 0.85);
  box-shadow: 0 0 14px rgba(245, 195, 80, 0.25);
}

.site-nav .nav-account .na-who {
  display: grid;
  min-width: 0;
}

.site-nav .nav-account .na-who b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.site-nav .nav-account .na-who small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nav-link, #8d8a85);
  font: 500 0.74rem "JetBrains Mono", ui-monospace, monospace;
}

.site-nav .nav-account .na-ember {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid rgba(245, 195, 80, 0.55);
  border-radius: 999px;
  background: rgba(245, 195, 80, 0.1);
  color: #f5c350;
  font: 600 0.66rem "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-nav .nav-account .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--nav-link-hover, #f2f0ec);
  white-space: normal;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.site-nav .nav-account .dropdown-item:hover,
.site-nav .nav-account .dropdown-item:focus-visible {
  background: rgba(249, 115, 22, 0.09);
  border-color: rgba(249, 115, 22, 0.42);
  color: #fff;
  transform: translateY(-1px);
}

.site-nav .nav-account .dropdown-item.active {
  background: rgba(249, 115, 22, 0.14);
  border-color: rgba(249, 115, 22, 0.5);
  color: #fff;
}

.site-nav .nav-account .na-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9px;
  background: linear-gradient(145deg, #6366f1, #4338ca);
}

.site-nav .nav-account li:nth-child(3) .na-ico {
  background: linear-gradient(145deg, #14b8a6, #0f766e);
}

.site-nav .nav-account .na-ico svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-nav .nav-account .na-t {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.site-nav .nav-account .na-t b {
  font-size: 0.96rem;
  font-weight: 700;
}

.site-nav .nav-account .na-t small {
  color: var(--nav-link, #8d8a85);
  font-size: 0.78rem;
  line-height: 1.3;
}

.site-nav .nav-account .dropdown-divider {
  margin: 2px 0;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Log out: one quiet row along the bottom, with a door that opens a little on hover */
.site-nav .nav-account .na-out {
  justify-content: space-between;
  padding: 0.55rem 0.7rem;
  color: var(--nav-link, #8d8a85);
  font-weight: 600;
}

.site-nav .nav-account .na-out .na-t b {
  font-size: 0.92rem;
}

.site-nav .nav-account .na-door svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--sigil-accent-1, #f97316);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.site-nav .nav-account .na-out:hover .na-door svg {
  transform: translateX(3px);
}

/* the items arrive one after the other */
.site-nav .nav-account > .dropdown-menu.show > li {
  animation: gm-item 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.site-nav .nav-account > .dropdown-menu.show > li:nth-child(2) { animation-delay: 0.04s; }
.site-nav .nav-account > .dropdown-menu.show > li:nth-child(3) { animation-delay: 0.08s; }
.site-nav .nav-account > .dropdown-menu.show > li:nth-child(4) { animation-delay: 0.11s; }
.site-nav .nav-account > .dropdown-menu.show > li:nth-child(5) { animation-delay: 0.14s; }

@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-avatar,
  .site-nav .nav-account > .dropdown-menu.show,
  .site-nav .nav-account > .dropdown-menu.show > li {
    animation: none;
    transition: none;
  }
}

/* In the opened phone menu a dropdown is simply a short indented list under its word. */
@media (max-width: 991.98px) {
  .site-nav .dropdown-menu {
    margin: 0;
    padding: 0 0 0.3rem 0.8rem;
    border: 0;
    background: transparent;
  }

  .site-nav .dropdown-item {
    padding: 0.55rem 0;
    color: var(--nav-link, #8d8a85);
    background: transparent;
  }

  .site-nav .dropdown-item.active {
    color: var(--nav-link-hover, #f2f0ec);
    background: transparent;
  }
}
/* "Can't log in?" details, styled like a link */
.login-help summary {
  display: inline;
  cursor: pointer;
  list-style: none;
  color: var(--bs-link-color);
  text-decoration: underline;
}

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

.login-help[open] summary {
  margin-bottom: 0.5rem;
  display: block;
}

.login-help p {
  max-width: 32rem;
  margin: 0 auto;
}

/* THE BUTTONS. Three kinds share one shape, a round pill in a readable font:
     .btn-sigil          the main one (orange). It ends in a round chip holding an arrow; the chip fills dark on hover.
     .btn-sigil-outline  the secondary one: a quiet outline.
     .btn-sigil-danger   delete and remove: a red outline.
   .btn-sm makes any of them smaller. .card-menu-toggle (below) is the icon-only round one. */
.btn-sigil,
.btn-sigil-outline,
.btn-sigil-danger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-family: "Inter", "Segoe UI Variable Text", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  padding: 0.74rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #f3f3f6;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-sigil:focus-visible,
.btn-sigil-outline:focus-visible,
.btn-sigil-danger:focus-visible {
  outline: 2px solid #fdba74;
  outline-offset: 2px;
}

/* a button that cannot be pressed (a form that is saved, a limit that is full) */
.btn-sigil:disabled, .btn-sigil.disabled, .btn-sigil[aria-disabled="true"],
.btn-sigil-outline:disabled, .btn-sigil-outline.disabled, .btn-sigil-outline[aria-disabled="true"],
.btn-sigil-danger:disabled, .btn-sigil-danger.disabled, .btn-sigil-danger[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* main: solid orange, the arrow in a chip at the end */
.btn-sigil {
  padding: 0.4rem 0.4rem 0.4rem 1.2rem;
  border-color: var(--btn-accent);
  background: var(--btn-accent);
  color: #1a0d02;
}

.btn-sigil:hover,
.btn-sigil:focus-visible {
  border-color: #fdba74;
  background: #fdba74;
  color: #1a0d02;
}

.btn-sigil:not(.card-menu-toggle)::after {
  content: "";
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2) var(--btn-chip-arrow-dark) center / 0.95em no-repeat;
  transition: background-color 0.15s ease;
}

.btn-sigil:hover::after,
.btn-sigil:focus-visible::after {
  background: #1a0d02 var(--btn-chip-arrow-orange) center / 0.95em no-repeat;
}

/* secondary: a quiet outline */
.btn-sigil-outline {
  font-weight: 600;
}

.btn-sigil-outline:hover,
.btn-sigil-outline:focus-visible {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* delete / remove buttons */
.btn-sigil-danger {
  border-color: rgba(var(--bs-danger-rgb), 0.5);
  background: rgba(var(--bs-danger-rgb), 0.06);
  color: #fca5a5;
}

.btn-sigil-danger:hover,
.btn-sigil-danger:focus-visible {
  border-color: var(--bs-danger);
  background: rgba(var(--bs-danger-rgb), 0.16);
  color: #fff;
}

/* Page styles that colour every link inside them (.rd a, .prose a ...) must not win over a button's own label colour: that once made an orange button's text orange. */
.btn.btn-sigil,
.btn.btn-sigil:hover,
.btn.btn-sigil:focus-visible { color: #1a0d02; }
.btn.btn-sigil-outline { color: #f3f3f6; }
.btn.btn-sigil-outline:hover,
.btn.btn-sigil-outline:focus-visible { color: #fff; }
.btn.btn-sigil-danger { color: #fca5a5; }
.btn.btn-sigil-danger:hover,
.btn.btn-sigil-danger:focus-visible { color: #fff; }

/* the Plans pages' buttons keep a light that sweeps across them (the landing page styles them from here) */
.plan-btn {
  overflow: hidden;
}

.plan-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

.plan-btn:hover::before {
  left: 130%;
}

/* smaller buttons: toolbars, list rows, cards */
.btn-sigil.btn-sm,
.btn-sigil-outline.btn-sm,
.btn-sigil-danger.btn-sm {
  gap: 0.55rem;
  font-size: 0.82rem;
}

.btn-sigil.btn-sm {
  padding: 0.28rem 0.28rem 0.28rem 0.95rem;
}

.btn-sigil-outline.btn-sm,
.btn-sigil-danger.btn-sm {
  padding: 0.55rem 1rem;
}

/* the one icon button above a card that expands into Edit profile / Edit card */
.card-menu-toggle,
.btn-sigil.card-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: #f3f3f6;
}

.btn-sigil.card-menu-toggle:hover,
.btn-sigil.card-menu-toggle:focus-visible {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.card-menu-toggle::after {
  display: none;
}

.card-menu-icon {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.premium-badge {
  color: #14100a;
  background: linear-gradient(135deg, #ff7a18, #ffd200);
  font-weight: 700;
  vertical-align: middle;
}

/* opacity preview, busy backdrop so the fade is easy to see */
.opacity-value {
  min-width: 3.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.opacity-sample-backdrop {
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #f97316, #ec4899 45%, #6366f1);
}

.opacity-sample {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-align: center;
  background: color-mix(in srgb, var(--bs-body-bg) calc(var(--tile-opacity, 100) * 1%), transparent);
}

.edit-background-preview {
  display: block;
  max-width: 100%;
  max-height: 10rem;
  border-radius: 0.6rem;
}

/* With several presets, each one's background gets its own panel. */
.preset-background-many {
  padding: 0.9rem 1rem;
  margin-top: 0.9rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.8rem;
}

.preset-background-title {
  margin-bottom: 0.75rem;
}

.font-sample {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
}

.section-heading {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* /Admin/WhatsNew */
.admin-whatsnew {
  max-width: 52rem;
  margin: 0 auto;
}

.whatsnew-add {
  margin: 1.25rem 0 2rem;
  padding: 1rem;
  border: 1px solid rgba(var(--sigil-accent-2-rgb), 0.25);
  border-radius: 0.75rem;
}

.whatsnew-admin-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.whatsnew-admin-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(var(--sigil-accent-2-rgb), 0.25);
  border-radius: 0.75rem;
}

.whatsnew-admin-thumb {
  flex: 0 0 auto;
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 0.5rem;
}

.whatsnew-admin-body {
  flex: 1 1 auto;
  min-width: 0;
}

.whatsnew-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.whatsnew-admin-actions form {
  margin: 0;
}

/* /Admin/Dashboard */
.dashboard-page {
  width: 100%;          /* (a grid item with auto margins is sized to its content, so a wide table made the whole page wider than a phone) */
  max-width: 64rem;
  margin: 0 auto;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 0.5rem;
}

.dash-stat {
  padding: 0.75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  background: var(--bs-tertiary-bg);
}

.dash-stat-number {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.dash-stat-label {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.dash-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.dash-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex: 1 1 16rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  background: var(--bs-tertiary-bg);
}

.dash-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.dash-search .form-control {
  flex: 1 1 14rem;
  max-width: 22rem;
}

.dash-table td,
.dash-table th {
  white-space: nowrap;
}

.dash-pager {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

/* /Admin/Featured */
.admin-featured {
  max-width: 52rem;
  margin: 0 auto;
}

.featured-add {
  margin: 1.25rem 0;
}

.featured-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.featured-add-row .form-control {
  flex: 1 1 16rem;
}

.featured-admin-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.featured-admin-item {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(var(--sigil-accent-2-rgb), 0.25);
  border-radius: 0.75rem;
}

.featured-admin-thumb {
  display: block;
  width: 12rem;
  max-width: 100%;
  height: 7.5rem;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.5rem;
}

.featured-admin-body {
  flex: 1 1 16rem;
  min-width: 0;
}

.featured-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0;
}

.featured-admin-actions form {
  margin: 0;
}

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

.featured-replace .form-control {
  flex: 1 1 12rem;
}

.admin-prompts {
  max-width: 52rem;
  margin: 0 auto;
}

.prompt-kind-section {
  margin: 1.75rem 0;
  padding: 1rem;
  border: 1px solid rgba(var(--sigil-accent-2-rgb), 0.25);
  border-radius: 0.75rem;
}

.prompt-add textarea {
  resize: vertical;
}

.prompt-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

/* the dropdown that holds a kind's own prompts: closed by default, and the list inside scrolls on its own so hundreds of prompts never lengthen the page */
.prompt-dropdown {
  margin-top: 1rem;
  border: 1px solid rgba(var(--sigil-accent-2-rgb), 0.25);
  border-radius: 0.6rem;
}

.prompt-dropdown > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.prompt-dropdown > summary::-webkit-details-marker {
  display: none;
}

.prompt-dropdown > summary::after {
  content: "\25BE";
  margin-left: auto;
  transition: transform 0.15s ease;
}

.prompt-dropdown[open] > summary::after {
  transform: rotate(180deg);
}

.prompt-count {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: rgba(var(--sigil-accent-2-rgb), 0.2);
  font-size: 0.8rem;
  font-weight: 600;
}

.prompt-dropdown-body {
  padding: 0 0.85rem 0.85rem;
}

.prompt-scroll {
  max-height: 22rem;
  margin-top: 0.75rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.prompt-item[hidden] {
  display: none;
}

.prompt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(var(--sigil-accent-2-rgb), 0.15);
  border-radius: 0.5rem;
}

.prompt-item form {
  margin: 0;
  flex: 0 0 auto;
}

.categories-showcase {
  padding: 2rem 1rem 5rem;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 2rem;
}

.category-pill {
  border: 1px solid rgba(var(--sigil-accent-2-rgb), 0.35);
  color: var(--bs-body-color);
  padding: 0.4rem 1.1rem;
  border-radius: 50rem;
  font-size: 0.95rem;
  background: rgba(var(--sigil-accent-1-rgb), 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.category-pill:hover {
  border-color: var(--sigil-accent-1);
  background: rgba(var(--sigil-accent-1-rgb), 0.16);
}

/* ---------- profile box contents (the boxes are in card.css) ---------- */

/* a thin accent-tinted ring, not the old solid gradient disc - the cinematic look keeps the
   picture itself as the focal point rather than wrapping it in a bright band of colour. */
.profile-avatar-ring {
  display: inline-block;
  position: relative;
  padding: 3px;
  margin-bottom: 0.6rem;
  border-radius: 50%;
  background: rgba(var(--sigil-accent-1-rgb), 0.5);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
}

.profile-avatar {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(8, 8, 10, 0.9);
}

.profile-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #14100a;
  background: var(--sigil-gradient);
}

.profile-username {
  font-size: 1.15rem;
  font-weight: 700;
}

.profile-handle {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.profile-bio {
  white-space: pre-line;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink);
  max-width: 32ch;
}

.profile-category-group {
  margin-bottom: 1.5rem;
}

.profile-category-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
  display: block;
}

.profile-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.profile-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--bs-secondary-color);
}

/* ---------- edit profile sidebar shell ---------- */

.edit-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);        /* (a plain 1fr cannot shrink below its content, so a wide table made the whole page wider than a phone) */
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 768px) {
  .edit-shell {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}

.edit-sidebar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem;
  position: static;
}

@media (min-width: 768px) {
  .edit-sidebar {
    flex-direction: column;
    position: sticky;
    top: calc(var(--nav-offset, 0px) + 1rem);
  }
}

.edit-sidebar-link {
  text-align: left;
  padding: 0.55rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  background: transparent;
  color: var(--bs-body-color);
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.edit-sidebar-link:hover {
  background: rgba(var(--sigil-accent-1-rgb), 0.1);
}

.edit-sidebar-link.active {
  border-color: rgba(var(--sigil-accent-1-rgb), 0.4);
  background: rgba(var(--sigil-accent-1-rgb), 0.14);
  color: var(--sigil-accent-2);
}

.edit-content {
  min-width: 0;
}

.permission-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.permission-toggle {
  padding: 1.75rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(250, 204, 21, 0.25);
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.05), transparent 35%), var(--bs-body-bg);
}

/* ---------- edit profile sections ---------- */

.edit-section-box {
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(250, 204, 21, 0.25);
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.05), transparent 35%), var(--bs-body-bg);
}

.edit-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.edit-section-subtitle {
  margin-bottom: 1.5rem;
}

/* game time: what the bot has counted, under the "Count my game time" switch */
.gt-status {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  animation: gt-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.gt-status.gt-warn { border-color: rgba(250, 204, 21, 0.5); background: rgba(250, 204, 21, 0.07); }
.gt-line { margin: 0 0 0.35rem; }
.gt-tips { margin: 0.25rem 0 0; padding-left: 1.2rem; color: var(--bs-secondary-color, #9ca3af); font-size: 0.92rem; }
.gt-tips li { margin-bottom: 0.15rem; }
.gt-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.gt-games li { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; animation: gt-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.gt-games li:nth-child(2) { animation-delay: 0.06s; }
.gt-games li:nth-child(3) { animation-delay: 0.12s; }
.gt-games li:nth-child(n + 4) { animation-delay: 0.18s; }
.gt-game { font-weight: 600; }
.gt-time { font-weight: 700; color: #fb923c; }
.gt-ago { color: var(--bs-secondary-color, #9ca3af); font-size: 0.85rem; }
.gt-live { display: inline-flex; align-items: center; gap: 0.5rem; color: #6ee7b7; }
.gt-live i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: gt-pulse 1.8s ease-out infinite; }
@keyframes gt-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
@keyframes gt-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gt-status, .gt-games li, .gt-live i { animation: none; } }

/* keeps the space so nothing jumps when "No avatar" hides the preview */
.avatar-preview-slot {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.edit-avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.edit-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: #14100a;
  background: var(--sigil-gradient);
}

.theme-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  position: relative;
}

/* radio is hidden, the coloured chip is what you click */
.theme-swatch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.theme-swatch-chip {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  transition: transform 0.15s ease, outline-color 0.15s ease;
  outline: 3px solid transparent;
  outline-offset: 3px;
}

.theme-swatch:hover .theme-swatch-chip {
  transform: scale(1.08);
}

.theme-swatch input:checked + .theme-swatch-chip {
  outline-color: var(--bs-body-color);
}

.theme-swatch input:focus-visible + .theme-swatch-chip {
  outline-color: var(--sigil-accent-1);
}

/* "None" choice, empty box with a slash */
.background-none-chip {
  background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, 0.12) 6px 8px);
}

.theme-swatch-label {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

/* ---------- Guide page ---------- */

.guide-page {
  max-width: 48rem;
  margin: 0 auto;
  padding-bottom: 3rem;
}

.guide-page h2 {
  scroll-margin-top: 1rem;
}

.guide-toc {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  background: var(--bs-tertiary-bg);
}

.guide-toc ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  columns: 2 14rem;
}

.guide-toc li {
  padding: 0.15rem 0;
}

.guide-list dt {
  margin-top: 0.9rem;
  font-weight: 700;
}

.guide-list dd {
  margin: 0.15rem 0 0;
  color: var(--bs-secondary-color);
}

.guide-commands code {
  font-size: 1rem;
}


/* the ink of a card's small print (tile labels, stats, pills, comments): white on the dark page */
[data-bs-theme="dark"] {
  --ink-strong: #fff;
  --ink: rgba(255, 255, 255, 0.85);
  --ink-soft: rgba(255, 255, 255, 0.6);
  --ink-mute: rgba(255, 255, 255, 0.45);
  --pill-bg: rgba(255, 255, 255, 0.035);
  --pill-border: rgba(255, 255, 255, 0.12);
}

/* the small labels next to a name (on cards and in the moderators' lists), so they look the same wherever they are shown */
.mod-badge {
  color: #fff;
  background: linear-gradient(135deg, #5865f2, #7b8bff);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* Developer tag: orange like the logo so it isn't mistaken for the blue mod one */
.dev-badge {
  color: #14100a;
  background: linear-gradient(135deg, #f97316, #fbbf24);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* SIGIL CONQUEST champion: a season's winning side. Dark ember with an orange rim, the colours of the game itself */
.champion-badge {
  color: #ffb13d;
  background: linear-gradient(135deg, #3b2216, #1c100b);
  border: 1px solid rgba(255, 150, 50, 0.55);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* The developer dashboard's website-visitors and command-popularity tables: range links, and a bar in the last column. */
.vis-ranges {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

.vis-range {
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  color: var(--bs-body-color);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}

.vis-range:hover { background: rgba(14, 165, 233, 0.12); color: var(--bs-body-color); }
.vis-range[aria-pressed="true"] { background: rgba(14, 165, 233, 0.22); }

.vis-bar-col { width: 28%; min-width: 5rem; }

.vis-bar-track {
  display: block;
  height: 0.6rem;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  overflow: hidden;
}

.vis-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #0ea5e9;
}

/* a short plain-words line under a number on the developer's website-visitors cards */
.vis-hint {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--bs-secondary-color);
}

/* ---- Privacy and Terms: long reading, so a narrow column, room between lines, a divider per section and a contents list (legal.js builds it) ---- */

.privacy-page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0.5rem 0 3.5rem;
  line-height: 1.7;
  font-size: 1.02rem;
}

.privacy-page h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.privacy-page > h1 + p { font-size: 1.08rem; margin-bottom: 1.6rem; }

.privacy-page h2 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 2.6rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bs-border-color);
  scroll-margin-top: 5rem;
}

.privacy-page h2:first-of-type { border-top: 0; padding-top: 0; }
.privacy-page p { margin-bottom: 1rem; }
.privacy-page ul, .privacy-page ol { padding-left: 1.3rem; margin-bottom: 1.1rem; }
.privacy-page li { margin-bottom: 0.65rem; }
.privacy-page li::marker { color: var(--sigil-accent-1, #38bdf8); }
.privacy-page strong { font-weight: 650; }
.privacy-page a { text-underline-offset: 3px; }
.privacy-page code { font-size: 0.9em; padding: 0.1em 0.4em; border-radius: 0.35rem; background: var(--bs-tertiary-bg); }

.legal-toc {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--bs-tertiary-bg);
  line-height: 1.5;
}

.legal-toc strong { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); font-weight: 600; }
.legal-toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.legal-toc li { margin: 0 0 0.3rem; break-inside: avoid; font-size: 0.95rem; }

@media (max-width: 620px) {
  .legal-toc ol { columns: 1; }
}

/* ---- phones and touch screens: controls big enough to read and to press ---- */
@media (max-width: 767.98px), (pointer: coarse) {
  /* The small buttons (Log in and Log out in the top bar, the toolbar and card buttons) get a 40px touch height. */
  .btn-sigil.btn-sm,
  .btn-sigil-outline.btn-sm,
  .btn-sigil-danger.btn-sm {
    font-size: 0.85rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn.btn-sm.btn-outline-secondary,
  .btn.btn-sm.btn-link {
    min-height: 38px;
  }

  /* Fields: 16px type stops iPhones zooming in when one is tapped, and 40px is a comfortable height. */
  .form-control,
  .form-select,
  textarea.form-control {
    font-size: 1rem;
  }

  .form-control-sm,
  .form-select-sm {
    min-height: 40px;
    font-size: 1rem;
  }

  .form-check-input:not([role="switch"]) {
    width: 1.35em;
    height: 1.35em;
    margin-top: 0.15em;
  }

  .form-switch .form-check-input {
    width: 2.6em;
    height: 1.4em;
  }

  .form-check-label {
    padding-block: 0.25rem;
  }
}

/* ---- The Asterism button in the top bar (only shown to the people who may see Asterism: see AsterismNavViewComponent) ----
   A small dark chip with Asterism's own mark and spaced-capital word and a gold edge, so it reads as a game of its own and stands out from the quiet links beside it. The colours do not follow the
   light and dark looks on purpose: it is always the night. */
.nav-asterism {
  display: flex;
  align-items: center;
  margin: 0 0.5rem;
}

.asterism-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0.95rem 0.28rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 198, 90, 0.55);
  background: linear-gradient(170deg, #1d1d22 0%, #121215 55%, #060607 100%);
  color: #f4f4f6;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(245, 198, 90, 0.1), 0 4px 14px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.asterism-nav-btn:hover,
.asterism-nav-btn:focus-visible,
.asterism-nav-btn.is-here {
  color: #fff;
  border-color: rgba(255, 224, 138, 0.95);
  box-shadow: 0 0 0 1px rgba(245, 198, 90, 0.25), 0 6px 20px rgba(245, 198, 90, 0.2);
}

.asterism-nav-btn:hover {
  transform: translateY(-1px);
}

.asterism-nav-mark {
  flex: none;
}

.asterism-nav-word {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-right: -0.34em;
  line-height: 1;
}

/* a slow glint across the button every few seconds (switched off for people who ask for less motion) */
.asterism-nav-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 231, 160, 0.22), transparent);
  transform: skewX(-18deg);
  animation: asterism-glint 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes asterism-glint {
  0%, 70% { left: -40%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .asterism-nav-btn::after { animation: none; display: none; }
  .asterism-nav-btn { transition: none; }
}

/* in the opened menu on a phone: the chip keeps its shape instead of stretching across the row */
@media (max-width: 991.98px) {
  .nav-asterism {
    margin: 0.45rem 0 0.45rem 0.8rem;
  }
}

/* Edit profile, Show off: servers to show, a Top 4, prompts and vouch words */
.showoff-page { max-width: 52rem; margin: 0 auto; }
.showoff-servers { display: grid; gap: 0.4rem; }
.showoff-server { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.75rem; border: 1px solid var(--bs-border-color); border-radius: 0.7rem; min-width: 0; }
.showoff-pick { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 1 1 auto; cursor: pointer; margin: 0; }
.showoff-server-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.showoff-featured { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; margin: 0; cursor: pointer; }
.showoff-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.6rem; margin: 0.9rem 0 0; padding: 0; border: 0; min-width: 0; }
.showoff-top[hidden] { display: none; }
.showoff-slot { min-width: 0; }
.showoff-prompt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.6rem; margin-bottom: 0.6rem; }
.showoff-words { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.showoff-word { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; cursor: pointer; }

@media (max-width: 560px) {
  .showoff-prompt { grid-template-columns: minmax(0, 1fr); }
  .showoff-server { flex-wrap: wrap; }
}

/* Developer dashboard: each section heading is a fold (see js/dev-folds.js), so a tab is a short list of headings you open when you need them. */
.dev-fold { border-top: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.12)); }
.dev-fold > summary { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0; cursor: pointer; list-style: none; }
.dev-fold > summary::-webkit-details-marker { display: none; }
.dev-fold > summary::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: 0.6; transform: rotate(-45deg); transition: transform 0.15s ease; }
.dev-fold[open] > summary::before { transform: rotate(45deg); }
.dev-fold > summary > h3 { margin: 0 !important; }
.dev-fold > summary:hover > h3 { color: var(--sigil-accent-1, #f97316); }
.dev-fold[open] { padding-bottom: 0.9rem; }
.dev-fold-bar { display: flex; gap: 0.4rem; margin: 0 0 0.6rem; }
@media (prefers-reduced-motion: reduce) { .dev-fold > summary::before { transition: none; } }

/* The footer lists every page about what the bot does, so each is one click from anywhere on the site. */
.footer-features { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin-top: 0.6rem; font-size: 0.8rem; }
.footer-features span { opacity: 0.7; }
.footer-features a { color: inherit; opacity: 0.85; text-decoration: none; }
.footer-features a:hover { opacity: 1; text-decoration: underline; }

/* The footer sits after the page (it grows with its links and never covers anything) and drops to the bottom of the window on a short page. Only pages with the site footer. */
body:has(> footer.footer) {
  margin-bottom: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Show off: a search box on the long pick lists (see js/show-off.js). The real select stays in the page, hidden, and is what gets sent. */
.showoff-combo { position: relative; }
.showoff-native { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.showoff-combo-btn { display: block; width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showoff-combo-btn.is-empty { color: var(--bs-secondary-color); }
.showoff-combo-pop { position: absolute; z-index: 40; left: 0; right: 0; min-width: min(100%, 15rem); margin-top: 4px; padding: 0.5rem; border: 1px solid var(--bs-border-color); border-radius: 12px; background: var(--bs-body-bg); box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.75); }
.showoff-combo-pop[hidden] { display: none; }
.showoff-combo-search { margin-bottom: 0.4rem; font-size: 16px; }
.showoff-combo-list { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; }
.showoff-combo-list li { padding: 0.45rem 0.6rem; border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; }
.showoff-combo-list li[hidden] { display: none; }
.showoff-combo-list li.is-active { background: rgba(255, 255, 255, 0.09); }
.showoff-combo-list li.is-selected { color: var(--sigil-accent-1, #f97316); font-weight: 600; }
.showoff-combo-list li.is-taken { opacity: 0.4; cursor: default; }
.showoff-combo-list li.showoff-combo-clear { color: var(--bs-secondary-color); }
.showoff-combo-empty { margin: 0.4rem 0.6rem; color: var(--bs-secondary-color); font-size: 0.9rem; }

/* ---------- the top bar: hides when you scroll down, comes back when you scroll up (see js/nav-scroll.js) ---------- */
html.nav-smart body > header {
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.nav-smart body > header.nav-hidden {
  transform: translateY(-100%);
}

html.nav-smart body > header .site-nav {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

html.nav-smart body > header.nav-solid .site-nav {
  background: rgba(12, 12, 15, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* the things that stick to the top of the page slide with the bar instead of jumping */
html.nav-smart .rd-pf-tabs,
html.nav-smart .rd-pin-in,
html.nav-smart .rd-ledger-head,
html.nav-smart .rd-docs .rd-dc-side,
html.nav-smart .rd-docs .rd-dc-toc,
html.nav-smart .edit-sidebar,
html.nav-smart .dash-split-side {
  transition: top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.nav-smart body > header,
  html.nav-smart body > header .site-nav,
  html.nav-smart .rd-pf-tabs,
  html.nav-smart .rd-pin-in,
  html.nav-smart .rd-ledger-head,
  html.nav-smart .rd-docs .rd-dc-side,
  html.nav-smart .rd-docs .rd-dc-toc,
  html.nav-smart .edit-sidebar,
  html.nav-smart .dash-split-side {
    transition: none;
  }
}

/* the Connect numbers on the developer dashboard: a card per number with a small chart of the days */
.cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.8rem; margin-top: 0.6rem; }
.cn-card { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem 0.7rem; border-radius: 0.9rem; border: 1px solid rgba(250, 204, 21, 0.25); background: linear-gradient(180deg, rgba(249, 115, 22, 0.07), transparent 60%), var(--bs-body-bg); animation: cn-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.cn-card:nth-child(2) { animation-delay: 0.04s; }
.cn-card:nth-child(3) { animation-delay: 0.08s; }
.cn-card:nth-child(4) { animation-delay: 0.12s; }
.cn-card:nth-child(n + 5) { animation-delay: 0.16s; }
.cn-total { font-size: 1.9rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.cn-label { color: var(--bs-secondary-color); font-size: 0.9rem; }
.cn-spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin-top: 0.5rem; }
.cn-spark i { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #fb923c, #f97316); opacity: 0.85; transform-origin: bottom; animation: cn-grow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes cn-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cn-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .cn-card, .cn-spark i { animation: none; } }

/* The list that opens from a drop-down is drawn by the browser. The site is dark everywhere, so give every list the dark look and readable text (it used to open white with light-grey words). */
select { color-scheme: dark; }
select option, select optgroup { background-color: #17171b; color: #f4f4f6; }
select option:checked { background-color: #2b2b33; }

/* A note about Sigil Ember under the top bar ("when it counts", see EmberMoments): one line, a button and a way to put it away. */
.em-moment { display: flex; align-items: center; gap: 14px; margin: 14px 0 6px; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(250, 204, 21, 0.35); background: linear-gradient(135deg, rgba(249, 115, 22, 0.16), rgba(23, 23, 27, 0.9)); }
.em-moment.em-drop { border-color: rgba(239, 68, 68, 0.45); background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(23, 23, 27, 0.9)); }
.em-icon { font-size: 24px; line-height: 1; flex: none; }
.em-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.em-body b { color: #f4f4f6; font-size: 15px; }
.em-body span { color: #b9b9c4; font-size: 14px; }
.em-cta { flex: none; padding: 8px 16px; border-radius: 999px; background: linear-gradient(135deg, #f97316, #facc15); color: #16110a; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.em-cta:hover { color: #16110a; filter: brightness(1.08); }
.em-x { flex: none; margin: 0; }
.em-x button { border: 0; background: transparent; color: #8d8d99; font-size: 24px; line-height: 1; padding: 0 4px; cursor: pointer; }
.em-x button:hover { color: #f4f4f6; }
@media (max-width: 640px) { .em-moment { flex-wrap: wrap; } .em-body { flex-basis: calc(100% - 80px); } .em-cta { margin-inline-start: 38px; } }