:root {
  --paper: #f6efd9;
  --card: #fffbf0;
  --ink: #2e2118;
  --thread-red: #9c2b3b;
  --thread-teal: #2a6e68;
  --heart-pink: #d9506b;
  --dot: #b9d3e4;
  --gold: #c99a3d;
  --link-blue: #14539a;
  --nav-strip: #e3eef5;
}

/* ---- Dark mode ---------------------------------------------------------------------------------------------------
   The Sun/Moon switch in the header (templates/base.html) puts data-theme="dark" on <html> and remembers the choice
   in this browser only ("hh-theme", see templates/includes/theme_init.html). Light stays the default for everyone
   who never presses it.

   Dark mode changes nothing but custom properties, never rules of its own for a component:
   - the palette above gets night colours here;
   - the --dm-* variables exist only in dark mode. A declaration that needs another colour at night than the palette
     gives it names one, with its light colour as the fallback: border: 2px solid var(--dm-line, var(--ink)).
     They are never defined in the light theme, so the light site stays exactly as it always was.
   - What members design themselves keeps the colours it was designed with, in both themes: a profile (with its page
     colour), the styled Personal cards, the Heartbeat frames, the Plaza's world and the Supporter quilt's patches. The
     "islands" below give them the light palette back and switch the --dm-* variables off, so a member's theme or
     Custom CSS never meets colours it was not written for. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1a1520;
  --card: #261e2b;
  --ink: #efe5d3;
  --thread-red: #a3364a;
  --thread-teal: #2c7570;
  --heart-pink: #e2627c;
  --dot: #352b3d;
  --gold: #d2a54c;
  --link-blue: #8db2ff;
  --nav-strip: #222a35;
  --dm-on-accent: #fff6ea; /* text and seams on red, teal and other coloured buttons and bars */
  --dm-red-text: #f08497; /* red words (headings, links on hover) */
  --dm-teal-text: #6cc6ba; /* teal words (labels, small headings) */
  --dm-line: #5b4a63; /* borders */
  --dm-shadow: #0b080d; /* the hard shadows under boxes and buttons */
  --dm-rule: #5e5066; /* dashed dividers */
  --dm-nav-rule: #3e4b5c; /* the dividers between menu items */
  --dm-field: #1d1723; /* text boxes and other fields */
  --dm-sheet: #2e2534; /* small white sheets: comments, picture rows */
  --dm-peach: #3d2a33; /* your own messages, picked options */
  --dm-danger-bg: #3e1f27;
  --dm-gold-soft: #3a3122;
  --dm-muted: #b9a88f; /* quiet icons (an empty heart, the message tools) */
  --dm-soft: rgba(255, 255, 255, 0.06);
  --dm-veil: rgba(26, 21, 32, 0.84);
  --dm-pink-solid: #c4455e;
  --dm-demo-blue: #1f2a36;
  --dm-demo-rose: #2b2029;
  --dm-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23EFE5D3' d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
  --dm-select-arrow-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23F08497' d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
}
:root[data-theme="dark"]
  :where(
    .profile-canvas,
    main.has-page-color,
    [class*="personal-style--"],
    [class*="heartbeat-frame--"],
    .plaza-frame,
    .plaza-noticeboard-notes,
    .supporter-ribbon,
    .quilt-patch:not(.quilt-patch--ghost)
  ) {
  color-scheme: light;
  --paper: #f6efd9;
  --card: #fffbf0;
  --ink: #2e2118;
  --thread-red: #9c2b3b;
  --thread-teal: #2a6e68;
  --heart-pink: #d9506b;
  --dot: #b9d3e4;
  --gold: #c99a3d;
  --link-blue: #14539a;
  --nav-strip: #e3eef5;
  --dm-on-accent: initial;
  --dm-red-text: initial;
  --dm-teal-text: initial;
  --dm-line: initial;
  --dm-shadow: initial;
  --dm-rule: initial;
  --dm-nav-rule: initial;
  --dm-field: initial;
  --dm-sheet: initial;
  --dm-peach: initial;
  --dm-danger-bg: initial;
  --dm-gold-soft: initial;
  --dm-muted: initial;
  --dm-soft: initial;
  --dm-veil: initial;
  --dm-pink-solid: initial;
  --dm-demo-blue: initial;
  --dm-demo-rose: initial;
  --dm-select-arrow: initial;
  --dm-select-arrow-hover: initial;
}
/* Text inside an island would otherwise keep the light colour it inherits from the dark page around it. (Heartbeat
   frames are left out: every frame already sets its own text colour, some of them light on purpose.) */
:root[data-theme="dark"]
  :where(
    .profile-canvas,
    main.has-page-color,
    [class*="personal-style--"],
    .plaza-noticeboard-notes,
    .supporter-ribbon,
    .quilt-patch:not(.quilt-patch--ghost)
  ) {
  color: var(--ink);
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;

  overflow-y: scroll;
  scrollbar-gutter: stable;

  scrollbar-color: var(--thread-red) var(--card);
}

*::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
*::-webkit-scrollbar-track {
  background: var(--card);
}
*::-webkit-scrollbar-thumb {
  background: var(--thread-red);
  border: 3px solid var(--card);
  border-radius: 0;
}
*::-webkit-scrollbar-thumb:hover {
  background: #82202c;
}
*::-webkit-scrollbar-corner {
  background: var(--card);
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px);
  background-size: 15px 15px;
  color: var(--ink);
  font-family: "Pixelify Sans", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  font-variant-ligatures: none;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  word-wrap: break-word;
  cursor:
    url("../img/cursor-default.3873a6b0204d.png") 1 0,
    auto;
}

a {
  color: var(--link-blue);
  text-decoration: underline;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
a:hover {
  color: var(--dm-red-text, var(--thread-red));
}
select,
input[type="checkbox"],
input[type="radio"] {
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px dashed var(--thread-teal);
  outline-offset: 2px;
}
::selection {
  background: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
}

hr {
  border: none;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--thread-red) 50%,
    var(--thread-teal) 50%
  );
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.15rem;
  width: 100%;
}

.eyebrow {
  font-family: "Silkscreen", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--dm-teal-text, var(--thread-teal));
  text-transform: uppercase;
}

.brand-bar {
  background: var(--thread-red);
  border-bottom: 3px solid var(--dm-line, var(--ink));
}
.brand-bar-inner {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.7rem 1rem;
}

/* The Sun/Moon switch (includes/theme_toggle.html): pinned to the right of the logo bar, so the logo keeps its place. */
.theme-toggle {
  position: absolute;
  top: 50%;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--dm-on-accent, var(--card));
  background: rgba(46, 33, 24, 0.2);
  border: 2px solid var(--dm-on-accent, var(--card));
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
  transform: translateY(-50%);
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.theme-toggle:hover {
  background: rgba(46, 33, 24, 0.38);
}
.theme-toggle:active {
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  transform: translate(1px, calc(1px - 50%));
}
.theme-toggle:focus-visible {
  outline: 2px dashed var(--dm-on-accent, var(--card));
  outline-offset: 2px;
}
.theme-toggle-icon {
  display: block;
  width: 18px;
  height: 18px;
}
.theme-toggle-icon--sun {
  display: none;
  color: #ffd86b;
}
:root[data-theme="dark"] .theme-toggle-icon--sun {
  display: block;
}
:root[data-theme="dark"] .theme-toggle-icon--moon {
  display: none;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--dm-on-accent, var(--card));
}
.brand:hover {
  color: var(--dm-on-accent, var(--card));
}
.pixel-heart {
  fill: currentColor;
  color: var(--heart-pink);
  display: inline-block;
}
.pixel-heart--nav {
  color: var(--dm-on-accent, var(--card));
}
.brand-word {
  font-family: "Silkscreen", monospace;
  font-size: 1rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.brand-tagline {
  display: block;
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 0.64rem;
  font-weight: normal;
  letter-spacing: 0.01em;
  color: #f3d8de;
}

.nav-bar {
  background: var(--nav-strip);
  border-bottom: 2px solid var(--dm-line, var(--ink));
}
/* The header (logo bar and menu) is wider than the page so the whole member menu, an unread badge and a long
   username included, fits on one line; on mid-size screens the items move a little closer before anything wraps. */
.masthead-wrap {
  max-width: 1120px;
}
.site-nav {
  --nav-item-pad: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  padding: 0.5rem 0;
}
@media (max-width: 1180px) {
  .site-nav {
    --nav-item-pad: 0.4rem;
  }
}
/* The member menu is long: a bit less room around each item (here) and slightly smaller text (after .nav-username
   below) keep it on one line down to about 1024 pixels, a long username and two badges included. */
@media (max-width: 1100px) {
  .site-nav {
    --nav-item-pad: 0.3rem;
  }
}
.nav-group-left,
.nav-group-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.site-nav a,
.nav-link-btn {
  font-family: inherit;
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.15rem var(--nav-item-pad, 0.55rem);
  background: none;
  border: none;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.site-nav a:hover,
.nav-link-btn:hover {
  color: var(--dm-red-text, var(--thread-red));
  text-decoration: underline;
}
.site-nav a.nav-current {
  background: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
  text-decoration: none;
}
.site-nav a.nav-current:hover {
  color: var(--dm-on-accent, var(--card));
}

.nav-group-left a:first-child,
.nav-group-right a:first-child {
  padding-left: var(--nav-item-pad, 0.55rem);
  margin-left: calc(-1 * var(--nav-item-pad, 0.55rem));
}
.nav-group-left a:not(:first-child),
.nav-group-right a:not(:first-child),
.nav-group-right .nav-logout-form {
  border-left: 1px solid var(--dm-nav-rule, #9cb8c8);
}
.nav-logout-form {
  display: inline-flex;
}
.nav-username {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.15rem var(--nav-item-pad, 0.55rem);
  margin-left: calc(-1 * var(--nav-item-pad, 0.55rem));
  color: var(--ink);
  opacity: 0.8;
}
@media (max-width: 1100px) {
  .site-nav a,
  .nav-link-btn,
  .nav-username {
    font-size: 0.74rem;
  }
}

main {
  flex: 1;
}
.page {
  padding: 1.6rem 0 2.5rem;
}

.page-intro {
  text-align: center;
  padding: 0.5rem 0 1.8rem;
}

/* Home page wallpaper: a faint, repeating pixel-heart pattern.
   The pattern is drawn on a fixed layer behind the page (body.home-page::before)
   rather than on <body> itself, because `opacity` on <body> would fade the whole
   page, text and cards included, down to 20%. The tile is a transparent square
   with the heart centred in it, so neighbouring hearts keep a gap between them. */
body.home-page {
  background-image: none; /* swap the sitewide dot grid for the hearts */
  isolation: isolate; /* keeps the z-index: -1 layer above the page colour, below the content */
}
body.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/pixel-heart-tile.ae9946cc277c.png");
  background-size: 32px 32px;
  background-repeat: repeat;
  opacity: 0.2;
}
:root[data-theme="dark"] body.home-page::before {
  opacity: 0.16;
}

.pixel-heart--hero {
  width: 56px;
  height: 49px;
  margin: 0 auto 0.6rem;
  animation: pixel-beat 2.4s ease-in-out infinite;
}
@keyframes pixel-beat {
  0%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.16);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pixel-heart--hero {
    animation: none;
  }
}

.page-intro h1 {
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-weight: bold;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  color: var(--dm-red-text, var(--thread-red));
  margin: 0;
}
.page-intro .tagline {
  max-width: 34em;
  margin: 0.6rem auto 0;
  font-size: 0.88rem;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
  margin: 1.8rem 0;
  align-items: start;
}
.patch {
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
}
.patch-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
  font-family: "Silkscreen", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px dashed var(--dm-on-accent, var(--card));
}
.patch:nth-child(even) .patch-title {
  background: var(--thread-teal);
}
/* a box that keeps its colour whatever sits above it (the alternating rule above counts siblings, so a note shown to visitors would flip it) */
.patch.patch--red .patch-title {
  background: var(--thread-red);
}
.patch.patch--teal .patch-title {
  background: var(--thread-teal);
}
.patch-title .pixel-heart {
  width: 12px;
  height: 10.5px;
  color: var(--dm-on-accent, var(--card));
  flex-shrink: 0;
}
.patch-body {
  padding: 0.9rem 0.9rem 1rem;
}
.patch-body p:last-child {
  margin-bottom: 0;
}
.patch-body p:first-child {
  margin-top: 0;
}
.kofi-button-wrap {
  margin-top: 1rem;
  text-align: center;
}

.legal-body {
  max-width: 40em;
  margin: 0 auto;
}
.legal-body h2 {
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dm-red-text, var(--thread-red));
  margin: 1.7rem 0 0.6rem;
}
.legal-body h2:first-child {
  margin-top: 0;
}
.legal-body p {
  margin: 0 0 0.9rem;
}

.constitution-grid .patch {
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.constitution-grid .patch-body {
  flex: 1;
}

.form-panel {
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
  padding: 1.5rem 1.5rem 1.7rem;
  max-width: 24rem;
  margin: 0 auto;
}
.form-panel h1 {
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--dm-red-text, var(--thread-red));
  margin: 0 0 0.25rem;
  text-align: center;
}
.form-panel .form-panel-sub {
  text-align: center;
  font-size: 0.85rem;
  margin: 0 0 1.3rem;
}

form p {
  margin: 0 0 0.9rem;
}
.form-field {
  margin: 0 0 0.9rem;
}
label {
  display: block;
  font-family: "Silkscreen", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dm-teal-text, var(--thread-teal));
  margin-bottom: 0.3rem;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="url"],
