@font-face {
  font-family: "Comic Neue";
  src: url("/assets/fonts/ComicNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.messenger-desktop {
  --messenger-overlap: 34px;
  position: relative;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  max-width: 850px;
  margin: 0 auto;
  color: #222;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: var(--text-body);
}
.messenger-desktop [hidden] {
  display: none !important;
}
.messenger-desktop .title-bar-text {
  font:
    bold var(--text-ui) / 1.4 "Pixelated MS Sans Serif",
    Arial,
    sans-serif;
  margin: 0;
}
.buddy-list {
  min-height: 475px;
}
.buddy-list .window-body {
  margin: 8px;
}
.message-window {
  margin: 76px 0 0 calc(-1 * var(--messenger-overlap));
  position: relative;
  min-width: 0;
  z-index: 1;
}
.buddy-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 8px;
  background: #000080;
  color: #fff;
  font-size: var(--text-heading);
  font-weight: bold;
  line-height: 1.4;
}
.pixel-coin {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  background: #ffd638;
  color: #7c4600;
  border: 4px ridge #fff094;
  box-shadow: 3px 3px #382800;
  border-radius: 45%;
  font:
    bold var(--text-heading) Georgia,
    serif;
}
.buddy-tree {
  min-height: 230px;
  background: white;
  border: 2px inset #ddd;
  padding: 12px 8px;
}
.buddy-tree details {
  margin: 0 0 14px;
}
.buddy-tree summary {
  cursor: pointer;
  font-weight: bold;
}
.buddy-tree p {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 10px 0 0 16px;
}

.card-exchange {
  margin: 8px;
  padding: 0;
}
.transcript {
  background: #fff;
  border: 2px inset #ddd;
  padding: 12px;
  min-height: 94px;
  font:
    var(--text-body) / 1.4 "Times New Roman",
    serif;
  overflow-wrap: anywhere;
}
.transcript p {
  margin: 0 0 10px;
}
.transcript p:last-child {
  margin-bottom: 0;
}
.transcript strong {
  color: #000080;
}
.transcript .visitor-line,
.card-notice {
  color: #c00000;
}
.buddy-away-label {
  font-weight: bold;
}
.card-exchange h3 {
  font:
    bold var(--text-heading) Tahoma,
    Arial,
    sans-serif;
  margin: 18px 0 8px;
}
#card-form-intro {
  line-height: 1.5;
}
#card-form {
  padding: 4px 10px 0;
  border: 2px inset #ddd;
}
.card-exchange label {
  font-family: inherit;
  display: grid;
  gap: 6px;
  margin: 12px 0;
}
.card-exchange input,
.card-exchange textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  font:
    var(--text-body) / 1.4 Arial,
    sans-serif;
}
.card-exchange textarea {
  resize: vertical;
}
.card-exchange details {
  margin: 16px 0;
}
.card-exchange summary {
  cursor: pointer;
  line-height: 1.5;
}
.card-exchange button {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: var(--text-body);
  min-height: 40px;
  white-space: normal;
}
.card-exchange button img {
  vertical-align: middle;
  margin-right: 6px;
}
.card-fine,
#card-expiry {
  font-size: var(--text-small);
  line-height: 1.6;
}
.action-bar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0;
  margin-top: 12px;
}
.send-action {
  display: grid;
  gap: 3px;
  min-width: 100px;
}
.card-profile {
  padding: 12px;
  border: 2px inset #ddd;
  background: #fff;
  margin: 14px 0;
  overflow-wrap: anywhere;
}
.card-profile h2 {
  font:
    bold var(--text-heading) Tahoma,
    Verdana,
    Arial,
    sans-serif;
  margin: 8px 0;
}
.card-profile a {
  display: block;
  margin: 10px 0;
  color: #000080;
}
.card-profile p {
  margin: 8px 0;
}
.card-email {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  background: #fffce0;
  color: #111;
  border: 2px inset #ddd;
  margin: 12px 0;
  font-size: var(--text-small);
  line-height: 1.5;
}
.card-email a {
  color: #000080;
  text-decoration: underline;
}
.progress-status {
  grid-column: 1 / -1;
  text-align: center;
  color: white;
}
.sign-on {
  margin: 40px 0 0 25px;
}
.sign-on ol {
  padding-left: 24px;
  line-height: 2;
}
.buddy-progress-track {
  display: block;
  height: 10px;
  border: 1px inset #888;
  overflow: hidden;
  background: white;
}
.buddy-progress-track > span {
  display: block;
  height: 100%;
  width: 34%;
  background: repeating-linear-gradient(
    90deg,
    #008000 0 6px,
    transparent 6px 8px
  );
  animation: buddy-connect 1.5s linear infinite alternate;
}
@keyframes buddy-connect {
  to {
    transform: translateX(195%);
  }
}
html.reduce-motion .buddy-progress-track > span {
  animation: none;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .buddy-progress-track > span {
    animation: none;
    width: 100%;
  }
}
@media (max-width: 650px) {
  .messenger-desktop {
    --messenger-overlap: 0px;
    display: block;
  }
  .buddy-list {
    min-height: 0;
  }
  .buddy-tree {
    min-height: 45px;
  }
  .buddy-list .buddy-brand {
    padding: 10px;
  }
  .message-window,
  .sign-on {
    margin: 18px 0 0;
  }
  .card-email {
    font-size: var(--text-small);
  }
}
html.high-contrast .messenger-desktop,
html.high-contrast .transcript,
html.high-contrast .card-profile,
html.high-contrast .buddy-tree,
html.high-contrast .buddy-brand {
  background: #000;
  color: #fff;
}
html.high-contrast .transcript strong,
html.high-contrast .visitor-line,
html.high-contrast .card-notice,
html.high-contrast .card-profile a {
  color: #fff;
}
@media (forced-colors: active) {
  .buddy-progress-track > span {
    background: Highlight;
  }
  .pixel-coin {
    border-color: CanvasText;
  }
}
/* Scope the desktop's generic window typography to this application. */
.messenger-desktop .window {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: var(--text-body);
}
.messenger-desktop .window-body {
  padding: 0;
}
html.high-contrast .buddy-progress-track > span {
  background: #000;
}
.home-messenger {
  position: fixed;
  top: 100px;
  left: max(16px, calc((100vw - 850px) / 2));
  width: min(850px, calc(100vw - 32px));
  z-index: 80;
  pointer-events: none;
  max-height: calc(100dvh - var(--taskbar-height, 64px) - 120px);
}
.home-messenger > .window {
  pointer-events: auto;
  max-height: calc(100dvh - var(--taskbar-height, 64px) - 120px);
}
.home-messenger .buddy-list {
  grid-column: 1;
  grid-row: 1;
}
.home-messenger .message-window {
  grid-column: 2;
  grid-row: 1;
  max-height: calc(100dvh - var(--taskbar-height, 64px) - 196px);
}
.home-messenger .window.maximized {
  max-height: none;
}
.card-invitation {
  position: fixed;
  right: 20px;
  bottom: 110px;
  width: min(320px, calc(100vw - 40px));
  z-index: 95;
}
.messenger-desktop .card-invitation .window-body {
  padding: 12px;
}
.card-invitation button {
  min-height: 36px;
}
html.high-contrast .card-email {
  background: white;
  color: black;
}
html.high-contrast .card-email a {
  color: black;
}
.messenger-desktop .title-bar-controls button:disabled {
  opacity: 1;
  cursor: default;
}