textarea {
  width: 100%;
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 0.88rem;
  padding: 0.45rem 0.55rem;
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  background: var(--dm-field, #fff);
  color: var(--ink);
}
.helptext {
  display: block;
  font-size: 0.72rem;
  opacity: 0.8;
  margin-top: 0.25rem;
}
ul.errorlist {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  color: var(--dm-red-text, var(--thread-red));
  font-size: 0.78rem;
  font-weight: bold;
}

select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 100%;
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 0.88rem;
  line-height: 1.35;
  padding: 0.45rem 2.2rem 0.45rem 0.55rem;
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  background-color: var(--dm-field, #fff);
  background-image: var(
    --dm-select-arrow,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%232E2118' d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E")
  );
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px 8px;
  color: var(--ink);
  text-overflow: ellipsis;
}
select:hover,
select:focus {
  border-color: var(--thread-red);
  background-image: var(
    --dm-select-arrow-hover,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%239C2B3B' d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E")
  );
}
select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
option {
  background-color: var(--dm-field, #fff);
  color: var(--ink);
}
option:checked {
  background-color: var(--thread-red);
  background-image: linear-gradient(var(--thread-red), var(--thread-red));
  color: var(--dm-on-accent, var(--card));
}

input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 0.8rem;
  color: var(--ink);
  padding: 0.5rem;
  border: 2px dashed var(--dm-rule, #9c8b6e);
  background: var(--dm-field, rgba(255, 255, 255, 0.55));
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
input[type="file"]:hover {
  border-color: var(--thread-red);
}
input[type="file"]::file-selector-button {
  margin: 0 0.8rem 0 0;
  padding: 0.45rem 0.85rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
input[type="file"]::file-selector-button:hover {
  background: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
}
input[type="file"]:active::file-selector-button {
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  transform: translate(1px, 1px);
}

.file-preview {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}
.file-preview-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 2px solid var(--dm-line, var(--ink));
  flex-shrink: 0;
}
.file-preview-clear {
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.file-preview-clear input {
  accent-color: var(--thread-red);
}
.profibutton-preview-img {
  display: block;
  width: 88px;
  height: 31px;
  border: 2px solid var(--dm-line, var(--ink));
  box-sizing: content-box;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.btn {
  display: inline-block;
  font-family: "Silkscreen", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dm-on-accent, var(--card));
  background: var(--thread-red);
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  padding: 0.6rem 1.1rem;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
}
.btn:hover {
  color: var(--btn-hover-color, var(--dm-on-accent, var(--card)));
  background: var(--btn-hover-bg, #82202c);
  border-color: var(--btn-hover-border, var(--dm-line, var(--ink)));
}
.btn:active {
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  transform: translate(1px, 1px);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-block {
  width: 100%;
  text-align: center;
}

.btn-green {
  display: inline-block;
  font-family: "Silkscreen", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dm-on-accent, var(--card));
  background: var(--thread-teal);
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  padding: 0.6rem 1.1rem;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
}
.btn-green:hover {
  color: var(--dm-on-accent, var(--card));
  background: #215551;
}
.btn-green:active {
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  transform: translate(1px, 1px);
}

/* Add to Favorites, and Add Fellow next to it on a profile (friends/_fellow_button.html): one look for both, and the
   profile themes (profiles/themes.py) style the two the same way too. */
.favorite-btn,
.fellow-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dm-red-text, var(--thread-red));
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  padding: 0.6rem 1.1rem;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
}
.favorite-btn .favorite-btn-icon,
.fellow-btn .fellow-btn-icon {
  width: 12px;
  height: 10.5px;
  color: var(--dm-red-text, var(--thread-red));
  flex-shrink: 0;
}
.favorite-btn:hover {
  background: var(--fav-btn-hover-bg, var(--dm-peach, #fbeae0));
}
.fellow-btn:not(:disabled):hover {
  background: var(--fav-btn-hover-bg, var(--dm-peach, #fbeae0));
}
.favorite-btn:active,
.fellow-btn:not(:disabled):active {
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  transform: translate(1px, 1px);
}
.favorite-btn.is-favorited,
.fellow-btn.is-fellow {
  color: var(--dm-on-accent, var(--card));
  background: var(--thread-red);
}
.favorite-btn.is-favorited .favorite-btn-icon,
.fellow-btn.is-fellow .fellow-btn-icon {
  color: var(--dm-on-accent, var(--card));
}
.favorite-btn.is-favorited:hover {
  color: var(--btn-hover-color, var(--dm-on-accent, var(--card)));
  background: var(--btn-hover-bg, #82202c);
  border-color: var(--btn-hover-border, var(--dm-line, var(--ink)));
}
.fellow-btn.is-fellow:hover {
  color: var(--btn-hover-color, var(--dm-on-accent, var(--card)));
  background: var(--btn-hover-bg, #82202c);
  border-color: var(--btn-hover-border, var(--dm-line, var(--ink)));
}
/* A request of yours waiting for an answer: the outline turns dashed, like an envelope still on its way. */
.fellow-btn.is-waiting {
  border-style: dashed;
  box-shadow: none;
}
/* They asked you: the heart beats softly until you answer (still for anyone who asks for less motion). */
@media (prefers-reduced-motion: no-preference) {
  .fellow-btn.is-asking .fellow-btn-icon {
    animation: fellow-asking 1.6s ease-in-out infinite;
  }
}
@keyframes fellow-asking {
  0%, 60%, 100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
  }
}
.fellow-btn:disabled {
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed;
}
.fellow-note {
  margin: 0.6rem auto 0;
  max-width: 26rem;
  font-size: 0.76rem;
  opacity: 0.8;
}

.messages {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
}
.messages li {
  font-family: "Silkscreen", monospace;
  font-size: 0.68rem;
  border: 2px solid var(--dm-line, var(--ink));
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.4rem;
  background: var(--nav-strip);
}

.safety-banner {
  border: 2px solid var(--dm-line, var(--ink));
  background: var(--nav-strip);
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.2rem;
  font-size: 0.8rem;
}
.safety-banner a {
  color: var(--dm-teal-text, var(--thread-teal));
}

/* Shown above the pages a logged-out visitor may look at (Browse, Personals, ProfiRings). */
.visitor-note {
  border: 2px dashed var(--thread-teal);
  background: var(--card);
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.2rem;
  font-size: 0.8rem;
}
.visitor-note a {
  color: var(--dm-teal-text, var(--thread-teal));
  font-weight: 700;
}

.danger-zone {
  border: 2px solid var(--thread-red);
  background: var(--dm-danger-bg, #fbeaea);
  color: var(--ink);
  padding: 0.8rem 1rem;
  margin-bottom: 1.2rem;
  font-size: 0.82rem;
}
.danger-zone p {
  margin: 0 0 0.5rem;
}
.danger-zone p:last-child {
  margin-bottom: 0;
}
.danger-zone ul {
  margin: 0 0 0.5rem;
  padding-left: 1.2rem;
}
.danger-zone li {
  margin-bottom: 0.2rem;
}

.btn-danger {
  background: #5c1119;
  border-color: var(--dm-line, var(--ink));
}
.btn-danger:hover {
  background: #3e0b10;
}

.profile-header {
  text-align: center;
  padding: 0;
  background-size: cover;
  background-position: center;
}
.profile-header-inner {
  padding: 1.3rem 1rem 1.5rem;
}
.profile-header.has-bg-image .profile-name,
.profile-header.has-bg-image .profile-username {
  text-shadow:
    0 0 6px #fff,
    0 0 10px #fff,
    0 1px 2px #fff;
}
.profile-avatar {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
  margin-bottom: 0.8rem;
}
.profile-name {
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--dm-red-text, var(--thread-red));
  margin: 0;
}
.profile-username {
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--dm-teal-text, var(--thread-teal));
  margin: 0.4rem 0 0.9rem;
}
.eyebrow a {
  color: var(--dm-teal-text, var(--thread-teal));
}
.profile-bio p {
  white-space: pre-wrap;
}

.profile-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.profile-safety-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.profile-preview-note {
  font-size: 0.78rem;
  opacity: 0.7;
  margin: 0.9rem 0 0.5rem;
}

.profile-safety-footer {
  margin: 1.6rem auto 0;
  padding: 1.1rem 1rem 0;
  border-top: 2px dashed var(--dm-rule, #9c8b6e);
  text-align: center;
}
.profile-safety-footer-label {
  font-size: 0.78rem;
  opacity: 0.7;
  margin: 0 0 0.6rem;
}

.safety-action-btn {
  display: inline-block;
  font-family: "Silkscreen", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  padding: 0.45rem 0.9rem;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
}
.safety-action-btn:hover,
.safety-action-btn:focus-visible {
  background: var(--btn-hover-bg, var(--thread-red));
  color: var(--btn-hover-color, var(--dm-on-accent, var(--card)));
  border-color: var(--btn-hover-border, var(--thread-red));
}
.safety-action-btn:active {
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  transform: translate(1px, 1px);
}

.profile-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem 1rem;
}
.profile-fact {
  min-width: 0;
  border-left: 1px dashed var(--dm-rule, #9c8b6e);
  padding-left: 1rem;
}
.profile-fact:first-child {
  border-left: none;
  padding-left: 0;
}
.profile-fact-label {
  font-family: "Silkscreen", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dm-teal-text, var(--thread-teal));
  margin: 0 0 0.35rem;
}
.profile-fact-value,
.profile-fact-empty {
  margin: 0;
  font-size: 0.88rem;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-fact-empty {
  opacity: 0.55;
  font-style: italic;
}
.profile-fact-tags .interest-tag:last-child {
  margin-right: 0;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.6rem;
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  display: block;
}
.photo-slot {
  position: relative;
  text-align: center;
}
.photo-slot .link-btn {
  display: block;
  margin: 0.3rem auto 0;
}

.guestbook-form textarea {
  width: 100%;
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 0.88rem;
  padding: 0.5rem 0.6rem;
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  background: var(--dm-field, #fff);
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.guestbook-form {
  margin-bottom: 1.3rem;
}
.guestbook-hint {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 1.3rem;
}
.guestbook-entry {
  border-top: 1px dashed var(--dm-rule, #9c8b6e);
  padding: 0.75rem 0;
}
.guestbook-entry:first-child {
  border-top: none;
  padding-top: 0.1rem;
}
.guestbook-meta {
  font-size: 0.72rem;
  opacity: 0.75;
  margin: 0.25rem 0 0;
}
.guestbook-empty {
  opacity: 0.65;
  font-style: italic;
  font-size: 0.85rem;
}
.inline-form {
  display: inline;
}

/* Photos from the Plaza's photo booth (plaza/photos.py): pixel art, shown at twice its size and never smoothed */
.plaza-photo-pixels {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.plaza-photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plaza-photo-print {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  padding: 6px 6px 4px;
  background: #fffbf0;
  border: 1px solid #c9a97e;
  box-shadow: 2px 2px 0 rgba(46, 33, 24, 0.25);
}
.plaza-photo-print:nth-child(odd) {
  transform: rotate(-0.6deg);
}
.plaza-photo-print:nth-child(even) {
  transform: rotate(0.5deg);
}
.plaza-photo-print img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #2e2118;
}
.plaza-photo-date {
  margin-top: 0.3rem;
  font: 0.6rem "Silkscreen", monospace;
  color: #6b5a44;
}
.postcards {
  display: grid;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
}
.postcard {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  align-items: flex-start;
  padding: 8px;
  color: #2e2118;
  background: #fbf1dc;
  border: 1px solid #c9a97e;
  box-shadow: 2px 2px 0 rgba(46, 33, 24, 0.25);
}
.postcard--waiting {
  border-style: dashed;
  border-color: var(--thread-teal, #2a6e68);
}
.postcard-photo {
  display: block;
  flex: none;
  max-width: 100%;
  height: auto;
  border: 1px solid #2e2118;
}
.postcard-back {
  position: relative;
  flex: 1 1 10rem;
  min-width: 0;
  padding-right: 1.8rem;
}
.postcard-stamp {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.6rem;
  background: #fffbf0;
  outline: 2px dotted #c9a97e;
  outline-offset: -2px;
}
.postcard-note {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.postcard-from a {
  color: inherit;
}
.postcard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.4rem;
}

.blocked-user-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.blocked-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-top: 1px dashed var(--dm-rule, #9c8b6e);
  padding: 0.6rem 0;
  font-size: 0.88rem;
}
.blocked-user-row:first-child {
  border-top: none;
  padding-top: 0.1rem;
}

.profiring-member-list {
  max-height: 400px;
  overflow-y: auto;
}
.profiring-member {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.profiring-member-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mini-avatar {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 2px solid var(--dm-line, var(--ink));
  background: var(--nav-strip);
  flex-shrink: 0;
}
.mini-avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-avatar--empty .pixel-heart {
  width: 14px;
  height: 12px;
  color: var(--heart-pink);
}
.mini-avatar--sm {
  width: 28px;
  height: 28px;
}
.mini-avatar--sm.mini-avatar--empty .pixel-heart {
  width: 12px;
  height: 10px;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--dm-red-text, var(--thread-red));
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 0.72rem;
  text-decoration: underline;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}

textarea.code-input,
.code-input {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.82rem;
}
.code-input::placeholder {
  color: var(--ink);
  opacity: 0.38;
}
.css-hint {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--dm-rule, #9c8b6e);
  font-size: 0.8rem;
}
.css-hint code {
  font-family: ui-monospace, "Courier New", monospace;
  background: var(--nav-strip);
  border: 1px solid var(--dm-line, var(--ink));
  border-radius: 0;
  padding: 0.05rem 0.3rem;
  font-size: 0.75rem;
}

.char-counter {
  font-size: 0.72rem;
  opacity: 0.65;
  margin: 0.3rem 0 0.7rem;
  text-align: right;
}
.personal-ad-form .char-counter {
  text-align: left;
}
.char-counter-low {
  color: var(--dm-red-text, var(--thread-red));
  opacity: 1;
  font-weight: bold;
}

.css-reference {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--dm-rule, #9c8b6e);
}
.css-reference summary {
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
  font-family: "Silkscreen", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dm-teal-text, var(--thread-teal));
  padding: 0.2rem 0;
}
.css-reference summary:hover {
  color: var(--dm-red-text, var(--thread-red));
}
.css-reference-scroll {
  overflow: auto;
  max-height: 20rem;
  margin: 0.9rem 0 0.7rem;
}
.css-reference-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.8rem;
}
.css-reference-table th,
.css-reference-table td {
  border: 1px solid var(--dm-line, var(--ink));
  padding: 0.35rem 0.55rem;
  text-align: left;
  vertical-align: top;
}
.css-reference-table th {
  background: var(--nav-strip);
  font-family: "Silkscreen", monospace;
  font-size: 0.58rem;
  text-transform: uppercase;
}
.css-reference-table code {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.76rem;
  white-space: nowrap;
}
.css-reference-note {
  font-size: 0.78rem;
  margin: 0;
  opacity: 0.85;
}
.css-reference-note code {
  font-family: ui-monospace, "Courier New", monospace;
  background: var(--nav-strip);
  border: 1px solid var(--dm-line, var(--ink));
  padding: 0.05rem 0.3rem;
  font-size: 0.73rem;
}
.css-reference-list {
  margin: 0.8rem 0 0.7rem;
  font-size: 0.8rem;
}
.css-reference-list dt {
  font-family: "Silkscreen", monospace;
  font-size: 0.58rem;
  text-transform: uppercase;
  color: var(--dm-teal-text, var(--thread-teal));
  margin-top: 0.55rem;
}
.css-reference-list dd {
  margin: 0.12rem 0 0;
  overflow-wrap: anywhere;
}
.css-reference-example {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.7rem;
  background: var(--nav-strip);
  border: 1px solid var(--dm-line, var(--ink));
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.74rem;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre;
}

.site-footer {
  background: var(--nav-strip);
  border-top: 2px solid var(--dm-line, var(--ink));
  padding: 1.3rem 0;
  text-align: center;
}
.site-footer p {
  margin: 0 0 0.3rem;
  font-size: 0.76rem;
}
.signature {
  font-style: italic;
  font-size: 0.78rem;
  color: var(--dm-teal-text, var(--thread-teal));
}

.browse-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.browse-form-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-bottom: 0.9rem;
}
.browse-form-checkboxes label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  margin-bottom: 0;
}
.browse-form select {
  font-size: 0.85rem;
}
.browse-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  align-items: start;
}
.browse-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}
.browse-card:hover {
  color: var(--ink);
}
.browse-card-avatar {
  width: 100%;
  max-height: 140px;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid var(--dm-line, var(--ink));
  flex-shrink: 0;
}
.browse-card-avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nav-strip);
}
.browse-card-avatar--empty .pixel-heart {
  width: 32px;
  height: 28px;
  color: var(--heart-pink);
}

.browse-card-body {
  padding: 0.6rem 0.65rem 0.75rem;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  height: 8rem;
  overflow: hidden;
}
.browse-card-name {
  font-weight: bold;
  font-size: 0.88rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browse-card-meta {
  font-family: "Silkscreen", monospace;
  font-size: 0.55rem;
  color: var(--dm-teal-text, var(--thread-teal));
  margin: 0 0 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browse-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.4rem;
  max-height: 3.5rem;
  overflow: hidden;
}

.browse-card-tags .interest-tag {
  font-size: 0.5rem;
  padding: 0.2rem 0.4rem;
  margin: 0;
  pointer-events: none;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagination {
  text-align: center;
  font-size: 0.8rem;
  margin-top: 1.5rem;
}
.pagination span {
  margin: 0 0.8rem;
  opacity: 0.7;
}

.personals-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 1.8rem 0;
  align-items: start;
}
@media (max-width: 1000px) {
  .personals-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.personal-ad {
  display: block;
  padding: 0.8rem 0.8rem 0.7rem;
  min-width: 0;
  position: relative;
}
.personal-ad-link {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.personal-ad-link:hover {
  color: var(--ink);
}
.personal-ad--own .personal-ad-link {
  padding-right: 1.4rem;
}
.personal-ad-pitch {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: break-word;
}
.personal-ad-meta {
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--dm-rule, #9c8b6e);
  font-family: "Silkscreen", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.75;
}
.personal-ad-author,
.personal-ad-author:hover {
  color: inherit;
}
.personal-ad-author {
  text-underline-offset: 0.15em;
}
.personal-ad-author:hover,
.personal-ad-author:focus-visible {
  text-decoration-thickness: 2px;
}
.personal-ad-delete-form {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  margin: 0;
}
.personal-ad-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  color: var(--dm-red-text, var(--thread-red));
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.personal-ad-delete:hover {
  background: var(--thread-red);
  border-color: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
}
.personal-ad-delete:active {
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  transform: translate(1px, 1px);
}
.personal-ad-delete-icon {
  width: 10.4px;
  height: 10.4px;
}

/* ---- Personal card styles: a color and a frame together, picked next to the kaomoji
   button (profiles/personal_styles.py). A card without one keeps the classic .patch look.
   Each .personal-style--<key> rule paints both the real card and its small preview in the
   picker (.personal-style-mini, a card drawn at twice the size and scaled down), so the
   preview is always exactly the card. ---- */
.personal-ad-form-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.emoji-picker.personal-style-picker {
  position: static;
}
.emoji-picker-toggle.personal-style-toggle {
  width: auto;
  gap: 0.45rem;
  padding: 0 0.65rem 0 0.45rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.emoji-picker-popup.personal-style-popup {
  top: calc(100% + 0.5rem);
  bottom: auto;
  left: 0;
  width: 19.5rem;
  max-width: calc(100vw - 2.5rem);
  max-height: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
  padding: 0.5rem;
}
.personal-style-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.45rem 0.15rem 0.35rem;
  border: 2px solid transparent;
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 0.74rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.personal-style-option:hover {
  background: var(--nav-strip);
}
.personal-style-option input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.personal-style-option:has(input:checked) {
  border-color: var(--heart-pink);
  background: var(--dm-peach, #fbeae0);
}
.personal-style-option:has(input:focus-visible) {
  outline: 2px dashed var(--thread-teal);
  outline-offset: 1px;
}
.personal-style-option.is-locked {
  cursor: not-allowed;
}
.personal-style-option.is-locked:hover {
  background: none;
}
.personal-style-option.is-locked .personal-style-chip,
.personal-style-option.is-locked .personal-style-name {
  opacity: 0.42;
}
.personal-style-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.5rem;
  line-height: 1;
  color: var(--dm-red-text, var(--thread-red));
  white-space: nowrap;
}
.personal-style-lock-heart {
  width: 8px;
  height: 7px;
  color: var(--heart-pink);
}
.personal-style-note {
  grid-column: 1 / -1;
  margin: 0.25rem 0.2rem 0;
  font-size: 0.74rem;
  opacity: 0.8;
}
.personal-style-chip {
  position: relative;
  display: block;
  flex: none;
  width: 44px;
  height: 30px;
}
.personal-style-toggle .personal-style-chip {
  width: 26px;
  height: 18px;
}
.personal-style-mini {
  position: absolute;
  top: 0;
  left: 0;
  width: 88px;
  height: 60px;
  transform: scale(0.5);
  transform-origin: 0 0;
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
  pointer-events: none;
}
.personal-style-toggle .personal-style-mini {
  transform: scale(0.3);
}

/* free: Rose, stitched */
.personal-style--rose {
  background: #f9dde3;
  border-color: var(--thread-red);
  box-shadow: 3px 3px 0 var(--thread-red);
}
.personal-style--rose::before,
.personal-style--gold::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px dashed rgba(156, 43, 59, 0.55);
  pointer-events: none;
}
/* free: Mint, double line */
.personal-style--mint {
  background: #d6eae7;
  border: 6px double var(--thread-teal);
  box-shadow: 3px 3px 0 var(--thread-teal);
}
/* free: Sky, a postcard with a cream mat inside the frame */
.personal-style--sky {
  background: #d9e8f3;
  border-color: var(--link-blue);
  box-shadow:
    inset 0 0 0 4px var(--card),
    3px 3px 0 var(--link-blue);
}
/* 25 hearts: Peach, with a pixel heart pinned on every corner */
.personal-style--peach {
  background: #fcdcc6;
  border-color: #b65a36;
  box-shadow: 3px 3px 0 #b65a36;
}
.personal-style--peach::before {
  --corner-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Cpath fill='%232E2118' transform='translate(1 1)' d='M1 0h2v1H1zM5 0h2v1H5zM0 1h8v3H0zM1 4h6v1H1zM2 5h4v1H2zM3 6h2v1H3z'/%3E%3Cpath fill='%23D9506B' d='M1 0h2v1H1zM5 0h2v1H5zM0 1h8v3H0zM1 4h6v1H1zM2 5h4v1H2zM3 6h2v1H3z'/%3E%3Cpath fill='%23F4A6B5' d='M1 1h1v1H1z'/%3E%3C/svg%3E");
  content: "";
  position: absolute;
  inset: -9px;
  z-index: 1;
  background:
    var(--corner-heart) left top / 18px 16px no-repeat,
    var(--corner-heart) right top / 18px 16px no-repeat,
    var(--corner-heart) left bottom / 18px 16px no-repeat,
    var(--corner-heart) right bottom / 18px 16px no-repeat;
  pointer-events: none;
}
/* 50 hearts: Lavender, a raised pixel tile with stepped corners */
.personal-style--lavender {
  background: #e9e0f8;
  border: 3px solid #5b3f94;
  box-shadow:
    inset -4px -4px 0 #cdbbee,
    inset 4px 4px 0 #fbf8ff;
  clip-path: polygon(
    0 3px,
    3px 3px,
    3px 0,
    calc(100% - 3px) 0,
    calc(100% - 3px) 3px,
    100% 3px,
    100% calc(100% - 3px),
    calc(100% - 3px) calc(100% - 3px),
    calc(100% - 3px) 100%,
    3px 100%,
    3px calc(100% - 3px),
    0 calc(100% - 3px)
  );
}
/* 100 hearts: Candy, a striped candy-cane frame */
.personal-style--candy {
  background: #ffeff3;
  border: 6px solid var(--heart-pink);
  border-image: repeating-linear-gradient(
      -45deg,
      var(--heart-pink) 0 5px,
      var(--card) 5px 10px
    )
    6;
  box-shadow: 3px 3px 0 var(--thread-red);
}
.personal-style--clipping {
  background:
    linear-gradient(#4a4337, #4a4337) 6px 4px / calc(100% - 12px) 1px no-repeat,
    linear-gradient(#4a4337, #4a4337) 6px 7px / calc(100% - 12px) 1px no-repeat,
    radial-gradient(rgba(74, 62, 40, 0.13) 0.7px, transparent 0.9px) 0 0 / 4px
      4px,
    #efeadb;
  border: 2px dashed #4a4337;
  box-shadow: 3px 3px 0 #b9b19b;
}
.personal-ad.personal-style--clipping .personal-ad-pitch {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 0.84rem;
  line-height: 1.42;
}
.personal-style--sticky {
  background: linear-gradient(180deg, #fff4a8 0%, #fff1a0 70%, #f6e27e 100%);
  border-color: #cdb234;
  box-shadow: 3px 3px 0 #cdb234;
}
.personal-style--sticky::before {
  content: "";
  position: absolute;
  top: -9px;
  left: calc(50% - 23px);
  width: 46px;
  height: 15px;
  background: repeating-linear-gradient(
    135deg,
    rgba(217, 80, 107, 0.68) 0 4px,
    rgba(255, 251, 240, 0.78) 4px 8px
  );
  clip-path: polygon(
    0 0,
    100% 0,
    97% 20%,
    100% 40%,
    97% 60%,
    100% 80%,
    97% 100%,
    0 100%,
    3% 80%,
    0 60%,
    3% 40%,
    0 20%
  );
  transform: rotate(-3deg);
  pointer-events: none;
}
.personal-style--kraft {
  background:
    radial-gradient(rgba(94, 62, 28, 0.2) 0.7px, transparent 0.9px) 0 0 / 5px
      5px,
    linear-gradient(170deg, #dec092, #cfa86e);
  border-color: #6f5230;
  box-shadow: 3px 3px 0 #6f5230;
}
.personal-style--kraft::before {
  content: "";
  position: absolute;
  top: -14px;
  left: calc(50% - 11px);
  width: 22px;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 17' shape-rendering='crispEdges'%3E%3Cpath fill='%238C6B3D' d='M4 0h3v1h-3zM3 1h1v1h-1zM7 1h1v1h-1zM2 2h1v1h-1zM8 2h1v1h-1zM2 3h1v1h-1zM8 3h1v1h-1zM2 4h1v1h-1zM8 4h1v1h-1zM3 5h1v1h-1zM7 5h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM5 7h1v1h-1z'/%3E%3Cpath fill='%236F5230' d='M3 8h5v1h-5zM2 9h1v1h-1zM8 9h1v1h-1zM1 10h1v1h-1zM9 10h1v1h-1zM1 11h1v1h-1zM9 11h1v1h-1zM1 12h1v1h-1zM9 12h1v1h-1zM1 13h1v1h-1zM9 13h1v1h-1zM1 14h1v1h-1zM9 14h1v1h-1zM2 15h1v1h-1zM8 15h1v1h-1zM3 16h5v1h-5z'/%3E%3Cpath fill='%23F4EBDD' d='M3 9h5v1h-5zM2 10h7v1h-7zM2 11h2v1h-2zM7 11h2v1h-2zM2 12h2v1h-2zM7 12h2v1h-2zM2 13h2v1h-2zM7 13h2v1h-2zM2 14h7v1h-7zM3 15h5v1h-5z'/%3E%3Cpath fill='%234A3520' d='M4 11h3v1h-3zM4 12h3v1h-3zM4 13h3v1h-3z'/%3E%3C/svg%3E")
    center / 22px 34px no-repeat;
  pointer-events: none;
}
.personal-style--gingham {
  background:
    linear-gradient(#fffbf0, #fffbf0) padding-box,
    repeating-linear-gradient(
        90deg,
        rgba(201, 58, 87, 0.5) 0 6px,
        transparent 6px 12px
      )
      border-box,
    repeating-linear-gradient(
        0deg,
        rgba(201, 58, 87, 0.5) 0 6px,
        transparent 6px 12px
      )
      border-box,
    #fffbf0;
  border: 7px solid transparent;
  box-shadow:
    0 0 0 2px #9c2b3b,
    5px 5px 0 0 #9c2b3b;
}
.personal-style--sakura {
  isolation: isolate;
  background: linear-gradient(165deg, #fff4f8 0%, #ffdfea 100%);
  border-color: #c45577;
  box-shadow:
    inset 0 0 0 3px #fff9fc,
    inset 0 0 0 4px #f3b3c7,
    3px 3px 0 #c45577;
}
.personal-style--sakura::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 52px;
  height: 44px;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22' shape-rendering='crispEdges'%3E%3Cpath fill='%236B4A3A' d='M15 0h1v1h-1zM23 0h3v1h-3zM16 1h1v1h-1zM21 1h3v1h-3zM15 4h2v1h-2zM15 5h1v1h-1zM9 7h1v1h-1zM7 8h3v1h-3zM7 9h1v1h-1zM9 9h2v1h-2zM10 10h2v1h-2zM1 11h1v1h-1zM11 11h2v1h-2zM12 12h2v1h-2zM13 13h2v1h-2z'/%3E%3Cpath fill='%23F8B4CA' d='M12 0h1v1h-1zM12 1h2v1h-2zM18 1h1v1h-1zM20 1h1v1h-1zM13 2h1v1h-1zM17 2h5v1h-5zM18 3h1v1h-1zM20 3h1v1h-1zM11 4h1v1h-1zM13 4h1v1h-1zM17 4h5v1h-5zM10 5h5v1h-5zM18 5h1v1h-1zM20 5h1v1h-1zM11 6h1v1h-1zM13 6h1v1h-1zM10 7h5v1h-5zM3 8h1v1h-1zM5 8h1v1h-1zM11 8h1v1h-1zM13 8h1v1h-1zM2 9h5v1h-5zM3 10h1v1h-1zM5 10h1v1h-1zM2 11h5v1h-5zM3 12h1v1h-1zM5 12h1v1h-1zM13 14h1v1h-1zM15 14h1v1h-1zM12 15h5v1h-5zM13 16h1v1h-1zM15 16h1v1h-1zM12 17h5v1h-5zM13 18h1v1h-1zM15 18h1v1h-1z'/%3E%3Cpath fill='%23EE86A8' d='M13 0h1v1h-1zM14 1h1v1h-1zM19 1h1v1h-1zM17 3h1v1h-1zM21 3h1v1h-1zM12 4h1v1h-1zM19 5h1v1h-1zM10 6h1v1h-1zM14 6h1v1h-1zM4 8h1v1h-1zM12 8h1v1h-1zM2 10h1v1h-1zM6 10h1v1h-1zM4 12h1v1h-1zM14 14h1v1h-1zM12 16h1v1h-1zM16 16h1v1h-1zM14 18h1v1h-1z'/%3E%3Cpath fill='%23F6D365' d='M19 3h1v1h-1zM12 6h1v1h-1zM4 10h1v1h-1zM14 16h1v1h-1z'/%3E%3C/svg%3E")
    right top / 52px 44px no-repeat;
  pointer-events: none;
}
.personal-style--arcade {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(180deg, #1b1745, #110e2b);
  border-color: #35ebdb;
  box-shadow:
    0 0 0 2px #110e2b,
    0 0 0 4px #ff4fa3,
    0 0 14px 3px rgba(255, 79, 163, 0.4);
}
.personal-ad.personal-style--arcade .personal-ad-link,
.personal-ad.personal-style--arcade .personal-ad-link:hover {
  color: #e9f4ff;
}
.personal-ad.personal-style--arcade .personal-ad-meta {
  border-top-color: rgba(53, 235, 219, 0.4);
  opacity: 0.9;
}
.personal-ad.personal-style--arcade .like-btn,
.personal-ad.personal-style--arcade .like-static {
  color: #9d96e0;
}
.personal-ad.personal-style--arcade .like-btn:hover,
.personal-ad.personal-style--arcade .like-btn:focus-visible,
.personal-ad.personal-style--arcade .like-widget.is-liked .like-btn,
.personal-ad.personal-style--arcade .like-widget.is-liked .like-static,
.personal-ad.personal-style--arcade .like-widget.is-own .like-static {
  color: #ff6fb5;
}
.personal-ad.personal-style--arcade .like-count,
.personal-ad.personal-style--arcade button.like-count {
  color: #e9f4ff;
}
.personal-ad.personal-style--arcade button.like-count:hover,
.personal-ad.personal-style--arcade button.like-count:focus-visible {
  color: #ffe45e;
}
.personal-ad.personal-style--arcade .personal-ad-delete {
  background: #1b1745;
  border-color: #35ebdb;
  color: #ff6fb5;
}
.personal-ad.personal-style--arcade .personal-ad-delete:hover {
  background: #ff4fa3;
  border-color: #ff4fa3;
  color: #110e2b;
}
/* earned at the Plaza's Pond (a complete fish book): Koi Pond, pond water with a lily pad and a koi */
.personal-style--pond {
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 88%, transparent 0 9px, rgba(47, 122, 104, 0.16) 10px 11px, transparent 12px 19px, rgba(47, 122, 104, 0.1) 20px 21px, transparent 22px),
    linear-gradient(170deg, #eaf8f3 0%, #cdece3 100%);
  border-color: #2f7a68;
  box-shadow:
    inset 0 0 0 3px #f6fdfa,
    inset 0 0 0 4px #a9dccf,
    3px 3px 0 #2f7a68;
}
.personal-style--pond::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 52px;
  height: 50px;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 25' shape-rendering='crispEdges'%3E%3Cpath fill='%233F8F5F' d='M15 1h4v1h-4zM13 2h2v1h-2zM19 2h2v1h-2zM12 3h1v1h-1zM21 3h1v1h-1zM11 4h1v1h-1zM22 4h1v1h-1zM11 5h1v1h-1zM22 5h1v1h-1zM10 6h1v1h-1zM23 6h1v1h-1zM10 7h1v1h-1zM23 7h1v1h-1zM10 8h1v1h-1zM23 8h1v1h-1zM11 9h1v1h-1zM22 9h1v1h-1zM11 10h2v1h-2zM21 10h2v1h-2zM13 11h2v1h-2zM19 11h2v1h-2zM15 12h1v1h-1zM18 12h1v1h-1z'/%3E%3Cpath fill='%2379C58A' d='M15 2h4v1h-4zM13 3h3v1h-3zM18 3h3v1h-3zM12 4h3v1h-3zM19 4h3v1h-3zM12 5h2v1h-2zM20 5h2v1h-2zM11 6h3v1h-3zM20 6h3v1h-3zM11 7h2v1h-2zM14 7h1v1h-1zM19 7h1v1h-1zM21 7h2v1h-2zM11 8h3v1h-3zM15 8h4v1h-4zM20 8h3v1h-3zM12 9h3v1h-3zM16 9h2v1h-2zM19 9h3v1h-3zM13 10h3v1h-3zM18 10h3v1h-3zM15 11h1v1h-1zM18 11h1v1h-1z'/%3E%3Cpath fill='%2354A56E' d='M13 7h1v1h-1zM20 7h1v1h-1zM14 8h1v1h-1zM19 8h1v1h-1zM15 9h1v1h-1zM18 9h1v1h-1zM16 10h2v1h-2z'/%3E%3Cpath fill='%23EE86A8' d='M16 4h2v1h-2zM15 5h1v1h-1zM18 5h1v1h-1zM15 6h1v1h-1zM18 6h1v1h-1zM16 7h2v1h-2z'/%3E%3Cpath fill='%23F8C4D4' d='M16 3h2v1h-2zM15 4h1v1h-1zM18 4h1v1h-1zM14 5h1v1h-1zM19 5h1v1h-1zM14 6h1v1h-1zM19 6h1v1h-1zM15 7h1v1h-1zM18 7h1v1h-1z'/%3E%3Cpath fill='%23F6D365' d='M16 5h2v1h-2zM16 6h2v1h-2z'/%3E%3Cpath fill='%23E8743B' d='M8 15h4v1h-4zM8 16h2v1h-2zM7 17h2v1h-2zM12 17h4v1h-4zM6 18h1v1h-1zM10 18h3v1h-3zM9 19h2v1h-2zM10 23h2v1h-2z'/%3E%3Cpath fill='%23FFF6EE' d='M10 16h2v1h-2zM9 17h3v1h-3zM7 18h3v1h-3zM13 18h5v1h-5zM6 19h3v1h-3zM11 19h7v1h-7zM19 19h1v1h-1zM6 20h14v1h-14zM7 21h11v1h-11zM9 22h5v1h-5z'/%3E%3Cpath fill='%237A3A1E' d='M8 14h4v1h-4zM7 15h1v1h-1zM12 15h1v1h-1zM2 16h2v1h-2zM6 16h2v1h-2zM12 16h4v1h-4zM2 17h1v1h-1zM4 17h1v1h-1zM6 17h1v1h-1zM16 17h2v1h-2zM2 18h1v1h-1zM5 18h1v1h-1zM18 18h2v1h-2zM2 19h1v1h-1zM5 19h1v1h-1zM20 19h1v1h-1zM2 20h1v1h-1zM5 20h1v1h-1zM20 20h1v1h-1zM2 21h1v1h-1zM4 21h1v1h-1zM6 21h1v1h-1zM18 21h2v1h-2zM2 22h2v1h-2zM6 22h3v1h-3zM14 22h4v1h-4zM9 23h1v1h-1zM12 23h1v1h-1zM10 24h2v1h-2z'/%3E%3Cpath fill='%23D9502A' d='M3 17h1v1h-1zM3 18h2v1h-2zM3 19h2v1h-2zM3 20h2v1h-2zM3 21h1v1h-1z'/%3E%3Cpath fill='%238FCFC0' d='M22 14h2v1h-2zM22 15h2v1h-2zM21 17h1v1h-1z'/%3E%3Cpath fill='%232B1A12' d='M18 19h1v1h-1z'/%3E%3C/svg%3E")
    right top / 52px 50px no-repeat;
  pointer-events: none;
}
/* supporters: Gold, with a stitched gold trim and a slow shine */
.personal-style--gold {
  background:
    linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.7) 50%,
        transparent 60%
      )
      0 0 / 300% 100% no-repeat,
    linear-gradient(160deg, #fff7dd, #f1d98f);
  border-color: #9a7424;
  box-shadow: 3px 3px 0 #9a7424;
  animation: personal-gold-shine 7s ease-in-out infinite;
}
.personal-style--gold::before {
  border-color: rgba(169, 127, 38, 0.75);
}
@keyframes personal-gold-shine {
  0%,
  60% {
    background-position:
      100% 0,
      0 0;
  }
  100% {
    background-position:
      0 0,
      0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .personal-style--gold {
    animation: none;
  }
}
/* the thicker frames take their extra width out of the padding, so the text sits where it always did */
.personal-ad.personal-style--mint,
.personal-ad.personal-style--candy {
  padding: calc(0.8rem - 4px) calc(0.8rem - 4px) calc(0.7rem - 4px);
}
.personal-ad.personal-style--lavender {
  padding: calc(0.8rem - 1px) calc(0.8rem - 1px) calc(0.7rem - 1px);
}
.personal-ad.personal-style--gingham {
  padding: calc(0.8rem - 5px) calc(0.8rem - 5px) calc(0.7rem - 5px);
}
.personal-ad.personal-style--clipping {
  padding-top: calc(0.8rem + 3px);
}
.personal-ad.personal-style--kraft {
  padding-top: calc(0.8rem + 10px);
}

.profiring-card {
  display: block;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
}
.profiring-card:hover {
  color: var(--ink);
}
.profiring-card-cover {
  width: 100%;
  height: 90px;
  object-fit: cover;
  object-position: center;
  border: 2px solid var(--dm-line, var(--ink));
  margin-bottom: 0.6rem;
  display: block;
}
.profiring-card-name {
  margin: 0 0 0.4rem;
  font-weight: bold;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.profiring-card-meta {
  margin: 0;
  font-size: 0.76rem;
  opacity: 0.75;
}

/* The ring's banner on its own page: all of it, in its own proportions (it used to be cut to 220px high, which
   zoomed a wide banner in and cut its top and bottom off). A very tall picture is shown whole as well, smaller and
   in the middle, so it never pushes the ring itself far down the page. */
.profiring-cover-image {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  object-position: center;
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
  margin-bottom: 1.6rem;
  display: block;
}

.profiring-detail-name {
  margin: 0 0 0.4rem;
  overflow-wrap: anywhere;
}
.profiring-detail-meta {
  font-size: 0.82rem;
  opacity: 0.8;
  margin: 0 0 1rem;
}
.profiring-actions {
  display: inline-flex;
  gap: 1rem;
}

/* ProfiRing badges: the 16 x 16 pixel picture a ring's owner draws (profiles/badges.py). The PNG comes at exactly
   the size it is shown, pixel for pixel; pixelated keeps it crisp where the screen scales the page up too. */
.ring-badge {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  image-rendering: pixelated;
}
.profiring-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.profiring-card-text {
  flex: 1 1 auto;
  min-width: 0;
}
.profiring-card-badge {
  width: 48px;
  height: 48px;
}
.profiring-detail-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
}
.profiring-detail-head .profiring-detail-meta {
  margin-bottom: 0;
}
.profiring-detail-title {
  flex: 1 1 auto;
  min-width: 0;
}
.profiring-detail-badge {
  box-sizing: content-box;
  width: 64px;
  height: 64px;
  padding: 5px;
  background: var(--paper);
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
}
.profiring-badge-hint {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  opacity: 0.85;
}
.profiring-badge {
  width: 32px;
  height: 32px;
  margin-right: 0.55rem;
}
.profiring-club-badge {
  width: 16px;
  height: 16px;
  margin: -3px 0.45rem 0 0;
}
.profiring-report-badge {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 0.6rem;
}

/* A ring's description, with the same marks as a Heartbeat (heartbeats/text.py) */
.profiring-description {
  --ring-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1H1zM5 0h2v1H5zM0 1h8v3H0zM1 4h6v1H1zM2 5h4v1H2zM3 6h2v1H3z'/%3E%3C/svg%3E");
  margin: 0 0 1.1rem;
  overflow-wrap: break-word;
}
.profiring-description > :first-child {
  margin-top: 0;
}
.profiring-description > :last-child {
  margin-bottom: 0;
}
.profiring-description p {
  margin: 0 0 0.8rem;
}
.profiring-description a {
  color: var(--link-blue);
}
.profiring-description h2,
.profiring-description h3 {
  margin: 1.2rem 0 0.45rem;
  line-height: 1.25;
  color: var(--dm-red-text, var(--thread-red));
}
.profiring-description h2 {
  font-size: 1.2rem;
}
.profiring-description h3 {
  font-size: 1.02rem;
}
.profiring-description ul,
.profiring-description ol {
  margin: 0 0 0.8rem;
  padding-left: 1.4rem;
}
.profiring-description li {
  margin: 0.15rem 0;
}
.profiring-description ul {
  list-style: none;
}
.profiring-description ul li {
  position: relative;
}
.profiring-description ul li::before {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: 0.55em;
  width: 9px;
  height: 8px;
  background: var(--heart-pink);
  -webkit-mask: var(--ring-heart) center / contain no-repeat;
  mask: var(--ring-heart) center / contain no-repeat;
}
.profiring-description blockquote {
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.9rem;
  background: var(--dm-soft, rgba(46, 33, 24, 0.05));
  border-left: 4px solid var(--heart-pink);
  font-style: italic;
}
.profiring-description blockquote p:last-child {
  margin-bottom: 0;
}
.profiring-description hr {
  width: 50%;
  margin: 1.2rem auto;
}
.profiring-description code {
  padding: 0.05rem 0.3rem;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.86em;
  background: var(--nav-strip);
  border: 1px solid var(--dm-line, var(--ink));
}
.profiring-description s {
  opacity: 0.7;
}

/* "Put this badge on your own site": the code to copy, for the size picked */
.profiring-share {
  margin: 1.1rem 0 0;
  padding-top: 0.8rem;
  border-top: 2px dashed var(--thread-teal);
}
.profiring-share-summary {
  font-family: "Silkscreen", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dm-teal-text, var(--thread-teal));
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.profiring-share-summary:hover {
  color: var(--dm-red-text, var(--thread-red));
}
.profiring-share-summary-badge {
  width: 16px;
  height: 16px;
  margin: -2px 0.4rem 0 0.15rem;
}
.profiring-share-body {
  margin-top: 0.8rem;
}
.profiring-share-hint {
  margin: 0 0 0.8rem;
  font-size: 0.82rem;
}
.profiring-share-pick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0 0 0.9rem;
}
.profiring-share-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  flex: none;
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 8px 8px;
  border: 2px dashed var(--dm-rule, #9c8b6e);
}
.profiring-share-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.profiring-share-sizes[hidden] {
  display: none;
}
.profiring-share-size {
  padding: 0.3rem 0.6rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.6rem;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.profiring-share-size:hover {
  background: var(--nav-strip);
}
.profiring-share-size[aria-pressed="true"] {
  color: var(--dm-on-accent, var(--card));
  background: var(--thread-teal);
  box-shadow: none;
  transform: translate(2px, 2px);
}
.profiring-share-code {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.76rem;
  resize: vertical;
}
.profiring-share-actions {
  margin: 0.45rem 0 0.9rem;
}
.profiring-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}
.profiring-share-url {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 100%;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.78rem;
}
.profiring-share-copy {
  flex: none;
}

/* The ring's club room in the Plaza: the way in, the decorations earned so far, and the owner's pick of room style */
.profiring-club-intro {
  margin: 0 0 0.8rem;
}
.profiring-club-tiers {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
}
.profiring-club-tier-list {
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
}
.profiring-club-tier {
  margin: 0.15rem 0;
  opacity: 0.65;
}
.profiring-club-tier.is-reached {
  opacity: 1;
  color: var(--dm-teal-text, var(--thread-teal));
}
.profiring-club-form {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 2px dashed var(--thread-teal);
}
.profiring-club-style-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem;
  padding: 3px;
}
.profiring-club-style {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
  border: 2px solid var(--dm-line, var(--ink));
  background: var(--card);
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.profiring-club-style:hover {
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
}
.profiring-club-style:has(input:checked) {
  outline: 3px solid var(--heart-pink);
  outline-offset: 1px;
}
.profiring-club-style:has(input:focus-visible) {
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--thread-teal);
}
.profiring-club-style input {
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--thread-red);
}
.profiring-club-style-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.profiring-club-style-name {
  font-weight: bold;
  font-size: 0.88rem;
}
.profiring-club-style-hint {
  font-size: 0.72rem;
  opacity: 0.8;
}

/* A ring's gathering (ProfiRingGathering): a note pinned near the top of the ring's page with the way to the Plaza,
   and the owner's small form for it under the Edit ProfiRing button */
.profiring-gathering {
  margin: 0 0 1.1rem;
  padding: 0.7rem 0.85rem 0.8rem;
  background: var(--card);
  border: 2px dashed var(--heart-pink);
  box-shadow: 3px 3px 0 var(--heart-pink);
}
.profiring-gathering-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  margin: 0 0 0.35rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dm-red-text, var(--thread-red));
}
.profiring-gathering-heart {
  width: 12px;
  height: 10.5px;
  flex-shrink: 0;
}
.profiring-gathering-day {
  color: var(--dm-teal-text, var(--thread-teal));
}
.profiring-gathering-text {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  overflow-wrap: anywhere;
}
.profiring-gathering-go {
  margin: 0.65rem 0 0;
}
.profiring-gathering-btn {
  padding: 0.45rem 0.85rem;
}
.profiring-gathering-summary-heart {
  width: 12px;
  height: 10.5px;
  margin: -2px 0.4rem 0 0.15rem;
  vertical-align: middle;
}
.profiring-gathering-day-field input[type="date"] {
  width: auto;
  max-width: 100%;
}
.profiring-gathering-remove {
  margin: 0;
}
/* A gathering's time: the owner's own clock is in the page; static/js/gathering-time.js adds the visitor's */
.gathering-yours {
  white-space: nowrap;
  opacity: 0.85;
}
.profiring-gathering-time-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.profiring-gathering-time-row input[type="time"],
.profiring-gathering-time-row select {
  width: auto;
  max-width: 100%;
}
/* The rings with join requests waiting, at the top of the ProfiRings page for the people who run them */
.profiring-join-requests-btn {
  flex: none;
  padding: 0.35rem 0.75rem;
}

/* ProfiRing group chats: what a member hears about them (messaging/ring_notices.py). The number of rings with new
   messages sits next to the join requests on the ProfiRings menu item, teal and with a speech bubble's tail. */
.unread-badge.unread-badge--chat {
  position: relative;
  background: var(--thread-teal);
}
.unread-badge--chat::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: -4px;
  border-style: solid;
  border-width: 4px 4px 0 0;
  border-color: var(--thread-teal) transparent transparent transparent;
}
.ring-chat-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 0.8rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 2px dashed var(--dm-rule, #9c8b6e);
  font-size: 0.78rem;
}
.ring-chat-bar-note {
  flex: 1 1 16rem;
  margin: 0;
}
.ring-chat-bar-tip {
  display: block;
  margin-top: 0.15rem;
  opacity: 0.75;
}
.ring-chat-mute-form {
  flex: none;
  margin: 0;
}
.ring-chat-new {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.3rem 0 0.9rem;
  list-style: none;
  font-family: "Silkscreen", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dm-red-text, var(--thread-red));
}
.ring-chat-new::before,
.ring-chat-new::after {
  content: "";
  flex: 1;
  border-top: 2px dashed currentColor;
  opacity: 0.6;
}
.ring-mention {
  font-weight: bold;
  color: var(--dm-teal-text, var(--thread-teal));
}
.ring-mention--you {
  padding: 0 0.15rem;
  color: var(--dm-on-accent, var(--card));
  background: var(--dm-pink-solid, var(--heart-pink));
}
.toast--mention .toast-title,
.toast--chat .toast-title {
  color: var(--dm-teal-text, var(--thread-teal));
}
.profiring-chat-news-note {
  margin: 0.6rem 0 0;
}

.profiring-widgets {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.6rem;
}
.profiring-widget {
  display: flex;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
  font-family: "Silkscreen", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}
.profiring-arrow {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.8rem;
  color: var(--dm-on-accent, var(--card));
  background: var(--thread-red);
  text-decoration: none;
  flex-shrink: 0;
}
.profiring-arrow:hover {
  background: #82202c;
}
.profiring-name {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.6rem;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.profiring-name:hover {
  text-decoration: underline;
}

.profibutton-mine .patch-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.profibutton-hint {
  margin: 0;
  font-size: 0.82rem;
}
.profibutton-share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  width: 100%;
}
.profibutton-share-url {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 100%;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.78rem;
}
.profibutton-copy {
  flex: none;
}
.profibuttons .patch-body {
  overflow: hidden;
}
.profibutton-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 3px;
  max-height: 16rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.profibutton-list li {
  flex: none;
  margin: 0;
  padding: 0;
}
.profibutton {
  display: block;
  line-height: 0;
  text-decoration: none;
}
.profibutton:hover .profibutton-img,
.profibutton:focus-visible .profibutton-img {
  outline: 2px solid var(--thread-red);
  outline-offset: 1px;
}
.profibutton-img {
  display: block;
  width: 88px;
  height: 31px;
  max-width: none;
  border: 0;
  image-rendering: pixelated;
}

.patch-body--flush {
  padding: 0;
}
.messenger-layout {
  display: flex;
  height: 62vh;
  min-height: 400px;
  max-height: 560px;
}

.messenger-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 2px solid var(--dm-line, var(--ink));
  overflow-y: auto;
}
.conversation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.conversation-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-top: 1px dashed var(--dm-rule, #9c8b6e);
  text-decoration: none;
  color: var(--ink);
}
.conversation-row:first-child {
  border-top: none;
}
.conversation-row:hover {
  color: var(--ink);
  background: var(--nav-strip);
}
.conversation-row.active {
  background: var(--nav-strip);
  border-left: 3px solid var(--thread-red);
  padding-left: calc(0.7rem - 3px);
}
.conversation-avatar {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border: 2px solid var(--dm-line, var(--ink));
  flex-shrink: 0;
}
.conversation-avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nav-strip);
}
.conversation-avatar--empty .pixel-heart {
  width: 15px;
  height: 13px;
  color: var(--heart-pink);
}
.conversation-info {
  flex: 1;
  min-width: 0;
}
.conversation-name {
  font-weight: bold;
  font-size: 0.84rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversation-snippet {
  font-size: 0.76rem;
  opacity: 0.8;
  margin: 0.1rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unread-badge {
  display: inline-block;
  background: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
  font-family: "Silkscreen", monospace;
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  margin-left: 0.3rem;
  flex-shrink: 0;
}

.messenger-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.conversation-pane-header {
  padding: 0.7rem 1rem;
  border-bottom: 2px solid var(--dm-line, var(--ink));
  background: var(--nav-strip);
  font-family: "Silkscreen", monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  flex-shrink: 0;
}
.conversation-pane-header a {
  color: var(--link-blue);
  text-decoration: underline;
}
.conversation-pane-header a:hover {
  color: var(--dm-red-text, var(--thread-red));
}
.conversation-pane-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  font-style: italic;
  padding: 2rem;
  text-align: center;
}

.message-thread {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  list-style: none;
  margin: 0;
  min-height: 0;
}
.message-bubble {
  border: 2px solid var(--dm-line, var(--ink));
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.6rem;
  max-width: 80%;
}
.message-bubble.mine {
  margin-left: auto;
  background: var(--dm-peach, #fbeae0);
}
.message-bubble.theirs {
  margin-right: auto;
  background: var(--nav-strip);
}
.message-meta {
  font-size: 0.68rem;
  opacity: 0.7;
  margin: 0.25rem 0 0;
}
.message-seen {
  font-size: 0.68rem;
  opacity: 0.7;
  margin: 0.15rem 0 0;
}
.message-sender {
  font-size: 0.68rem;
  font-weight: bold;
  margin: 0 0 0.25rem;
}
.message-sender a {
  color: inherit;
  text-decoration: underline;
}

.message-form-wrap {
  border-top: 2px solid var(--dm-line, var(--ink));
  padding: 0.7rem 0.9rem;
  flex-shrink: 0;
}
.profiring-chat {
  display: flex;
  flex-direction: column;
  height: 800px;
}
.profiring-chat .message-thread {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
.profiring-chat .message-bubble {
  max-width: 90%;
}
.profiring-chat .message-body {
  margin: 10px 0;
}
.ring-message {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.ring-message-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.profiring-chat .message-bubble.mine .ring-message {
  flex-direction: row-reverse;
}
.conversation-blocked-notice {
  margin: 0;
  opacity: 0.75;
  font-style: italic;
  font-size: 0.85rem;
}
.message-form textarea {
  width: 100%;
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 0.88rem;
  padding: 0.5rem 0.6rem;
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  background: var(--dm-field, #fff);
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.message-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.emoji-picker {
  position: relative;
}
.emoji-picker-toggle {
  width: 2.3rem;
  height: 2.3rem;
  font-size: 1.15rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.emoji-picker-toggle:hover {
  background: var(--nav-strip);
}
.emoji-picker-toggle[aria-expanded="true"] {
  background: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
  border-color: var(--thread-red);
}
.emoji-picker-popup {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  width: 244px;
  max-height: 190px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.1rem;
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
  padding: 0.4rem;
}
.emoji-picker-popup[hidden] {
  display: none;
}
.emoji-option {
  background: none;
  border: none;
  border-radius: 0;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.3rem 0;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.emoji-option:hover,
.emoji-option:focus-visible {
  background: var(--nav-strip);
}

.kaomoji-picker-popup {
  grid-template-columns: 1fr;
  width: 210px;
  top: calc(100% + 0.5rem);
  bottom: auto;
}
.kaomoji-picker-popup .emoji-option {
  font-size: 0.85rem;
  text-align: left;
  padding: 0.35rem 0.4rem;
}

@media (max-width: 700px) {
  .messenger-layout {
    flex-direction: column;
    height: auto;
    max-height: none;
  }
  .messenger-sidebar {
    width: 100%;
    max-height: 220px;
    border-right: none;
    border-bottom: 2px solid var(--dm-line, var(--ink));
  }
  .messenger-pane {
    flex: none;
    height: 60vh;
    min-height: 360px;
  }
  .personals-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .patch {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
  .profiring-member-list {
    max-height: 260px;
  }
}
.interest-tag {
  display: inline-block;
  background: var(--nav-strip);
  border: 1px solid var(--thread-teal);
  color: var(--dm-teal-text, var(--thread-teal));
  font-family: "Silkscreen", monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.32rem 0.6rem;
  margin: 0 0.4rem 0.4rem 0;

  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.centered-subtitle {
  text-align: center;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--dm-teal-text, var(--thread-teal));
}

.role-badge {
  display: inline-flex;
  align-items: center;
  font-family: "Silkscreen", monospace;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.14rem 0.35rem;
  margin-left: 0.3rem;
  border: 1px solid var(--dm-line, var(--ink));
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  white-space: nowrap;
  flex-shrink: 0;
  vertical-align: middle;
}
.role-badge--moderator {
  background: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
}
.role-badge--supporter {
  background: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
}
.role-badge-heart {
  width: 8px;
  height: 7px;
  color: var(--dm-on-accent, var(--card));
}
.role-badge + .role-badge {
  margin-left: 0.3rem;
}

.browse-card-name-row,
.conversation-name-row {
  display: flex;
  align-items: baseline;
  min-width: 0;
  margin: 0 0 0.2rem;
}
.browse-card-name-row .browse-card-name,
.conversation-name-row .conversation-name {
  min-width: 0;
  margin: 0;
}

.profile-page-wrap {
  position: relative;
}
/* A member's Custom CSS only ever matches inside .profile-canvas (profiles/css_sanitizer.py), but it can still place
   things anywhere on the screen: position: fixed and a big z-index could lay a box over the whole page. `isolation`
   keeps everything the profile draws in one layer, and the parts of the page that belong to the site are lifted
   above that layer (the hearts and role badge corners already sit higher), so a profile can never cover, hide or
   imitate the header, the messages, Report and Block, or the footer. The fellow box that Add Fellow opens
   (friends/_fellow_dialog.html) sits outside the canvas too, and opens in the top layer, above all of it. */
.profile-canvas {
  isolation: isolate;
}
.member-profile-page > header,
.member-profile-page .messages,
.profile-safety-footer,
.member-profile-page > .site-footer {
  position: relative;
  z-index: 1;
}
.profile-badge-corner {
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}
.profile-badge-corner .role-badge {
  margin-left: 0;
}

.interest-tag:hover {
  background: var(--thread-teal);
  color: var(--dm-on-accent, var(--card));
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
}
.tag-cloud-tag {
  color: var(--dm-red-text, var(--thread-red));
  text-decoration: none;
  line-height: 1.4;
}
.tag-cloud-tag:hover {
  text-decoration: underline;
}

.location-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
}
.location-suggestions[hidden] {
  display: none;
}
.location-suggestions li {
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
  border-top: 1px dashed var(--dm-rule, #9c8b6e);
}
.location-suggestions li:first-child {
  border-top: none;
}
.location-suggestions li:hover,
.location-suggestions li.is-active {
  background: var(--nav-strip);
}

#toast-area {
  position: fixed;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 1100;
  max-width: 280px;
}
.toast {
  display: block;
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
  padding: 0.65rem 0.8rem;
  text-decoration: none;
  color: var(--ink);
  animation: toast-lifecycle 10s ease forwards;
}
.toast:hover {
  color: var(--ink);
}

.toast:hover,
.toast:focus {
  animation-play-state: paused;
}
.toast-title {
  display: block;
  font-family: "Silkscreen", monospace;
  font-size: 0.6rem;
  color: var(--dm-red-text, var(--thread-red));
  margin-bottom: 0.3rem;
}
.toast-body {
  display: block;
  font-size: 0.8rem;
}

@keyframes toast-lifecycle {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  5% {
    opacity: 1;
    transform: translateY(0);
  }
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--thread-red);
  flex-shrink: 0;
}

.lightbox-trigger {
  cursor: zoom-in;
}
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(46, 33, 24, 0.88);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: zoom-out;
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border: 4px solid var(--dm-on-accent, var(--card));
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  background: var(--card);
  cursor:
    url("../img/cursor-default.3873a6b0204d.png") 1 0,
    auto;
}
.lightbox-close {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  font-family: "Silkscreen", monospace;
  font-size: 1.1rem;
  color: var(--dm-on-accent, var(--card));
  background: var(--thread-red);
  border: 2px solid var(--dm-on-accent, var(--card));
  width: 2.1rem;
  height: 2.1rem;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
  line-height: 1;
}

@media (max-width: 480px) {
  body {
    font-size: 14.5px;
  }
  .brand-bar-inner {
    justify-content: center;
  }
  .site-nav {
    justify-content: center;
  }
  .form-panel {
    padding: 1.2rem 1.1rem 1.4rem;
  }
  #toast-area {
    left: 0.6rem;
    right: 0.6rem;
    top: 0.6rem;
    max-width: none;
  }

  .css-reference-table {
    min-width: 420px;
  }

  .browse-form-row {
    gap: 1rem;
  }
  .photo-grid {
    gap: 0.8rem;
  }
  .toggle-row {
    gap: 0.7rem;
  }

  .profile-facts {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .profile-fact {
    border-left: none;
    padding-left: 0;
    border-top: 1px dashed var(--dm-rule, #9c8b6e);
    padding-top: 0.6rem;
  }
  .profile-fact:first-child {
    border-top: none;
    padding-top: 0;
  }

  .brand-tagline {
    display: none;
  }

  .patch {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .personals-list {
    grid-template-columns: 1fr;
  }
}

.message-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  margin-top: 0.25rem;
}
.message-footer .message-meta {
  margin: 0;
}

/* The heart and its number are about a third larger than they first were
   (number .58rem, button 1.2rem x 1.1rem).
   The heart is drawn on an 8 x 7 grid of squares at exactly 2px per square (16px x 14px), centred in a
   transparent 20px x 20px box (the 10 x 10 viewBox in hearts/_like_widget.html). Both numbers matter.
   The browser rounds an SVG's box to whole screen pixels, so a box of 14.6px x 12.8px (what this used to
   be) was rounded differently depending on where its card happened to sit, and the hearts on one page
   came out as several different, lopsided shapes. A 20px box stays a whole number of screen pixels at
   every usual zoom level and screen density (100% to 300%), and 2px per square gives every square the
   same size in whole pixels at 100%, 150%, 200% and 300%. If the icon is ever resized, keep the box a
   multiple of 20px and the heart a whole number of pixels per square. */
.like-widget {
  display: inline-flex;
  align-items: center;
  gap: 0.33rem;
  flex-shrink: 0;
}
.like-form {
  display: inline-flex;
  margin: 0;
}
.like-btn,
.like-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.46rem;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: var(--dm-muted, #7a6a4f);
}
.like-btn {
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.like-icon {
  width: 20px;
  height: 20px;
  color: inherit;
}
.like-btn .like-icon--on {
  display: none;
}
.like-btn:hover,
.like-btn:focus-visible {
  color: var(--heart-pink);
}
.like-btn:focus-visible {
  outline: 2px solid var(--thread-teal);
  outline-offset: 1px;
}
.like-btn:hover .like-icon--on {
  display: block;
}
.like-btn:hover .like-icon--off {
  display: none;
}
.like-widget.is-liked .like-btn,
.like-widget.is-liked .like-static,
.like-widget.is-own .like-static {
  color: var(--heart-pink);
}
.like-widget.is-liked .like-btn .like-icon--on {
  display: block;
}
.like-widget.is-liked .like-btn .like-icon--off {
  display: none;
}
.like-widget.is-liked .like-btn:hover {
  opacity: 0.7;
}
.like-count {
  min-width: 0.93rem;
  margin: 0;
  padding: 0.2rem 0.13rem;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: "Silkscreen", monospace;
  font-size: 0.77rem;
  line-height: 1;
  text-align: left;
  opacity: 0.8;
}
/* the number that opens "who gave a heart" looks like every other count (no dotted underline): the pointer and
   the color it turns on hover are what show it can be clicked */
button.like-count {
  text-decoration: none;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
button.like-count:hover,
button.like-count:focus-visible {
  color: var(--dm-red-text, var(--thread-red));
  opacity: 1;
}
button.like-count:focus-visible {
  outline: 2px solid var(--thread-teal);
  outline-offset: 1px;
}
.like-count--zero {
  opacity: 0.45;
}

.personal-ad-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.45rem;
}

.profile-hearts-corner {
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  z-index: 5;
}
.profile-hearts {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.5rem;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
  font-family: "Silkscreen", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.profile-hearts-icon {
  width: 11px;
  height: 9.6px;
  color: var(--heart-pink);
}
.profile-hearts-count {
  font-size: 0.75rem;
  font-weight: 700;
}
.profile-hearts-label {
  opacity: 0.75;
}

.likers-dialog {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(46, 33, 24, 0.6);
}
.likers-dialog[hidden] {
  display: none;
}
.likers-panel {
  display: flex;
  flex-direction: column;
  width: min(22rem, 100%);
  max-height: min(28rem, 80vh);
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 4px 4px 0 var(--dm-shadow, var(--ink));
  cursor:
    url("../img/cursor-default.3873a6b0204d.png") 1 0,
    auto;
}
.likers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.45rem 0.75rem;
  background: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
  border-bottom: 2px dashed var(--dm-on-accent, var(--card));
}
.likers-title {
  margin: 0;
  font-family: "Silkscreen", monospace;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}
.likers-close {
  margin: 0;
  padding: 0 0.25rem;
  background: transparent;
  border: 0;
  color: var(--dm-on-accent, var(--card));
  font-size: 1.3rem;
  line-height: 1;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.likers-close:focus-visible {
  outline: 2px solid var(--dm-on-accent, var(--card));
  outline-offset: 1px;
}
.likers-body {
  overflow-y: auto;
  padding: 0.3rem 0.75rem 0.6rem;
}
.likers-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.likers-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--dm-rule, #9c8b6e);
  font-size: 0.85rem;
}
.likers-row a {
  min-width: 0;
  overflow-wrap: anywhere;
}
.likers-more {
  padding: 0.55rem 0 0.1rem;
  text-align: center;
  list-style: none;
}
.likers-empty,
.likers-loading {
  margin: 0.7rem 0;
  font-size: 0.8rem;
  text-align: center;
  opacity: 0.8;
}

.supporter-hero p {
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}
.supporter-hero-jump {
  margin-top: 1.1rem;
}

.supporter-ribbon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
  padding: 0.55rem 1.2rem;
  background: #f6e8c3;
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
  font-family: "Silkscreen", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.supporter-ribbon::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed var(--gold);
  pointer-events: none;
}
.supporter-ribbon .pixel-heart {
  width: 16px;
  height: 14px;
  flex-shrink: 0;
}

.quilt {
  --pixel-heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1H1zM5 0h2v1H5zM0 1h8v3H0zM1 4h6v1H1zM2 5h4v1H2zM3 6h2v1H3z'/%3E%3C/svg%3E");
  margin: 1.4rem 0 2.6rem;
}
.quilt-frame {
  position: relative;
  padding: 2rem 1.4rem 1.8rem;
  background-color: var(--card);
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 4px 4px 0 var(--dm-shadow, var(--ink));
}
.quilt-frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px dashed var(--thread-red);
  pointer-events: none;
}
.quilt-head {
  position: relative;
  margin-bottom: 1.6rem;
  text-align: center;
}
.quilt-title {
  margin: 0 0 0.5rem;
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: clamp(1.45rem, 4.6vw, 1.95rem);
  color: var(--dm-red-text, var(--thread-red));
}
.quilt-title::before,
.quilt-title::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 14px;
  margin: 0 0.6rem;
  vertical-align: -1px;
  background: var(--heart-pink);
  -webkit-mask: var(--pixel-heart-mask) center / contain no-repeat;
  mask: var(--pixel-heart-mask) center / contain no-repeat;
}
.quilt-thanks {
  max-width: 30em;
  margin: 0 auto;
  font-size: 1.05rem;
}
.quilt-count {
  margin: 0.8rem 0 0;
  font-family: "Silkscreen", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dm-teal-text, var(--thread-teal));
}
.quilt-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.quilt-patch {
  flex: 1 1 8.2rem;
  min-width: 7.5rem;
  max-width: 10.5rem;
  animation: quilt-in 0.55s ease-out both;
  animation-delay: calc(min(var(--i, 0), 24) * 45ms);
}
.quilt-patch:nth-child(5n + 1) {
  --fabric: #f9dde3;
  --stitch: var(--thread-red);
}
.quilt-patch:nth-child(5n + 2) {
  --fabric: #d6eae7;
  --stitch: var(--thread-teal);
}
.quilt-patch:nth-child(5n + 3) {
  --fabric: #f6e8c3;
  --stitch: #a97f26;
}
.quilt-patch:nth-child(5n + 4) {
  --fabric: #d9e8f3;
  --stitch: var(--link-blue);
}
.quilt-patch:nth-child(5n + 5) {
  --fabric: #f1e2d0;
  --stitch: #8a6f4e;
}
.quilt-patch:nth-child(3n + 1) {
  --tilt: -0.8deg;
}
.quilt-patch:nth-child(3n + 2) {
  --tilt: 0.6deg;
}
.quilt-patch-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  height: 100%;
  min-height: 4.9rem;
  padding: 0.85rem 0.9rem;
  background: var(--fabric, #f9dde3);
  color: var(--ink);
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
  text-align: center;
  text-decoration: none;
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.quilt-patch-link::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px dashed var(--stitch, var(--thread-red));
  pointer-events: none;
}
.quilt-patch-link::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 8px;
  width: 9px;
  height: 8px;
  background: var(--stitch, var(--thread-red));
  -webkit-mask: var(--pixel-heart-mask) center / contain no-repeat;
  mask: var(--pixel-heart-mask) center / contain no-repeat;
  pointer-events: none;
}
.quilt-patch-link:hover,
.quilt-patch-link:focus-visible {
  color: var(--ink);
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 5px 5px 0 var(--dm-shadow, var(--ink));
}
.quilt-name {
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  font-size: 0.98rem;
  font-weight: bold;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.quilt-handle {
  position: relative;
  max-width: 100%;
  font-family: "Silkscreen", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.03em;
  opacity: 0.75;
  overflow-wrap: anywhere;
}
.quilt-patch-link--you {
  box-shadow:
    3px 3px 0 var(--dm-shadow, var(--ink)),
    0 0 0 3px var(--gold);
  animation: quilt-you-pulse 3.2s ease-in-out infinite;
}
.quilt-you {
  position: absolute;
  top: -11px;
  right: -7px;
  padding: 0.1rem 0.38rem;
  background: var(--gold);
  color: var(--ink);
  border: 2px solid var(--dm-line, var(--ink));
  font-family: "Silkscreen", monospace;
  font-size: 0.48rem;
  text-transform: uppercase;
  transform: rotate(4deg);
}
.quilt-patch--ghost {
  --tilt: 0deg;
}
.quilt-patch--ghost .quilt-patch-link {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  --stitch: var(--thread-teal);
}
.quilt-patch--ghost .quilt-patch-link::before {
  border-color: transparent;
}
.quilt-patch--ghost .quilt-handle {
  text-decoration: underline;
  opacity: 1;
  color: var(--link-blue);
}
.quilt-more,
.quilt-empty {
  position: relative;
  margin: 1.2rem 0 0;
  text-align: center;
  font-size: 0.92rem;
}
.quilt-empty {
  margin: 0 0 1.2rem;
}
.quilt--locked .quilt-frame {
  text-align: center;
  padding-bottom: 2.2rem;
}
.quilt--locked .quilt-thanks {
  position: relative;
  margin-bottom: 1.2rem;
}
.quilt-locked-action {
  position: relative;
  margin: 0;
}
@keyframes quilt-in {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes quilt-you-pulse {
  0%,
  100% {
    box-shadow:
      3px 3px 0 var(--dm-shadow, var(--ink)),
      0 0 0 3px var(--gold);
  }
  50% {
    box-shadow:
      3px 3px 0 var(--dm-shadow, var(--ink)),
      0 0 0 6px rgba(201, 154, 61, 0.55);
  }
}

.supporter-pair {
  margin-bottom: 2.6rem;
  align-items: stretch;
}
.supporter-pair .patch {
  min-height: 0;
}
.perk-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.1rem;
  margin: 1.6rem 0 1.1rem;
  align-items: stretch;
}
.perk-number .patch-body {
  text-align: center;
}
.perk-shift {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.7rem;
  margin: 0.1rem 0 0.55rem !important;
  line-height: 1.1;
}
.perk-from {
  font-size: 1.4rem;
  opacity: 0.5;
}
.perk-arrow {
  font-size: 1.1rem;
  color: var(--dm-teal-text, var(--thread-teal));
}
.perk-to {
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--dm-red-text, var(--thread-red));
}
.perk-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.1rem;
  margin: 0 0 2.6rem;
  align-items: stretch;
}
.perk-feature .patch-body p {
  margin: 0.9rem 0 0;
}
.perk-feature code {
  font-family: ui-monospace, "Courier New", monospace;
  background: var(--nav-strip);
  border: 1px solid var(--dm-line, var(--ink));
  padding: 0.05rem 0.3rem;
  font-size: 0.76rem;
}
.perk-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.4rem;
  border: 2px solid var(--dm-line, var(--ink));
}
.perk-demo--glow {
  background: #1b1630;
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffd98a;
}
.perk-demo--glow span {
  animation: perk-name-glow 4s ease-in-out infinite;
}
.perk-demo--lounge {
  background-color: var(--dm-demo-rose, #f7efef);
  background-image:
    linear-gradient(90deg, rgba(201, 154, 61, 0.55) 2px, transparent 2px),
    linear-gradient(rgba(201, 154, 61, 0.55) 2px, transparent 2px);
  background-size: 22px 22px;
  border-color: var(--gold);
  font-family: "Silkscreen", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.perk-demo--lounge span {
  padding: 0.25rem 0.7rem;
  background: var(--card);
  border: 2px solid var(--gold);
}
/* five little polaroids for the Heartbeats picture perk */
.perk-demo--pictures {
  gap: 0;
  background: var(--dm-demo-blue, #e9f2f7);
}
.perk-demo--pictures span {
  width: 2.6rem;
  height: 3rem;
  margin: 0 -0.35rem;
  background-color: var(--card);
  background-repeat: no-repeat;
  background-position: 0.25rem 0.25rem;
  background-size: calc(100% - 0.5rem) calc(100% - 1rem);
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
  transform: rotate(-6deg);
}
.perk-demo--pictures span:nth-child(1) {
  background-image: linear-gradient(160deg, #f6d27a 0 45%, #2a9d8f 45%);
}
.perk-demo--pictures span:nth-child(2) {
  background-image: linear-gradient(200deg, #9fc9ff 0 55%, #4e9b4f 55%);
  transform: rotate(5deg) translateY(-4px);
}
.perk-demo--pictures span:nth-child(3) {
  background-image: radial-gradient(
    circle at 50% 42%,
    #d9506b 0 34%,
    #f9dde3 36%
  );
  transform: rotate(-2deg) translateY(3px);
  z-index: 1;
}
.perk-demo--pictures span:nth-child(4) {
  background-image: linear-gradient(180deg, #2b2560 0 60%, #c99a3d 60%);
  transform: rotate(7deg);
}
.perk-demo--pictures span:nth-child(5) {
  background-image: linear-gradient(135deg, #e8833a, #9b7ede);
  transform: rotate(-4deg) translateY(-3px);
}
.perk-demo--premium {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  background: linear-gradient(160deg, #15112b, #1d1740);
  border-color: #e9c46a;
  border-radius: 6px;
  animation: perk-card-glow 5s ease-in-out infinite;
}
.perk-premium-bar {
  height: 1.2rem;
  background:
    linear-gradient(
      100deg,
      transparent 35%,
      rgba(255, 255, 255, 0.22) 50%,
      transparent 65%
    ),
    linear-gradient(90deg, #2a1f5c, #3b2a7a);
  background-size:
    250% 100%,
    100% 100%;
  background-repeat: no-repeat;
  border-bottom: 2px dashed #e9c46a;
  animation: perk-bar-shimmer 7s linear infinite;
}
.perk-premium-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: #e9c46a;
  animation: perk-name-glow 4s ease-in-out infinite;
}
.perk-premium-body::after {
  content: "\2726";
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.7em;
  color: #ff9ec0;
  animation: perk-twinkle 3s ease-in-out infinite;
}
@keyframes perk-name-glow {
  0%,
  100% {
    text-shadow:
      0 0 8px rgba(255, 217, 138, 0.55),
      0 0 20px rgba(143, 120, 255, 0.4);
  }

  50% {
    text-shadow:
      0 0 18px rgba(255, 217, 138, 1),
      0 0 42px rgba(143, 120, 255, 0.8),
      0 0 65px rgba(143, 120, 255, 0.35);
  }
}
@keyframes perk-card-glow {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(233, 196, 106, 0.22);
  }
  50% {
    box-shadow: 0 0 20px rgba(233, 196, 106, 0.55);
  }
}
@keyframes perk-bar-shimmer {
  0% {
    background-position:
      120% 0,
      0 0;
  }
  60%,
  100% {
    background-position:
      -20% 0,
      0 0;
  }
}
@keyframes perk-twinkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.kofi-steps {
  max-width: 40rem;
  margin: 1.6rem auto 2rem;
}
.kofi-step-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kofi-step;
}
.kofi-step-list li {
  position: relative;
  padding: 0.1rem 0 1rem 2.7rem;
  counter-increment: kofi-step;
}
.kofi-step-list li::before {
  content: counter(kofi-step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
  font-family: "Silkscreen", monospace;
  font-size: 0.7rem;
}
.kofi-step-list li:nth-child(even)::before {
  background: var(--thread-teal);
}

@media (max-width: 480px) {
  .quilt-frame {
    padding: 1.7rem 0.9rem 1.5rem;
  }
  .quilt-title::before,
  .quilt-title::after {
    margin: 0 0.35rem;
  }
  .quilt-patch {
    flex-basis: 7.6rem;
    min-width: 7rem;
  }
  .supporter-ribbon {
    font-size: 0.58rem;
    padding: 0.5rem 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quilt-patch,
  .quilt-patch-link--you,
  .perk-demo--glow span,
  .perk-demo--premium,
  .perk-premium-bar,
  .perk-premium-body,
  .perk-premium-body::after {
    animation: none;
  }
  .quilt-patch-link {
    transition: none;
  }
}

.profile-links {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--dm-rule, #9c8b6e);
}

/* the newest Heartbeats on a profile (heartbeats/) */
.profile-heartbeat-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.profile-heartbeat-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.1rem 0.8rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--dm-rule, #9c8b6e);
}
.profile-heartbeat-list a {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.profile-heartbeat-list time {
  font-size: 0.72rem;
  opacity: 0.75;
  white-space: nowrap;
}
.profile-heartbeat-more {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
}
.profile-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
  list-style: none;
  margin: 0.1rem 0 0;
  padding: 0;
}
.profile-link-list li {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.profile-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.28rem 0.65rem;
  border: 2px solid currentColor;
  text-decoration: none;
  font-size: 0.82rem;
}
.profile-link-name {
  flex: none;
  font-family: "Silkscreen", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.profile-link-host {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the member's own link: its name is theirs and can be long, so it may wrap rather than push out of the box */
.profile-link-custom .profile-link-name {
  flex-shrink: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.edit-lede {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}
.edit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 1.3rem;
  align-items: start;
}
.edit-stack {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.edit-stack .patch,
.edit-side .patch {
  margin-top: 0;
  margin-bottom: 0;
}
.edit-layout .patch-title {
  margin: 0;
}
.edit-layout .patch-body {
  padding: 1.1rem 1.1rem 1.2rem;
}
.edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
}
.edit-field {
  margin: 0 0 1rem;
  min-width: 0;
}
.edit-field--wide {
  grid-column: 1 / -1;
}
.edit-grid > .edit-field:last-child,
.patch-body > .edit-field:last-child {
  margin-bottom: 0;
}
.edit-control {
  position: relative;
}
.edit-control .char-counter {
  margin: 0.25rem 0 0;
}
.edit-required {
  margin-left: 0.5rem;
  color: var(--dm-red-text, var(--thread-red));
  font-size: 0.52rem;
}
.edit-note {
  margin: 0 0 1rem;
  font-size: 0.82rem;
}
.edit-field.has-errors input,
.edit-field.has-errors select,
.edit-field.has-errors textarea {
  border-color: var(--thread-red);
}

/* "Your own link" in LINKS on the edit page: the name a member gives their link, next to the link itself */
.edit-own-link {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--dm-rule, #9c8b6e);
}
.edit-own-link-title {
  margin: 0 0 0.7rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.edit-own-link-fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: 1rem;
}
.edit-own-link-fields > .edit-field {
  margin-bottom: 0;
}
@media (max-width: 520px) {
  .edit-own-link-fields {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }
}

.swatch-field {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
  min-width: 0;
}
.swatch-field legend {
  padding: 0;
  margin-bottom: 0.3rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dm-teal-text, var(--thread-teal));
}
.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 3px;
}
.swatch {
  position: relative;
  display: block;
  margin: 0;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.swatch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.swatch-chip {
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--dm-line, var(--ink));
}
.swatch--none .swatch-chip {
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px);
  background-size: 6px 6px;
}
.swatch:hover .swatch-chip {
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
}
.swatch input:checked + .swatch-chip {
  outline: 3px solid var(--heart-pink);
  outline-offset: 1px;
}
.swatch input:focus-visible + .swatch-chip {
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--thread-teal);
}
.swatch-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (pointer: coarse) {
  .swatch-chip {
    width: 34px;
    height: 34px;
  }
}

main.has-page-color {
  background-image: radial-gradient(
    rgba(46, 33, 24, 0.12) 1.4px,
    transparent 1.4px
  );
  background-size: 15px 15px;
}
/* The dark half of the palette (profiles/page_colors.py, "tone": "dark"): light dots, and the few things that sit
   straight on the color, outside every box, are written in light colors: the Report / Block footer. Only those:
   everything inside .profile-canvas keeps the colors its theme gives it, and the buttons, the fellow box and the
   corner badges keep their own boxes. The same in the site's dark mode, since a page color is part of the member's
   design (it is one of the "islands" at the top of this file). */
main.has-page-color--dark {
  --page-text: #fff6ea;
  background-image: radial-gradient(
    rgba(255, 246, 234, 0.1) 1.4px,
    transparent 1.4px
  );
}
main.has-page-color--dark .profile-safety-footer-label {
  color: var(--page-text);
}
main.has-page-color--dark .profile-safety-footer {
  border-top-color: rgba(255, 246, 234, 0.45);
}
/* The page color picker: the dark colors start a row of their own, under the light ones. */
.swatch-break {
  flex-basis: 100%;
  height: 0;
}
.edit-side .photo-grid {
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
}
@media (max-width: 860px) {
  .edit-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .edit-form > .btn-block {
    display: block;
    width: calc(100% - 1.5rem);
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
}
@media (max-width: 520px) {
  .edit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .edit-layout .patch-body {
    padding: 0.9rem;
  }
}

@supports (appearance: base-select) {
  select,
  select::picker(select) {
    appearance: base-select;
  }
  select::picker-icon {
    display: none;
  }
  select::picker(select) {
    box-sizing: border-box;
    max-height: 18rem;
    margin: 2px 0 0;
    padding: 0;
    border: 2px solid var(--dm-line, var(--ink));
    border-radius: 0;
    background: var(--dm-field, #fff);
    box-shadow: 3px 3px 0 var(--dm-shadow, var(--ink));
  }
  option {
    display: block;
    padding: 0.45rem 0.6rem;
    font-size: 0.88rem;
    line-height: 1.35;
    outline: none;
  }
  option::checkmark {
    display: none;
  }
  option:hover,
  option:focus-visible,
  option:checked {
    background-color: var(--thread-red);
    background-image: none;
    color: var(--dm-on-accent, var(--card));
  }
  select:has(option:hover) option:not(:hover),
  select:has(option:focus-visible:not(:checked))
    option:checked:not(:focus-visible) {
    background-color: var(--dm-field, #fff);
    color: var(--ink);
  }
  option:disabled {
    opacity: 0.5;
  }
}

.conversation-item {
  position: relative;
}
.conversation-item .conversation-name-row {
  padding-right: 1.5rem;
}
.conversation-item .unread-badge {
  align-self: flex-end;
}

.confirm-morph {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  overflow: hidden;
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  color: var(--dm-red-text, var(--thread-red));
  vertical-align: middle;
  transition:
    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.15s linear,
    border-color 0.15s linear,
    color 0.15s linear;
}
.confirm-morph:hover {
  background: var(--thread-red);
  border-color: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
}
.confirm-morph:has(:focus-visible) {
  outline: 2px dashed var(--thread-teal);
  outline-offset: 2px;
}
.confirm-morph button:focus-visible {
  outline: none;
}
.confirm-morph--corner {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  background: var(--thread-red);
  border-color: var(--dm-line, var(--ink));
  color: var(--dm-on-accent, var(--card));
  /* Out of sight until it is wanted (see the rules below). Only faded out, never removed, so a screen reader or the Tab key can still reach it. */
  opacity: 0;
  pointer-events: none;
  transition:
    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.15s linear,
    border-color 0.15s linear,
    color 0.15s linear,
    opacity 0.15s linear;
}
.confirm-morph--corner:hover {
  background: #82202c;
  border-color: var(--dm-line, var(--ink));
  color: var(--dm-on-accent, var(--card));
}
/* The hide-conversation X shows while the pointer is over that conversation, always on the conversation that is open, and while its "Yes / No" question is up. */
.conversation-item--open .confirm-morph--corner,
.confirm-morph--corner.is-confirming {
  opacity: 1;
  pointer-events: auto;
}
/* Phones and tablets have no hover, and on iOS a hover-only change makes the first tap on a row do nothing, so only real pointers get this one. */
@media (hover: hover) {
  .conversation-item:hover .confirm-morph--corner {
    opacity: 1;
    pointer-events: auto;
  }
}
/* Keyboard users reaching a row (or the X itself) see the X too. Kept on its own line: a browser without :has() drops this one rule and keeps all the others. */
.conversation-item:has(:focus-visible) .confirm-morph--corner {
  opacity: 1;
  pointer-events: auto;
}
.confirm-morph--tool {
  width: 1.2rem;
  height: 1.2rem;
  background: transparent;
  border-color: transparent;
  color: var(--dm-muted, #7a6a4f);
}
.confirm-morph--tool:hover {
  background: transparent;
  border-color: transparent;
  color: var(--dm-red-text, var(--thread-red));
}
.confirm-morph-open {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.confirm-morph-icon {
  width: 8px;
  height: 8px;
}
.confirm-morph--tool .pixel-trash {
  width: 13px;
  height: 13px;
}
.confirm-morph-choices {
  display: none;
  flex: 1 1 auto;
  align-items: stretch;
  min-width: 0;
}
.confirm-morph.is-confirming,
.confirm-morph.is-confirming:hover {
  width: 4.2rem;
  background: var(--card);
  border-color: var(--dm-line, var(--ink));
  color: var(--ink);
}
.confirm-morph.is-confirming .confirm-morph-open {
  display: none;
}
.confirm-morph.is-confirming .confirm-morph-choices {
  display: flex;
  animation: confirm-choices-in 0.22s ease-out both;
}
.confirm-morph-yes,
.confirm-morph-no {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0 0.1rem;
  border: 0;
  border-radius: 0;
  font-family: "Silkscreen", monospace;
  font-size: 0.55rem;
  line-height: 1;
  text-transform: uppercase;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.confirm-morph-yes {
  background: var(--thread-red);
  color: var(--dm-on-accent, var(--card));
  border-right: 2px solid var(--dm-line, var(--ink));
}
.confirm-morph-yes:hover {
  background: #82202c;
}
.confirm-morph-no {
  background: var(--card);
  color: var(--ink);
}
.confirm-morph-no:hover {
  background: var(--nav-strip);
}
@keyframes confirm-choices-in {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.message-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
}
.message-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--dm-muted, #7a6a4f);
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.message-tool-icon {
  width: 13px;
  height: 13px;
}
.message-tool--edit:hover,
.message-tool--edit:focus-visible {
  color: var(--dm-teal-text, var(--thread-teal));
}
.message-tool:focus-visible {
  outline: 2px solid var(--thread-teal);
  outline-offset: 1px;
}
.message-edited {
  font-style: italic;
}
.message-footer-side {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.profiring-chat .message-bubble.mine .message-footer {
  flex-direction: row-reverse;
}

.message-edit-form {
  margin: 0;
}
.message-edit-form textarea {
  display: block;
  width: 100%;
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 0.88rem;
  padding: 0.45rem 0.55rem;
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  background: var(--dm-field, #fff);
  color: var(--ink);
  resize: vertical;
}
.message-edit-form .char-counter {
  margin: 0.15rem 0 0.4rem;
}
.message-edit-form ul.errorlist {
  margin: 0.2rem 0 0.4rem;
}
.message-edit-notice {
  margin: 0.3rem 0 0.4rem;
  font-size: 0.78rem;
  font-weight: bold;
  color: var(--dm-red-text, var(--thread-red));
}
.message-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}
.message-edit-save,
.message-edit-cancel {
  margin: 0;
  padding: 0.3rem 0.75rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.message-edit-save {
  background: var(--thread-teal);
  color: var(--dm-on-accent, var(--card));
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
}
.message-edit-save:hover {
  background: #215551;
}
.message-edit-save:active {
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  transform: translate(1px, 1px);
}
.message-edit-cancel {
  background: var(--card);
  color: var(--ink);
}
.message-edit-cancel:hover {
  background: var(--nav-strip);
}

.conversation-item.is-vanishing,
.message-bubble.is-vanishing {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.conversation-item.is-vanishing {
  animation: conversation-vanish 0.48s cubic-bezier(0.45, 0, 0.7, 0.45) forwards;
}
.message-bubble.is-vanishing {
  transform-origin: 100% 50%;
  animation: message-poof 0.46s ease-in forwards;
}
.conversation-item.is-vanishing::after,
.message-bubble.is-vanishing::after {
  position: absolute;
  line-height: 1;
  pointer-events: none;
  animation: vanish-spark 0.46s ease-out forwards;
}
.conversation-item.is-vanishing::after {
  content: "\2665";
  top: 0.55rem;
  right: 0.6rem;
  font-size: 0.9rem;
  color: var(--heart-pink);
}
.message-bubble.is-vanishing::after {
  content: "\2726";
  top: 50%;
  left: 50%;
  margin: -0.5rem 0 0 -0.5rem;
  font-size: 1rem;
  color: var(--gold);
}
@keyframes conversation-vanish {
  0% {
    opacity: 1;
    transform: none;
    max-height: var(--vanish-h, 4.5rem);
  }
  22% {
    opacity: 1;
    transform: scale(1.02, 0.93);
    max-height: var(--vanish-h, 4.5rem);
  }
  58% {
    opacity: 0.8;
    transform: translateX(-0.4rem) rotate(-1deg) scale(0.96);
    max-height: var(--vanish-h, 4.5rem);
  }
  100% {
    opacity: 0;
    transform: translateX(-1.6rem) rotate(-3deg) scale(0.88);
    max-height: 0;
  }
}
@keyframes message-poof {
  0% {
    opacity: 1;
    transform: none;
    max-height: var(--vanish-h, 6rem);
    margin-bottom: 0.6rem;
  }
  20% {
    opacity: 1;
    transform: scale(1.05);
    max-height: var(--vanish-h, 6rem);
    margin-bottom: 0.6rem;
  }
  60% {
    opacity: 0.55;
    transform: scale(0.55) rotate(-4deg);
    max-height: var(--vanish-h, 6rem);
    margin-bottom: 0.6rem;
  }
  100% {
    opacity: 0;
    transform: scale(0.05) rotate(-9deg);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
  }
}
@keyframes vanish-spark {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  35% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.4rem) scale(0.6);
  }
}
@keyframes vanish-fade {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .confirm-morph {
    transition: none;
  }
  .confirm-morph.is-confirming .confirm-morph-choices {
    animation: none;
  }
  .conversation-item.is-vanishing,
  .message-bubble.is-vanishing {
    animation: vanish-fade 0.2s linear forwards;
  }
  .conversation-item.is-vanishing::after,
  .message-bubble.is-vanishing::after {
    display: none;
  }
}

/* ---- Plaza avatar: the heart portrait of a member's Plaza character standing in for their profile image
   (profiles/avatars.py decides when, plaza/portrait.py draws it). It sits on the same tile the pixel heart sits on. */
.plaza-avatar {
  display: block;
  width: 100%;
  height: auto;
  shape-rendering: crispEdges;
}
.profile-avatar--plaza {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nav-strip);
  overflow: hidden;
}
.profile-avatar--plaza .plaza-avatar {
  width: 82%;
}
.browse-card-avatar--plaza {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nav-strip);
}
.browse-card-avatar--plaza .plaza-avatar {
  width: 88px;
  max-width: 70%;
}
.conversation-avatar--plaza {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nav-strip);
}
.conversation-avatar--plaza .plaza-avatar {
  width: 28px;
}
.mini-avatar--plaza {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-avatar--plaza .plaza-avatar {
  width: 22px;
}
.mini-avatar--sm.mini-avatar--plaza .plaza-avatar {
  width: 20px;
}

/* "Picture to show" on Edit My Profile: two options, each with a small preview of what it would show */
.avatar-source-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem;
  padding: 3px;
}
.avatar-source-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
  border: 2px solid var(--dm-line, var(--ink));
  background: var(--card);
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.avatar-source-option:hover {
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
}
.avatar-source-option:has(input:checked) {
  outline: 3px solid var(--heart-pink);
  outline-offset: 1px;
}
.avatar-source-option:has(input:focus-visible) {
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--thread-teal);
}
.avatar-source-option input {
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--thread-red);
}
.avatar-source-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: 2px solid var(--dm-line, var(--ink));
  background: var(--nav-strip);
  overflow: hidden;
}
.avatar-source-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-source-preview .plaza-avatar {
  width: 84%;
}
.avatar-source-preview .pixel-heart {
  width: 24px;
  height: 21px;
  color: var(--heart-pink);
}
.avatar-source-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.avatar-source-name {
  font-weight: bold;
  font-size: 0.88rem;
}
.avatar-source-hint {
  font-size: 0.72rem;
  opacity: 0.8;
}
.avatar-source-note a {
  color: var(--dm-teal-text, var(--thread-teal));
}

/* ---- Friends (friends/): the buttons on a profile and in a conversation, the Friends page, the pop-up ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Folks (templates/folks/): Browse Folks, Fellowfolks and Favorites, three tabs under one heading. Each tab is a
   page of its own; the open one is pressed in, in the site red, like the current menu item. */
.folks-intro {
  padding-bottom: 1.1rem;
}
.folks-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 0.65rem;
  margin: 0 0 1.6rem;
}
.folks-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--dm-line, var(--ink));
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
  padding: 0.55rem 1rem;
}
.folks-tab:hover {
  color: var(--ink);
  background: var(--nav-strip);
}
.folks-tab:active {
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  transform: translate(1px, 1px);
}
.folks-tab.is-current,
.folks-tab.is-current:hover {
  color: var(--dm-on-accent, var(--card));
  background: var(--thread-red);
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  transform: translate(1px, 1px);
}
.folks-tab .unread-badge {
  margin-left: 0.1rem;
}
/* A badge on something red (the open tab, the current menu item) swaps its colours, so it doesn't vanish into it. */
.folks-tab.is-current .unread-badge,
.site-nav a.nav-current .unread-badge {
  color: var(--thread-red);
  background: var(--dm-on-accent, var(--card));
}
/* For a visitor: Fellowfolks and Favorites are a member's own lists, so these two lead to the login page. */
.folks-tab--locked {
  color: var(--dm-teal-text, var(--thread-teal));
  border-style: dashed;
  box-shadow: none;
}
.folks-tab--locked:hover {
  color: var(--dm-teal-text, var(--thread-teal));
}
.folks-tab-lock {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .folks-tabs {
    gap: 0.45rem;
  }
  .folks-tab {
    font-size: 0.62rem;
    padding: 0.5rem 0.65rem;
  }
}

/* The fellow box (friends/_fellow_panel.html): what Add Fellow on a profile opens, in a <dialog> outside
   .profile-canvas so a member's Custom CSS can never restyle it, or on a page of its own without JavaScript. */
.fellow-dialog {
  width: min(25rem, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  margin: auto;
  border: 0;
  background: none;
  color: var(--ink);
  overflow: visible;
}
.fellow-dialog::backdrop {
  background: rgba(46, 33, 24, 0.45);
}
:root[data-theme="dark"] .fellow-dialog::backdrop {
  background: rgba(11, 8, 13, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .fellow-dialog[open] {
    animation: fellow-dialog-in 0.16s ease-out;
  }
}
@keyframes fellow-dialog-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}
.fellow-panel {
  text-align: center;
}
.fellow-panel-title {
  margin: 0;
  justify-content: center;
}
.fellow-panel-body {
  padding: 1.1rem 1.1rem 0.9rem;
}
.fellow-panel-body p {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
}
.fellow-panel-body .fellow-panel-hint {
  font-size: 0.78rem;
  opacity: 0.8;
}
.fellow-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 0.9rem;
  margin: 1rem 0 0;
}
.fellow-panel-close {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
}
.fellow-panel-close form {
  margin: 0;
}
.fellow-panel-close .link-btn {
  font-size: 0.8rem;
}
.fellow-page {
  max-width: 25rem;
  margin: 1rem auto 0;
}

.friend-note {
  text-align: center;
  font-size: 0.78rem;
  opacity: 0.8;
  margin: 0.4rem 0 0;
}
.friend-ask {
  font-size: 0.85rem;
  font-weight: 700;
}
.friend-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dm-on-accent, var(--card));
  background: var(--thread-teal);
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  padding: 0.6rem 1.1rem;
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
}
a.friend-status:hover {
  color: var(--dm-on-accent, var(--card));
  background: #215551;
}
a.friend-status:active {
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  transform: translate(1px, 1px);
}
.friend-status .friend-status-icon {
  width: 12px;
  height: 10.5px;
  color: var(--dm-on-accent, var(--card));
  flex-shrink: 0;
}
.friend-status--waiting {
  color: var(--dm-teal-text, var(--thread-teal));
  background: var(--card);
  border-style: dashed;
  box-shadow: none;
}
.friend-status--waiting .friend-status-icon {
  color: var(--dm-teal-text, var(--thread-teal));
}
.friend-quiet-btn {
  background: none;
  border: none;
  padding: 0.2rem 0.25rem;
  color: var(--dm-red-text, var(--thread-red));
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.friend-quiet-btn:hover {
  color: var(--ink);
}

.conversation-friend-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  text-align: center;
}
.conversation-friend-gate .conversation-blocked-notice {
  margin: 0;
}
.conversation-friend-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.6rem;
}
.conversation-friend-gate .friend-note {
  margin: 0;
}

.friend-section-title {
  margin: 1.8rem 0 0;
}
.friend-section-hint {
  text-align: center;
  font-size: 0.78rem;
  opacity: 0.75;
  margin: -0.6rem 0 1rem;
}
.friend-card {
  overflow: hidden;
}
.friend-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}
.friend-card-link:hover {
  color: var(--ink);
}
.friend-card-link:hover .browse-card-name {
  color: var(--dm-red-text, var(--thread-red));
}
.friend-card-body {
  height: auto;
  min-height: 5rem;
}
.friend-card-body .browse-card-meta {
  margin-bottom: 0.3rem;
}
.friend-card-note {
  font-size: 0.74rem;
  margin: 0;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-card-actions {
  display: flex;
  border-top: 2px solid var(--dm-line, var(--ink));
}
.friend-card-actions > * {
  flex: 1 1 0;
  display: flex;
  min-width: 0;
}
.friend-card-actions > * + * {
  border-left: 2px solid var(--dm-line, var(--ink));
}
.friend-card-btn {
  flex: 1;
  display: block;
  text-align: center;
  font-family: "Silkscreen", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: none;
  border-radius: 0;
  padding: 0.6rem 0.3rem;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.friend-card-btn:hover {
  background: var(--nav-strip);
  color: var(--ink);
}
.friend-card-btn--yes {
  background: var(--thread-teal);
  color: var(--dm-on-accent, var(--card));
}
.friend-card-btn--yes:hover {
  background: #215551;
  color: var(--dm-on-accent, var(--card));
}

#toast-area .toast + .toast {
  margin-top: 0.5rem;
}
.toast--friend .toast-body a {
  color: var(--link-blue);
}
.toast-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.55rem;
}
.toast-actions form {
  margin: 0;
}
.toast-btn {
  font-family: "Silkscreen", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dm-on-accent, var(--card));
  background: var(--thread-teal);
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  padding: 0.3rem 0.6rem;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.toast-btn:hover {
  background: #215551;
}
.toast-btn--quiet {
  color: var(--ink);
  background: var(--card);
}
.toast-btn--quiet:hover {
  background: var(--nav-strip);
}
.toast--answered {
  animation-duration: 5s;
}
/* "You're in!": a ProfiRing said yes to the member's request (profiles/ring_requests.py) */
.toast--welcome {
  border-color: var(--thread-teal);
  box-shadow: 3px 3px 0 var(--thread-teal);
}
.toast--welcome .toast-title {
  color: var(--dm-teal-text, var(--thread-teal));
}

.settings-choice {
  border: 2px dashed var(--dm-rule, #9c8b6e);
  padding: 0.5rem 0.9rem 0.2rem;
  margin: 0.3rem 0 0;
}
.settings-choice legend {
  font-family: "Silkscreen", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dm-teal-text, var(--thread-teal));
  padding: 0 0.3rem;
}
.settings-choice .toggle-row {
  margin-bottom: 0.45rem;
}
.settings-choice .helptext {
  margin: 0.2rem 0 0.7rem;
}
.toggle-row input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--thread-red);
  flex-shrink: 0;
}

/* The Supporter page's Ko-fi button: a plain link in the site's own style, so nothing loads from Ko-fi until it's clicked. */
.kofi-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: #f57373;
  border: 2px solid var(--dm-line, var(--ink));
  border-radius: 0;
  padding: 0.65rem 1.2rem;
  box-shadow: 2px 2px 0 var(--dm-shadow, var(--ink));
}
.kofi-link-btn:hover {
  color: #fff;
  background: #e05f5f;
}
.kofi-link-btn:active {
  box-shadow: 1px 1px 0 var(--dm-shadow, var(--ink));
  transform: translate(1px, 1px);
}
.kofi-link-btn .kofi-link-icon {
  width: 14px;
  height: 12px;
  color: #fff;
  flex-shrink: 0;
}
.kofi-link-note {
  font-size: 0.74rem;
  opacity: 0.75;
  margin: 0.6rem 0 0;
}

/* ---- The legal pages: the Legal & Safety hub (core/legal.html), tables on the Cookie Policy, the urgent note ---- */
.legal-hub-heading {
  margin: 2rem 0 0;
  font-size: 1.15rem;
}
.legal-hub-grid {
  margin-top: 1.1rem;
}
.legal-hub-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}
.legal-hub-card:hover {
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--dm-shadow, var(--ink));
  transform: translate(-1px, -1px);
}
.legal-hub-card:focus-visible {
  outline: 2px dashed var(--thread-teal);
  outline-offset: 3px;
}
.legal-hub-card .patch-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 0.88rem;
}
.legal-hub-card .patch-body p {
  margin: 0 0 0.6rem;
}
.legal-hub-more {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  color: var(--link-blue);
  text-decoration: underline;
}
.legal-hub-card:hover .legal-hub-more {
  color: var(--dm-red-text, var(--thread-red));
}
.legal-hub-footer {
  text-align: center;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 2px dashed var(--dm-rule, #9c8b6e);
  font-size: 0.88rem;
}
.legal-hub-footer p {
  max-width: 36em;
  margin: 0 auto;
}

.legal-body ul,
.legal-body ol {
  margin: 0 0 0.9rem;
  padding-left: 1.3rem;
}
.legal-body li {
  margin-bottom: 0.35rem;
}
.legal-body code {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.8rem;
  background: var(--nav-strip);
  border: 1px solid var(--dm-line, var(--ink));
  padding: 0.02rem 0.25rem;
  overflow-wrap: anywhere;
}
.legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 1rem;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.legal-table th,
.legal-table td {
  border: 2px solid var(--dm-line, var(--ink));
  padding: 0.45rem 0.55rem;
  text-align: left;
  vertical-align: top;
}
.legal-table th {
  font-family: "Silkscreen", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--nav-strip);
}
.legal-table td:first-child {
  white-space: nowrap;
}
.legal-table .legal-table-when {
  min-width: 7.5rem;
}
/* On a phone each row becomes its own little box, name first, so nothing has to be squeezed into a narrow column. */
@media (max-width: 560px) {
  .legal-table thead {
    display: none;
  }
  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table td {
    display: block;
    width: 100%;
  }
  .legal-table tr {
    border: 2px solid var(--dm-line, var(--ink));
    margin-bottom: 0.7rem;
  }
  .legal-table td {
    border: none;
    border-top: 1px dashed var(--dm-rule, #9c8b6e);
  }
  .legal-table td:first-child {
    border-top: none;
    background: var(--nav-strip);
    white-space: normal;
  }
  .legal-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
  }
}