.card-exchange h3 {
  font-size: var(--text-heading);
  line-height: 1.4;
}
.card-exchange h3 em {
  text-decoration: underline;
}
.transcript {
  background: #fff;
  font-family: "Comic Sans MS", "Comic Neue", Arial, sans-serif;
  font-size: var(--text-body);
}
.card-email {
  position: relative;
  gap: 14px;
  /* Reserve the same strip covered by the adjacent message window. */
  padding: 18px calc(14px + var(--messenger-overlap)) 18px 14px;
  background:
    linear-gradient(rgb(0 0 0 / 12%), rgb(0 0 0 / 12%)),
    linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-size: var(--text-small);
}
.card-email > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.card-email img {
  image-rendering: pixelated;
  flex-shrink: 0;
}
.card-email strong {
  display: block;
}
.card-email strong {
  line-height: 1.4;
}
.card-email a {
  display: inline-block;
  color: #000;
  background: #c0c0c0;
  border: 2px outset white;
  padding: 5px 10px;
  margin: 10px 0 6px;
  font-weight: bold;
  text-decoration: none;
}

#card-submit {
  min-width: 130px;
  padding: 10px 20px;
  font:
    bold var(--text-body) Tahoma,
    sans-serif;
}
.card-preview-label {
  grid-column: 1 / -1;
  padding: 10px;
  margin: 0 0 12px;
  background: #ffffe1;
  color: #111;
  border: 1px solid #000;
}
@media (max-width: 650px) {
  .card-email {
    padding: 14px 12px;
  }
  .card-email a {
    margin: 5px 8px 0 0;
  }

  .card-invitation {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    margin-top: 16px;
  }
}
html.high-contrast .card-email {
  background: #000;
  color: #fff;
  border-color: #fff;
}
html.high-contrast .card-email a {
  background: #fff;
  color: #000;
}

.card-exchange label,
.card-exchange summary,
.card-exchange input,
.card-exchange textarea {
  font-size: var(--text-body);
}
.card-exchange .card-fine {
  font-size: var(--text-small);
}
.card-title-icon {
  margin-right: 5px;
}
.message-window > .title-bar .title-bar-text {
  flex: 1;
}

.card-invitation button {
  font-size: var(--text-body);
}
#card-greeting.is-typing {
  font-style: italic;
}

.home-messenger::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 38%);
  pointer-events: auto;
  z-index: -1;
}
#card-view .action-bar {
  justify-content: center;
}
#card-download {
  font-weight: bold;
  min-width: 160px;
  padding: 12px 20px;
}

#card-view .action-bar {
  border-top: 0;
}
#card-view {
  border-bottom: 1px solid #888;
  padding-bottom: 12px;
}
#card-expiry {
  text-align: center;
}

@font-face {
  font-family: "Comic Neue";
  src: url("/assets/fonts/ComicNeue-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.messenger-desktop > .buddy-list {
  grid-column: 1;
  grid-row: 1;
}
.messenger-desktop > .message-window,
.messenger-desktop > .sign-on {
  grid-column: 2;
  grid-row: 1;
}
.messenger-desktop:has(.card-preview-label) > .buddy-list,
.messenger-desktop:has(.card-preview-label) > .message-window,
.messenger-desktop:has(.card-preview-label) > .sign-on {
  grid-row: 2;
}
.card-profile {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  min-height: 240px;
  margin: 18px auto;
  padding: 20px;
  background: #fdfdf8;
  border: 1px solid #333;
  border-top: 4px solid #000080;
  box-shadow: 3px 3px #555;
}
.card-profile > p {
  color: #555;
  padding-bottom: 12px;
  border-bottom: 1px solid #000080;
}
.contact-method {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.contact-method img {
  flex: 0 0 16px;
  image-rendering: pixelated;
}
.contact-method a {
  margin: 0;
  min-width: 0;
}
@media (max-width: 650px) {
  .messenger-desktop {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .messenger-desktop > * {
    box-sizing: border-box;
    width: 100%;
  }
  .buddy-list {
    order: 5;
  }
  .message-window,
  .sign-on {
    margin: 0;
  }
  .buddy-list .buddy-tree {
    min-height: 100px;
  }
  .card-profile {
    min-height: 0;
    padding: 16px;
  }
  .card-invitation {
    margin-top: 0;
  }
}
html.high-contrast .card-profile > p {
  color: #fff;
  border-color: #fff;
}
@media (forced-colors: active) {
  .card-email,
  .card-preview-label,
  .card-profile,
  .transcript {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }
  .card-email a,
  .card-profile a {
    color: LinkText;
  }
}

@media (min-width: 651px) {
  .messenger-desktop + .subpage-navigation {
    padding-left: 236px;
  }
}
/* Messenger fields share the subtle native-style focus rectangle. */
.messenger-desktop input:focus,
.messenger-desktop textarea:focus,
.messenger-desktop input:focus-visible,
.messenger-desktop textarea:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}
.transcript {
  background: #fff;
  color: #5a1a48;
}
.card-email {
  background: linear-gradient(135deg, #f1e4cc 0%, #dcc0a0 100%);
  color: #3a2414;
  border: 1px inset #8a6a4a;
}
.buddy-tree img {
  image-rendering: pixelated;
  flex-shrink: 0;
}
html.large-text .buddy-tree img {
  width: 24px;
  height: 24px;
}
.card-profile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 440px;
  /* Printed-card minimum; extra links must grow the card naturally. */
  aspect-ratio: auto;
  min-height: 250px;
  background:
    repeating-linear-gradient(0deg, #00000006 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #00000006 0 1px, transparent 1px 3px),
    #fbf8ef;
  border: 1px solid #bdb4a0;
  color: #1a1a1a;
}
.card-profile > * {
  flex-shrink: 0;
}
.card-profile h2 {
  font-size: calc(var(--text-heading) * 1.2);
  color: #1a1a1a;
}
.card-profile > p {
  color: #5a5a5a;
  font-size: var(--text-small);
  border: 0;
  padding: 0;
}
.card-profile hr {
  width: 48px;
  height: 2px;
  background: #000080;
  border: 0;
  margin: 10px 0;
}
.contact-method {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: baseline;
}
.contact-letter {
  font-size: var(--text-small);
  font-weight: bold;
  color: #000080;
}
.contact-method a {
  color: #1a1a1a;
  text-decoration-color: #000080;
  text-underline-offset: 3px;
}
.contact-method a:hover,
.contact-method a:focus {
  color: #000080;
}
body.messenger-open .site-shell > footer {
  position: relative;
  z-index: 81;
  background: var(--desktop-background, #406c6e);
}
@media (max-width: 650px) {
  .card-profile {
    aspect-ratio: auto;
  }
}
html.high-contrast .transcript,
html.high-contrast .card-profile,
html.high-contrast .card-email {
  background: #000;
  color: #fff;
}
html.high-contrast .card-profile h2,
html.high-contrast .card-profile > p,
html.high-contrast .contact-letter,
html.high-contrast .contact-method a {
  color: #fff;
  text-decoration-color: #fff;
}
html.high-contrast .card-profile hr {
  background: #fff;
}
html.high-contrast .messenger-desktop input:focus,
html.high-contrast .messenger-desktop textarea:focus {
  outline-color: #fff;
}
@media (forced-colors: active) {
  .transcript,
  .card-profile,
  .card-email {
    background: Canvas;
    color: CanvasText;
  }
  .card-profile hr {
    background: CanvasText;
  }
  .contact-method a {
    color: LinkText;
    text-decoration-color: LinkText;
  }
  .messenger-desktop input:focus,
  .messenger-desktop textarea:focus {
    outline-color: CanvasText;
  }
}