.contact-urgent {
  max-width: 34rem;
  margin: 1.3rem auto 1.6rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--thread-red);
  background: var(--dm-danger-bg, #fbeaea);
  font-size: 0.85rem;
  text-align: center;
}

/* ---- "Embed Us" at the bottom of the Contact page (core.views.embed_button): the 88 x 31 button and its code ---- */
.embed-us {
  max-width: 34rem;
  margin: 1.8rem auto 0;
}
.embed-us-hint {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
}
.embed-us-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1rem;
  padding: 0.9rem;
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 8px 8px;
  border: 2px dashed var(--dm-rule, #9c8b6e);
}
.embed-us-preview a {
  display: block;
  line-height: 0;
}
.embed-us-preview img {
  display: block;
  image-rendering: pixelated;
}
.embed-us-code {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.76rem;
  resize: vertical;
}
.embed-us-actions {
  margin: 0.45rem 0 0.9rem;
}
.embed-us-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}
.embed-us-url {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 100%;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.78rem;
}
.embed-us-row .btn {
  flex: none;
}

/* ---- Statuses (profiles.PersonalStatus): a copy of one of a member's Personals ----
   On /personals/: the "Status" box on your own cards, the code for your own website (on the card it came from, or
   in the "Your status" box at the top while that card isn't on the page), and "Also make it my status" when posting.
   On a profile: the lower row of the details box becomes Links | Status while there is a status. The status on
   another website is drawn by static/css/status-embed.css. */
.personal-status-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.7rem;
  margin: -0.35rem 0 0.85rem;
}
.personal-status-check label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-family: "Pixelify Sans", Verdana, Geneva, sans-serif;
  font-size: 0.82rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.personal-status-check input {
  margin: 0;
  accent-color: var(--thread-red);
}
.personal-status-check-hint {
  font-size: 0.72rem;
  opacity: 0.7;
}

.personal-ad-anchor {
  position: absolute;
  top: -1rem;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.personal-status-form {
  display: inline-flex;
  margin: 0 auto 0 0;
}
.personal-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.15rem 0.1rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 0;
  opacity: 0.78;
  cursor:
    url("../img/cursor-pointer.a7d64dc8a0d3.png") 5 0,
    pointer;
}
.personal-status-toggle:hover,
.personal-status-toggle:focus-visible {
  opacity: 1;
}
.personal-status-box {
  display: block;
  width: 11px;
  height: 11px;
  flex: none;
  background: var(--dm-field, #fff);
  border: 2px solid currentColor;
}
.personal-status-toggle[aria-pressed="true"] {
  opacity: 1;
  color: var(--dm-red-text, var(--thread-red));
}
.personal-status-toggle[aria-pressed="true"] .personal-status-box {
  border-color: var(--thread-red);
  background: var(--thread-red)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23FFFBF0' d='M6 0h1v1H6zM5 1h1v1H5zM0 2h1v1H0zM4 2h1v1H4zM1 3h1v1H1zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E")
    center / 7px 5px no-repeat;
}
.personal-status-code {
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--dm-rule, #9c8b6e);
}
.personal-status-code-label {
  margin-bottom: 0.3rem;
}
.personal-status-code-field {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.68rem;
  line-height: 1.35;
  resize: vertical;
}
.personal-status-code-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.7rem;
  margin: 0.45rem 0 0;
  font-size: 0.74rem;
}
.personal-status-copy {
  padding: 0.4rem 0.65rem;
  font-size: 0.58rem;
}
.personal-ad.personal-style--arcade .personal-status-toggle {
  color: #e9f4ff;
}
.personal-ad.personal-style--arcade
  .personal-status-toggle[aria-pressed="true"] {
  color: #ff6fb5;
}
.personal-ad.personal-style--arcade .personal-status-code {
  border-top-color: rgba(53, 235, 219, 0.4);
}
.personal-ad.personal-style--arcade .personal-status-code-label {
  color: #35ebdb;
}
.personal-ad.personal-style--arcade .personal-status-preview {
  color: #7fe9ff;
}

.personal-status-panel {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 2px dashed var(--dm-rule, #9c8b6e);
}
.personal-status-panel-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-family: "Silkscreen", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dm-teal-text, var(--thread-teal));
}
.personal-status-panel-heart {
  width: 10px;
  height: 9px;
  flex: none;
  color: var(--heart-pink);
}
.personal-status-panel-text {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.personal-status-panel-note {
  margin: 0 0 0.6rem;
  font-size: 0.76rem;
  opacity: 0.85;
}
.personal-status-panel .personal-status-code {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.personal-status-clear-form {
  margin: 0.6rem 0 0;
}

.profile-facts-lower {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 1rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--dm-rule, #9c8b6e);
}
.profile-facts-lower:not(.has-links) {
  grid-template-columns: minmax(0, 1fr);
}
.profile-facts-lower .profile-links {
  margin: 0;
  padding: 0;
  border-top: 0;
}
.profile-status {
  min-width: 0;
}
.profile-facts-lower.has-links .profile-status {
  padding-left: 1rem;
  border-left: 1px dashed var(--dm-rule, #9c8b6e);
}
.profile-status-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.profile-status-time {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  opacity: 0.7;
}
@media (max-width: 480px) {
  .profile-facts-lower {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
  }
  .profile-facts-lower.has-links .profile-status {
    padding-left: 0;
    border-left: 0;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--dm-rule, #9c8b6e);
  }
}

/* ---- Smooth page changes ------------------------------------------------------------------------------------------
   Going from one page of the site to another cross-fades instead of blinking white: the old page fades out while the
   new one fades in, rising a few pixels (cross-document view transitions: Chrome, Edge and Safari; other browsers load
   pages exactly as they always did). The header with the menu stays perfectly still, and so do the Folks tabs from
   one tab to the next. It's still a real page load, so nothing about how a page works changes. Off for anyone whose
   device asks for less motion. The small script in the <head> of base.html lets the header (and the tabs) fade along
   with the page when they're scrolled out of sight, so they never slide in from above. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
body > header {
  view-transition-name: site-header;
}
.folks-tabs {
  view-transition-name: folks-tabs;
}
::view-transition-group(*) {
  animation-duration: 0.2s;
}
::view-transition-old(root) {
  animation: page-change-out 0.18s ease both;
}
::view-transition-new(root) {
  animation:
    page-change-in 0.18s ease both,
    page-change-rise 0.26s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes page-change-out {
  to {
    opacity: 0;
  }
}
@keyframes page-change-in {
  from {
    opacity: 0;
  }
}
@keyframes page-change-rise {
  from {
    transform: translateY(8px);
  }
}