/* SpaceGram 2.3 — the look.
   One layer on top of themes.css / base.css / chat.css, loaded last. It does
   not repaint the themes; it changes how every theme is drawn:
   - type: Onest for reading, Unbounded for names of things (brand, chat
     titles, headings) — both self-hosted, the CSP only allows our own fonts;
   - avatars are rounded tiles tinted with their own colour, not glossy balls;
   - the open chat is filled with the theme's accent, unread rows get heavier;
   - accents are flat: the old violet blend under every button made all
     nineteen themes look the same.
   At the end: the new "Poster" theme, the theme picker, the legal sheets and
   the cookie note. */

/* ——— Fonts ——— */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/onest-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/onest-latx.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/onest-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("/fonts/unbounded-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("/fonts/unbounded-latx.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("/fonts/unbounded-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ——— Tokens every theme reads ——— */

:root {
  --font-sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --font-display: "Unbounded", "Onest", "Segoe UI", Roboto, Arial, sans-serif;
  --display-weight: 600;
  --avatar-radius: 32%;
  --row-radius: 16px;
  --row-active-bg: var(--accent);
  --row-active-text: var(--accent-contrast);
  --row-active-muted: color-mix(in srgb, var(--accent-contrast) 74%, transparent);
  --badge-bg: var(--accent);
  --badge-text: var(--accent-contrast);
  --line: 1px;
  --hard-shadow: none;
  --bubble-radius: 18px;
  --bubble-tail: 6px;
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
}

:where(button, input, textarea, select) {
  font-family: inherit;
}

/* names of things */
.brand-name,
.auth-brand > span:last-child,
.auth-mobile-brand > span:last-child,
.auth-aside h1,
.auth-card h2,
.chat-empty h2,
.modal-head h2,
.popover-head h3,
#chat-title,
.legal-head h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
}

.brand-name {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.auth-aside h1 {
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.auth-card h2 {
  font-size: 25px;
  letter-spacing: -0.03em;
}

.chat-empty h2 {
  font-size: 24px;
  letter-spacing: -0.03em;
}

.modal-head h2 {
  font-size: 17px;
  letter-spacing: -0.02em;
}

.popover-head h3 {
  font-size: 14px;
  letter-spacing: -0.01em;
}

#chat-title {
  font-size: 15.5px;
  letter-spacing: -0.02em;
}

/* the default chat backdrop: a sparse sky — sparkles, dust, one ringed planet and a moon */
:root {
  --chat-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 30q0 10 10 10q-10 0-10 10q0-10-10-10q10 0 10-10Z'/%3E%3Cpath d='M228 74q0 7 7 7q-7 0-7 7q0-7-7-7q7 0 7-7Z'/%3E%3Cpath d='M120 196q0 12 12 12q-12 0-12 12q0-12-12-12q12 0 12-12Z'/%3E%3Cpath d='M282 250q0 6 6 6q-6 0-6 6q0-6-6-6q6 0 6-6Z'/%3E%3Ccircle cx='176' cy='128' r='11'/%3E%3Cellipse cx='176' cy='128' rx='22' ry='6' transform='rotate(-20 176 128)'/%3E%3Cpath d='M62 262a14 14 0 1 0 14-18a11 11 0 0 1-14 18Z'/%3E%3Cpath d='M262 158l14-8'/%3E%3Cpath d='M14 140l10-6'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='96' cy='70' r='1.8'/%3E%3Ccircle cx='150' cy='38' r='1.2'/%3E%3Ccircle cx='298' cy='24' r='1.6'/%3E%3Ccircle cx='30' cy='196' r='1.4'/%3E%3Ccircle cx='214' cy='222' r='1.8'/%3E%3Ccircle cx='252' cy='300' r='1.2'/%3E%3Ccircle cx='176' cy='290' r='1.5'/%3E%3Ccircle cx='300' cy='118' r='1.2'/%3E%3Ccircle cx='88' cy='132' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
}

/* ——— Avatars: tinted tiles ——— */

.avatar {
  border-radius: var(--avatar-radius);
  box-shadow: none;
}

.avatar:not(.has-photo):not(.avatar-saved) {
  background-image: none !important;
  background-color: color-mix(in srgb, var(--av, #3b82f6) 20%, var(--surface));
  color: color-mix(in srgb, var(--av, #3b82f6) 82%, var(--text));
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

:root[style*="color-scheme: dark"] .avatar:not(.has-photo):not(.avatar-saved),
[data-theme="black"] .avatar:not(.has-photo):not(.avatar-saved),
[data-theme="midnight"] .avatar:not(.has-photo):not(.avatar-saved),
[data-theme="halloween"] .avatar:not(.has-photo):not(.avatar-saved),
[data-theme="space"] .avatar:not(.has-photo):not(.avatar-saved),
[data-theme="glass"] .avatar:not(.has-photo):not(.avatar-saved) {
  background-color: color-mix(in srgb, var(--av, #3b82f6) 30%, var(--surface));
  color: color-mix(in srgb, var(--av, #3b82f6) 55%, #fff);
}

.avatar-saved {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* ——— Sidebar ——— */

.icon-btn {
  border-radius: 12px;
}

.icon-btn-accent {
  background: var(--accent);
  box-shadow: none;
}

.search {
  height: 42px;
  border-radius: 13px;
  border: var(--line) solid transparent;
}

.search:focus-within {
  box-shadow: none;
}

/* the games row: a quiet ticket in the theme's own colours instead of a
   green slab that belonged to no theme */
.game-invite {
  margin: 0 12px 8px;
  padding: 8px 12px 8px 8px;
  border-radius: var(--row-radius);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
  border: var(--line) solid color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
  box-shadow: var(--hard-shadow);
}

.game-invite:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}

.game-invite-art {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent);
  border: 0;
  color: var(--accent-contrast);
}

.game-invite-art svg {
  width: 32px;
  height: 32px;
}

.game-invite-art svg path {
  stroke: currentColor;
}

.game-invite-text strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.game-invite-text span {
  color: var(--muted);
}

.game-invite-go {
  color: var(--muted);
}

/* ——— The chat list ——— */

.chat-list {
  padding: 2px 8px 10px;
}

.chat-item {
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--row-radius);
  transition: background 0.14s var(--ease);
}

.chat-item:hover {
  transform: none;
}

.chat-item .avatar {
  width: 50px !important;
  height: 50px !important;
}

.chat-item-main {
  gap: 2px;
}

.chat-item-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.chat-item-time {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.chat-item-preview {
  font-size: 13.5px;
}

/* a row with something new reads heavier, the count chip carries the rest */
.chat-item:has(.unread-badge) .chat-item-name {
  font-weight: 750;
}

.chat-item:has(.unread-badge) .chat-item-preview {
  color: var(--text-2);
}

.chat-item:has(.unread-badge) .chat-item-time {
  color: var(--accent);
  font-weight: 650;
}

.unread-badge {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

/* the open chat: filled with the accent, nothing else on the row competes */
.chat-item.is-active,
.chat-item.is-active:hover {
  background: var(--row-active-bg);
}

.chat-item.is-active::before {
  display: none;
}

.chat-item.is-active .chat-item-name,
.chat-item.is-active .chat-item-kind,
.chat-item.is-active .chat-item-kind svg {
  color: var(--row-active-text);
}

.chat-item.is-active .chat-item-preview,
.chat-item.is-active .chat-item-preview .you,
.chat-item.is-active .chat-item-time,
.chat-item.is-active .chat-item-sender {
  color: var(--row-active-muted);
}

.chat-item.is-active .unread-badge {
  background: var(--row-active-text);
  color: var(--row-active-bg);
}

.chat-item.is-active .avatar:not(.has-photo):not(.avatar-saved) {
  background-color: color-mix(in srgb, var(--row-active-text) 22%, transparent);
  color: var(--row-active-text);
}

.chat-item.is-active .avatar-saved {
  background: var(--row-active-text);
  color: var(--row-active-bg);
}

.profile-bar .avatar {
  border-radius: var(--avatar-radius);
}

/* ——— Chat ——— */

.chat-header .avatar {
  border-radius: var(--avatar-radius);
}

.bubble {
  border-radius: var(--bubble-radius);
  border-bottom-left-radius: var(--bubble-tail);
}

.msg-row.out .bubble {
  border-radius: var(--bubble-radius);
  border-bottom-right-radius: var(--bubble-tail);
}

.composer {
  border-radius: 24px;
}

.send-btn {
  border-radius: 16px;
  background: var(--accent);
  box-shadow: none;
}

.btn-primary {
  background: var(--accent);
  box-shadow: none;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.btn-primary:hover {
  box-shadow: none;
}

.empty-badge {
  border-radius: 30%;
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 18px 40px var(--accent-soft);
}

.auth-tab.is-active {
  box-shadow: none;
}

/* ——— Narrow screens: nothing pokes out past the edge ———
   A 1fr grid track cannot shrink below its content, so on a phone browser the
   header (brand + four buttons) and the game row pushed the sidebar wider than
   the screen. The APK had this fixed under html.lg-phone; every narrow screen
   gets the same treatment now. */
@media (max-width: 900px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar,
  .chat-pane,
  .chat-view,
  .chat-list,
  .chat-item,
  .chat-item-main,
  .game-invite,
  .game-invite-text,
  .search,
  .profile-bar,
  .profile-info {
    min-width: 0;
    max-width: 100%;
  }

  .sidebar-header {
    gap: 6px;
    min-width: 0;
    padding-left: calc(14px + var(--lg-edge-left));
    padding-right: calc(10px + var(--lg-edge-right));
  }

  .brand {
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-actions {
    flex: none;
    gap: 4px;
  }

  .sidebar-actions .icon-btn {
    width: 36px;
    height: 36px;
  }

  .search {
    margin-left: 12px;
    margin-right: 12px;
  }

  .game-invite {
    margin-left: 10px;
    margin-right: 10px;
  }

  .game-invite-text span,
  .game-invite-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-header {
    min-width: 0;
    gap: 10px;
    padding-left: calc(12px + var(--lg-edge-left));
    padding-right: calc(10px + var(--lg-edge-right));
  }

  .chat-head-text,
  .chat-head-line {
    min-width: 0;
  }

  /* Unbounded is wide: a phone header keeps the name in the reading face so
     more of it fits before the ellipsis */
  #chat-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .composer-wrap,
  .composer {
    min-width: 0;
    max-width: 100%;
  }

  .msg-wrap {
    max-width: 84%;
  }

  .bubble,
  .bubble-text {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .modal,
  .legal-modal {
    max-width: 100%;
  }

  /* the poster sun is drawn smaller so its orbit stays inside the chat */
  [data-theme="poster"] .chat-pattern::after {
    right: -120px;
    width: 240px;
    height: 240px;
  }

  [data-theme="poster"] .chat-pattern::before {
    right: -170px;
    width: 340px;
    height: 340px;
  }
}

/* ——— Theme picker ——— */

#theme-popover {
  width: min(380px, calc(100vw - var(--lg-edge-inline) - 24px));
  padding: 16px 14px 14px;
}

.theme-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 8px;
}

.theme-option {
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
}

.theme-option:hover,
.theme-option.is-active {
  background: none;
}

/* a tiny window of the theme: its chat background, a reply, your message
   and the send button, plus the theme's own mark */
.theme-mini {
  position: relative;
  width: 100%;
  aspect-ratio: 1.45;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
  transition: transform 0.16s var(--ease), box-shadow 0.16s;
}

.theme-option:hover .theme-mini {
  transform: translateY(-2px);
}

.theme-option.is-active .theme-mini {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

.theme-mini i {
  position: absolute;
  display: block;
  border-radius: 6px;
}

.theme-mini .tm-in {
  left: 9%;
  top: 22%;
  width: 52%;
  height: 20%;
  border-bottom-left-radius: 2px;
}

.theme-mini .tm-out {
  right: 9%;
  top: 50%;
  width: 46%;
  height: 20%;
  border-bottom-right-radius: 2px;
}

.theme-mini .tm-send {
  right: 9%;
  bottom: 9%;
  width: 15%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 35%;
}

.theme-mini .tm-bar {
  left: 9%;
  right: 30%;
  bottom: 9%;
  height: 15%;
  border-radius: 99px;
}

.theme-mini svg {
  position: absolute;
  left: 8%;
  top: 6%;
  width: 14%;
  height: auto;
  opacity: 0.9;
}

.theme-mini .tm-check {
  position: absolute;
  right: 6%;
  top: 6%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-contrast);
}

.theme-mini .tm-check svg {
  position: static;
  width: 68%;
  height: 68%;
  opacity: 1;
}

.theme-option > span:last-child {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  line-height: 1.2;
}

.theme-option.is-active > span:last-child {
  color: var(--text);
  font-weight: 700;
}

/* ——— Terms and cookies ——— */

.legal-consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
  cursor: pointer;
}

.legal-consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.legal-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

.legal-link:hover {
  text-decoration-thickness: 2px;
}

.auth-legal {
  margin: 14px 0 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
}

.auth-legal .legal-link {
  color: var(--muted);
  font-weight: 500;
}

.legal-modal {
  width: min(620px, 100%);
  max-height: min(760px, calc(100dvh - var(--lg-edge-block) - 40px));
}

.legal-head {
  padding: 22px 26px 12px;
  border-bottom: 1px solid var(--border);
}

.legal-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.legal-date {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.legal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 26px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}

.legal-body h3 {
  margin: 20px 0 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.legal-body p {
  margin: 0 0 8px;
  max-width: 68ch;
}

.legal-body p.legal-item {
  position: relative;
  margin: 0 0 4px;
  padding-left: 18px;
}

.legal-body p.legal-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
}

.legal-foot {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px calc(14px + var(--lg-edge-bottom) * 0);
  border-top: 1px solid var(--border);
}

.legal-foot .btn-primary {
  height: 44px;
  padding: 0 26px;
}

.cookie-note {
  position: fixed;
  z-index: 65;
  left: 50%;
  bottom: calc(16px + var(--lg-edge-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100vw - var(--lg-edge-inline) - 24px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  animation: cookie-in 0.32s var(--ease);
}

.cookie-note.is-leaving {
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.2s, transform 0.2s;
}

@keyframes cookie-in {
  from {
    opacity: 0;
    transform: translate(-50%, 14px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.cookie-glyph {
  font-size: 22px;
  line-height: 1;
}

.cookie-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}

.cookie-actions {
  display: flex;
  gap: 6px;
}

.cookie-more,
.cookie-ok {
  height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.cookie-more {
  color: var(--text-2);
  background: var(--surface-2);
}

.cookie-ok {
  background: var(--accent);
  color: var(--accent-contrast);
}

@media (max-width: 560px) {
  .cookie-note {
    grid-template-columns: auto 1fr;
  }

  .cookie-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-note,
  .theme-mini {
    animation: none;
    transition: none;
  }
}

/* ——— Poster ———
   A printed poster pinned to the screen: grid paper, ink-black type and
   outlines, a blazing orange sun with a dashed orbit, a lime sticker for the
   thing you press. Everything casts a hard offset shadow, nothing blurs. */

[data-theme="poster"] {
  color-scheme: light;
  --bg-root: #ece2c6;
  --sidebar-bg: #f5eedb;
  --sidebar-border: #000;
  --surface: #fffaee;
  --surface-2: #efe6cd;
  --input-bg: #fffaee;
  --text: #000;
  --text-2: #24211b;
  --muted: #5f584a;
  --faint: #8c8371;
  --accent: #ff5a1a;
  --accent-strong: #ec4a0c;
  --accent-contrast: #000;
  --accent-soft: rgba(255, 90, 26, 0.2);
  --hover: rgba(0, 0, 0, 0.055);
  --active: #000;
  --border: #000;
  --chat-bg: #f2e9d1;
  --chat-bg-2: #efe4c8;
  --bubble-in: #fffaee;
  --bubble-in-text: #000;
  --bubble-out: #d4ff3a;
  --bubble-out-text: #000;
  --bubble-shadow: 3px 3px 0 #000;
  --time-in: rgba(0, 0, 0, 0.55);
  --time-out: rgba(0, 0, 0, 0.6);
  --pattern-color: #000;
  --pattern-opacity: 0;
  --danger: #e0201b;
  --danger-soft: rgba(224, 32, 27, 0.12);
  --overlay: rgba(28, 22, 8, 0.42);
  --scrollbar: rgba(0, 0, 0, 0.35);
  --shadow-lg: 8px 8px 0 #000;
  --shadow-sm: 3px 3px 0 #000;
  --auth-g1: #ff5a1a;
  --auth-g2: #ff5a1a;
  --auth-g3: #ff7a2e;

  --display-weight: 800;
  --avatar-radius: 24%;
  --row-radius: 12px;
  --row-active-bg: #000;
  --row-active-text: #f5eedb;
  --row-active-muted: rgba(245, 238, 219, 0.72);
  --badge-bg: #ff5a1a;
  --badge-text: #000;
  --line: 2px;
  --hard-shadow: 3px 3px 0 #000;
  --bubble-radius: 14px;
  --bubble-tail: 3px;
  --paper-grid:
    linear-gradient(rgba(0, 0, 0, 0.075) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.075) 1px, transparent 1px) 0 0 / 28px 28px;
}

[data-theme="poster"] body,
[data-theme="poster"] .app {
  background: var(--bg-root);
}

[data-theme="poster"] .sidebar {
  background: var(--paper-grid), var(--sidebar-bg);
  border-right: 2px solid #000;
}

[data-theme="poster"] .brand-name {
  font-size: 19px;
  letter-spacing: -0.04em;
}

[data-theme="poster"] .logo {
  background: #ff5a1a;
  color: #000;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
}

[data-theme="poster"] .icon-btn {
  border: 2px solid transparent;
}

[data-theme="poster"] .icon-btn:hover {
  border-color: #000;
  background: #fffaee;
}

[data-theme="poster"] .icon-btn-accent,
[data-theme="poster"] .icon-btn-accent:hover {
  background: #d4ff3a;
  color: #000;
  border-color: #000;
  box-shadow: 2px 2px 0 #000;
}

[data-theme="poster"] .icon-btn-accent:active,
[data-theme="poster"] .send-btn:active,
[data-theme="poster"] .btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 #000;
}

[data-theme="poster"] .search {
  border: 2px solid #000;
  background: #fffaee;
}

[data-theme="poster"] .search:focus-within {
  border-color: #000;
  box-shadow: 3px 3px 0 #000;
}

[data-theme="poster"] .search input::placeholder {
  color: #6f6757;
}

[data-theme="poster"] .game-invite {
  background: #d4ff3a;
  border: 2px solid #000;
}

[data-theme="poster"] .game-invite:hover {
  background: #c8f52a;
}

[data-theme="poster"] .game-invite-art {
  background: #000;
  color: #d4ff3a;
}

[data-theme="poster"] .game-invite-text strong {
  font-weight: 800;
  font-size: 13.5px;
}

[data-theme="poster"] .game-invite-text span,
[data-theme="poster"] .game-invite-go {
  color: #2a2a12;
}

[data-theme="poster"] .chat-item {
  border: 2px solid transparent;
}

[data-theme="poster"] .chat-item:hover {
  background: #fffaee;
  border-color: #000;
}

[data-theme="poster"] .chat-item.is-active,
[data-theme="poster"] .chat-item.is-active:hover {
  border-color: #000;
  box-shadow: 3px 3px 0 #ff5a1a;
}

[data-theme="poster"] .chat-item-name {
  font-weight: 700;
}

[data-theme="poster"] .chat-item:has(.unread-badge) .chat-item-time {
  color: #000;
}

[data-theme="poster"] .unread-badge {
  border: 2px solid #000;
  border-radius: 6px;
  height: 22px;
  font-weight: 800;
}

[data-theme="poster"] .chat-item.is-active .unread-badge {
  background: #ff5a1a;
  color: #000;
  border-color: #f5eedb;
}

[data-theme="poster"] .avatar {
  outline: 2px solid #000;
  outline-offset: -2px;
}

[data-theme="poster"] .avatar:not(.has-photo):not(.avatar-saved) {
  background-color: color-mix(in srgb, var(--av, #ff5a1a) 34%, #fffaee);
  color: #000;
  font-weight: 800;
}

[data-theme="poster"] .chat-item.is-active .avatar {
  outline-color: #f5eedb;
}

[data-theme="poster"] .chat-item.is-active .avatar:not(.has-photo):not(.avatar-saved) {
  background-color: #ff5a1a;
  color: #000;
}

[data-theme="poster"] .profile-bar {
  border-top: 2px solid #000;
  background: #f5eedb;
}

[data-theme="poster"] .chat-header,
[data-theme="poster"] .pinned-bar {
  background: #f5eedb;
  backdrop-filter: none;
  border-bottom: 2px solid #000;
}

[data-theme="poster"] #chat-title {
  font-weight: 800;
  font-size: 16px;
}

/* the chat: grid paper with the sun and its orbit in the lower right */
[data-theme="poster"] .chat-body {
  background: var(--paper-grid), var(--chat-bg);
}

[data-theme="poster"] .chat-pattern {
  opacity: 1;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
}

[data-theme="poster"] .chat-pattern::before,
[data-theme="poster"] .chat-pattern::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

[data-theme="poster"] .chat-pattern::after {
  right: -90px;
  bottom: 70px;
  width: 300px;
  height: 300px;
  background: #ff5a1a;
  opacity: 0.92;
}

[data-theme="poster"] .chat-pattern::before {
  right: -150px;
  bottom: 10px;
  width: 420px;
  height: 420px;
  border: 2px dashed rgba(0, 0, 0, 0.55);
}

[data-theme="poster"] .bubble {
  border: 2px solid #000;
}

[data-theme="poster"] .day-chip {
  background: #000;
  color: #f5eedb;
  border-radius: 6px;
  font-weight: 700;
  box-shadow: none;
  backdrop-filter: none;
}

[data-theme="poster"] .msg-row.out .bubble {
  border-color: #000;
}

[data-theme="poster"] .composer {
  border: 2px solid #000;
  border-radius: 16px;
  box-shadow: 4px 4px 0 #000;
  background: #fffaee;
}

[data-theme="poster"] .composer:focus-within {
  border-color: #000;
  box-shadow: 4px 4px 0 #ff5a1a;
}

[data-theme="poster"] .send-btn {
  background: #d4ff3a;
  color: #000;
  border: 2px solid #000;
  border-radius: 12px;
  box-shadow: 2px 2px 0 #000;
}

[data-theme="poster"] .send-btn:disabled {
  background: #efe6cd;
  box-shadow: none;
}

[data-theme="poster"] .btn-primary {
  background: #d4ff3a;
  color: #000;
  border: 2px solid #000;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #000;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}

[data-theme="poster"] .btn-secondary {
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  background: #fffaee;
  color: #000;
}

/* the empty chat is the poster itself */
[data-theme="poster"] .chat-empty {
  position: relative;
  overflow: hidden;
  background: var(--paper-grid), var(--chat-bg);
}

[data-theme="poster"] .chat-empty::before {
  content: "";
  position: absolute;
  right: 6%;
  top: 12%;
  width: min(42vw, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff5a1a;
}

[data-theme="poster"] .chat-empty::after {
  content: "";
  position: absolute;
  right: calc(6% - 40px);
  top: calc(12% - 40px);
  width: calc(min(42vw, 380px) + 80px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(0, 0, 0, 0.6);
}

[data-theme="poster"] .chat-empty > * {
  position: relative;
  z-index: 1;
}

[data-theme="poster"] .chat-empty h2 {
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.05em;
  max-width: 9em;
  margin-bottom: 14px;
}

[data-theme="poster"] .chat-empty p {
  font-size: 14px;
  color: #24211b;
  background: #fffaee;
  border: 2px solid #000;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #000;
}

[data-theme="poster"] .empty-badge {
  background: #d4ff3a;
  color: #000;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  border-radius: 18px;
}

[data-theme="poster"] .chat-empty kbd {
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  background: #d4ff3a;
  color: #000;
}

/* popovers and sheets: paper cards with a hard shadow */
[data-theme="poster"] #theme-popover,
[data-theme="poster"] #lang-popover,
[data-theme="poster"] #context-menu,
[data-theme="poster"] .modal,
[data-theme="poster"] .cookie-note {
  border: 2px solid #000;
  box-shadow: 6px 6px 0 #000;
}

[data-theme="poster"] .modal-backdrop {
  backdrop-filter: none;
}

[data-theme="poster"] .theme-option.is-active .theme-mini {
  box-shadow: 0 0 0 2px #000, 3px 3px 0 2px #000;
}

[data-theme="poster"] .cookie-ok {
  background: #d4ff3a;
  color: #000;
  border: 2px solid #000;
}

[data-theme="poster"] .cookie-more {
  border: 2px solid #000;
  background: #fffaee;
}

/* sign-in: the left half is the poster, the form a pinned card */
[data-theme="poster"] .auth-screen {
  background: var(--paper-grid), #f2e9d1;
}

[data-theme="poster"] .auth-aside {
  color: #000;
  background: var(--paper-grid), #f2e9d1;
  border-right: 2px solid #000;
}

[data-theme="poster"] .auth-aside::before {
  background: #ff5a1a;
  background-image: none;
  opacity: 1;
  inset: auto -12% -18% auto;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
}

[data-theme="poster"] .auth-aside h1 {
  font-weight: 900;
  font-size: clamp(40px, 5vw, 76px);
  letter-spacing: -0.055em;
  line-height: 0.95;
}

[data-theme="poster"] .auth-lead,
[data-theme="poster"] .auth-points {
  color: #24211b;
}

[data-theme="poster"] .point-check {
  background: #000;
  color: #d4ff3a;
  border: 0;
}

[data-theme="poster"] .art-ring {
  border-color: rgba(0, 0, 0, 0.45);
  border-style: dashed;
}

[data-theme="poster"] .art-chip {
  background: #fffaee;
  color: #000;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  backdrop-filter: none;
}

[data-theme="poster"] .auth-card {
  border: 2px solid #000;
  box-shadow: 8px 8px 0 #000;
  border-radius: 18px;
}

[data-theme="poster"] .auth-tabs {
  background: #efe6cd;
  border: 2px solid #000;
  border-radius: 12px;
}

[data-theme="poster"] .auth-tab.is-active {
  background: #000;
  color: #f5eedb;
}

[data-theme="poster"] .field input {
  border: 2px solid #000;
  border-radius: 10px;
}

[data-theme="poster"] .field input:focus {
  box-shadow: 3px 3px 0 #ff5a1a;
}

[data-theme="poster"] .legal-link {
  color: #000;
  text-decoration-color: #ff5a1a;
  text-decoration-thickness: 2px;
}

/* ——— Colour pairs ———
   Three themes made of exactly two colours, like a printed colour card: the
   chat list is one colour with the other as ink, the chat is the second colour
   with the first as ink. Type is heavy and lowercase, structure is hairlines,
   corners are almost square. Each theme only sets its two colours:
   --pa  the light / loud half (chat list), --pb  the deep half (chat);
   --pa-ink  --pa when used as text on --pb (a touch brighter if it has to be),
   --pb-ink  --pb when used as text on --pa. */

[data-theme="pair-ash"] {
  --pa: #d9d9d9;
  --pb: #121a3a;
  --pa-ink: #d9d9d9;
  --pb-ink: #121a3a;
}

[data-theme="pair-scarlet"] {
  /* #D00000 is a touch too dark under black text (3.7:1); this red reads at 4.5:1 */
  --pa: #e81414;
  --pb: #000000;
  --pa-ink: #ff3030;
  --pb-ink: #000000;
}

[data-theme="pair-mustard"] {
  --pa: #e3b23c;
  --pb: #0f3b2e;
  --pa-ink: #ebbd52;
  --pb-ink: #0f3b2e;
}

/* the light half: also what sheets, popovers and the sign-in card wear */
[data-theme^="pair-"] {
  color-scheme: light;
  --bg-root: var(--pb);
  --sidebar-bg: var(--pa);
  --sidebar-border: var(--pb-ink);
  --surface: var(--pa);
  --surface-2: color-mix(in srgb, var(--pb-ink) 9%, var(--pa));
  --input-bg: color-mix(in srgb, var(--pb-ink) 7%, var(--pa));
  --text: var(--pb-ink);
  --text-2: color-mix(in srgb, var(--pb-ink) 86%, var(--pa));
  --muted: color-mix(in srgb, var(--pb-ink) 66%, var(--pa));
  --faint: color-mix(in srgb, var(--pb-ink) 48%, var(--pa));
  --accent: var(--pb-ink);
  --accent-strong: var(--pb-ink);
  --accent-contrast: var(--pa);
  --accent-soft: color-mix(in srgb, var(--pb-ink) 14%, transparent);
  --hover: color-mix(in srgb, var(--pb-ink) 7%, transparent);
  --active: var(--pb);
  --border: color-mix(in srgb, var(--pb-ink) 28%, var(--pa));
  --chat-bg: var(--pb);
  --chat-bg-2: var(--pb);
  --bubble-in: color-mix(in srgb, var(--pa-ink) 12%, var(--pb));
  --bubble-in-text: var(--pa-ink);
  --bubble-out: var(--pa);
  --bubble-out-text: var(--pb-ink);
  --bubble-shadow: none;
  --time-in: color-mix(in srgb, var(--pa-ink) 60%, var(--pb));
  --time-out: color-mix(in srgb, var(--pb-ink) 66%, var(--pa));
  --pattern-opacity: 0;
  --danger: var(--pb-ink);
  --danger-soft: color-mix(in srgb, var(--pb-ink) 12%, transparent);
  --overlay: color-mix(in srgb, var(--pb) 70%, transparent);
  --scrollbar: color-mix(in srgb, var(--pb-ink) 30%, transparent);
  --shadow-lg: none;
  --shadow-sm: none;
  --auth-g1: var(--pb);
  --auth-g2: var(--pb);
  --auth-g3: var(--pb);

  --display-weight: 900;
  --avatar-radius: 6px;
  --row-radius: 0;
  --row-active-bg: var(--pb);
  --row-active-text: var(--pa-ink);
  --row-active-muted: color-mix(in srgb, var(--pa-ink) 68%, var(--pb));
  --badge-bg: var(--pb);
  --badge-text: var(--pa);
  --bubble-radius: 4px;
  --bubble-tail: 0;
  --hair: 1.5px solid var(--pb-ink);
}

/* the deep half: everything inside the chat reads the colours the other way */
[data-theme^="pair-"] .chat-pane {
  color-scheme: dark;
  --surface: var(--pb);
  --surface-2: color-mix(in srgb, var(--pa-ink) 10%, var(--pb));
  --input-bg: color-mix(in srgb, var(--pa-ink) 8%, var(--pb));
  --text: var(--pa-ink);
  --text-2: color-mix(in srgb, var(--pa-ink) 86%, var(--pb));
  --muted: color-mix(in srgb, var(--pa-ink) 64%, var(--pb));
  --faint: color-mix(in srgb, var(--pa-ink) 46%, var(--pb));
  --accent: var(--pa-ink);
  --accent-strong: var(--pa-ink);
  --accent-contrast: var(--pb);
  --accent-soft: color-mix(in srgb, var(--pa-ink) 16%, transparent);
  --hover: color-mix(in srgb, var(--pa-ink) 8%, transparent);
  --border: color-mix(in srgb, var(--pa-ink) 30%, var(--pb));
  --sidebar-border: var(--pa-ink);
  --hair: 1.5px solid var(--pa-ink);
  color: var(--text);
}

[data-theme^="pair-"] body {
  background: var(--pb);
}

/* the chat list */
[data-theme^="pair-"] .sidebar {
  background: var(--pa);
  color: var(--pb-ink);
  border-right: 0;
}

[data-theme^="pair-"] .brand-name,
[data-theme^="pair-"] #chat-title,
[data-theme^="pair-"] .chat-empty h2,
[data-theme^="pair-"] .auth-aside h1,
[data-theme^="pair-"] .auth-card h2,
[data-theme^="pair-"] .legal-head h2,
[data-theme^="pair-"] .modal-head h2 {
  text-transform: lowercase;
  letter-spacing: -0.045em;
}

[data-theme^="pair-"] .brand-name {
  font-size: 21px;
}

[data-theme^="pair-"] .logo {
  background: var(--pb);
  color: var(--pa-ink);
  border-radius: 6px;
  box-shadow: none;
}

[data-theme^="pair-"] .icon-btn {
  border-radius: 6px;
  color: var(--pb-ink);
}

[data-theme^="pair-"] .icon-btn-accent,
[data-theme^="pair-"] .icon-btn-accent:hover {
  background: var(--pb);
  color: var(--pa-ink);
}

[data-theme^="pair-"] .search {
  background: transparent;
  border: 0;
  border-bottom: var(--hair);
  border-radius: 0;
  margin-top: 0;
  padding-left: 2px;
}

[data-theme^="pair-"] .search:focus-within {
  background: transparent;
  border-color: var(--pb-ink);
  border-bottom-width: 3px;
}

[data-theme^="pair-"] .search svg,
[data-theme^="pair-"] .search input::placeholder {
  color: var(--muted);
}

[data-theme^="pair-"] .game-invite {
  background: var(--pb);
  color: var(--pa-ink);
  border: 0;
  border-radius: 0;
}

[data-theme^="pair-"] .game-invite:hover {
  background: color-mix(in srgb, var(--pa-ink) 8%, var(--pb));
}

[data-theme^="pair-"] .game-invite-art {
  background: var(--pa);
  color: var(--pb-ink);
  border-radius: 4px;
}

[data-theme^="pair-"] .game-invite-text strong {
  font-weight: 900;
  text-transform: lowercase;
  letter-spacing: -0.03em;
}

[data-theme^="pair-"] .game-invite-text span,
[data-theme^="pair-"] .game-invite-go {
  color: color-mix(in srgb, var(--pa-ink) 70%, var(--pb));
}

/* rows are lines on the card, not tiles */
[data-theme^="pair-"] .chat-list {
  padding: 0 0 10px;
}

[data-theme^="pair-"] .chat-item {
  padding: 11px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--pb-ink) 22%, var(--pa));
}

[data-theme^="pair-"] .chat-item:hover {
  background: color-mix(in srgb, var(--pb-ink) 7%, var(--pa));
}

[data-theme^="pair-"] .chat-item.is-active,
[data-theme^="pair-"] .chat-item.is-active:hover {
  border-bottom-color: var(--pb);
}

[data-theme^="pair-"] .chat-item:has(.unread-badge) .chat-item-time {
  color: var(--pb-ink);
}

[data-theme^="pair-"] .chat-item.is-active .chat-item-time {
  color: var(--row-active-muted);
}

[data-theme^="pair-"] .unread-badge {
  border-radius: 3px;
  font-weight: 800;
}

[data-theme^="pair-"] .chat-item.is-active .unread-badge {
  background: var(--pa);
  color: var(--pb-ink);
}

/* avatars: one colour of the pair on the other, nothing else */
[data-theme^="pair-"] .avatar:not(.has-photo):not(.avatar-saved) {
  background-color: var(--pb);
  color: var(--pa-ink);
  font-weight: 800;
}

[data-theme^="pair-"] .avatar-saved {
  background: var(--pb);
  color: var(--pa-ink);
}

[data-theme^="pair-"] .chat-item.is-active .avatar:not(.has-photo):not(.avatar-saved),
[data-theme^="pair-"] .chat-item.is-active .avatar-saved,
[data-theme^="pair-"] .chat-pane .avatar:not(.has-photo):not(.avatar-saved),
[data-theme^="pair-"] .chat-pane .avatar-saved {
  background-color: var(--pa);
  color: var(--pb-ink);
}

[data-theme^="pair-"] .profile-bar {
  border-top: var(--hair);
}

/* the chat */
[data-theme^="pair-"] .chat-pane,
[data-theme^="pair-"] .chat-body {
  background: var(--pb);
}

[data-theme^="pair-"] .chat-header,
[data-theme^="pair-"] .pinned-bar {
  background: var(--pb);
  backdrop-filter: none;
  border-bottom: var(--hair);
}

[data-theme^="pair-"] #chat-title {
  font-size: 18px;
}

[data-theme^="pair-"] .chat-head-text p,
[data-theme^="pair-"] .chat-pane .icon-btn {
  color: var(--muted);
}

[data-theme^="pair-"] .chat-pane .icon-btn:hover {
  color: var(--pa-ink);
}

[data-theme^="pair-"] .bubble {
  box-shadow: none;
}

[data-theme^="pair-"] .msg-row.out .bubble .bubble-link,
[data-theme^="pair-"] .msg-row.out .bubble a {
  color: var(--pb-ink);
}

[data-theme^="pair-"] .day-chip {
  background: transparent;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--pa-ink) 36%, var(--pb));
  border-radius: 3px;
  backdrop-filter: none;
  box-shadow: none;
  text-transform: lowercase;
}

[data-theme^="pair-"] .composer {
  background: var(--pb);
  border: var(--hair);
  border-radius: 6px;
  box-shadow: none;
}

[data-theme^="pair-"] .composer:focus-within {
  border-color: var(--pa-ink);
  box-shadow: inset 0 0 0 1px var(--pa-ink);
}

[data-theme^="pair-"] .send-btn {
  background: var(--pa);
  color: var(--pb-ink);
  border-radius: 4px;
}

[data-theme^="pair-"] .send-btn:disabled {
  background: color-mix(in srgb, var(--pa-ink) 18%, var(--pb));
  color: var(--muted);
}

/* the empty chat is the colour card itself: a rule, the code, a huge word */
[data-theme^="pair-"] .chat-empty {
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: 48px clamp(24px, 6vw, 72px) 64px;
  background: var(--pb);
  position: relative;
}

[data-theme^="pair-"] .chat-empty::before {
  content: "";
  position: absolute;
  left: clamp(24px, 6vw, 72px);
  right: clamp(24px, 6vw, 72px);
  top: 44px;
  border-top: 1.5px solid var(--pa-ink);
}

[data-theme^="pair-"] .chat-empty::after {
  position: absolute;
  left: clamp(24px, 6vw, 72px);
  top: 58px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--pa-ink) 70%, var(--pb));
}

[data-theme="pair-ash"] .chat-empty::after {
  content: "#D9D9D9 + #121A3A";
}

[data-theme="pair-scarlet"] .chat-empty::after {
  content: "#E81414 + #000000";
}

[data-theme="pair-mustard"] .chat-empty::after {
  content: "#E3B23C + #0F3B2E";
}

[data-theme^="pair-"] .empty-badge {
  background: var(--pa);
  color: var(--pb-ink);
  border-radius: 6px;
  box-shadow: none;
  width: 64px;
  height: 64px;
  margin-bottom: 28px;
}

[data-theme^="pair-"] .empty-badge svg {
  width: 30px;
  height: 30px;
}

[data-theme^="pair-"] .chat-empty h2 {
  color: var(--pa-ink);
  font-size: clamp(36px, 6.4vw, 92px);
  line-height: 0.92;
  max-width: 8.5em;
  margin: 0 0 22px;
}

[data-theme^="pair-"] .chat-empty p {
  color: color-mix(in srgb, var(--pa-ink) 72%, var(--pb));
  padding-top: 14px;
  border-top: 1.5px solid var(--pa-ink);
  max-width: 460px;
}

[data-theme^="pair-"] .chat-empty kbd {
  background: var(--pa);
  color: var(--pb-ink);
  border: 0;
  border-radius: 3px;
  box-shadow: none;
}

/* sheets, popovers, buttons */
[data-theme^="pair-"] #theme-popover,
[data-theme^="pair-"] #lang-popover,
[data-theme^="pair-"] #context-menu,
[data-theme^="pair-"] .modal,
[data-theme^="pair-"] .cookie-note {
  background: var(--pa);
  color: var(--pb-ink);
  border: var(--hair);
  border-radius: 6px;
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--pb) 55%, transparent);
}

[data-theme^="pair-"] .modal-backdrop {
  backdrop-filter: none;
}

[data-theme^="pair-"] .btn-primary {
  background: var(--pb);
  color: var(--pa-ink);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: -0.02em;
}

[data-theme^="pair-"] .btn-secondary {
  background: transparent;
  color: var(--pb-ink);
  border: var(--hair);
  border-radius: 4px;
}

[data-theme^="pair-"] .cookie-ok {
  background: var(--pb);
  color: var(--pa-ink);
  border-radius: 4px;
}

[data-theme^="pair-"] .cookie-more {
  background: transparent;
  border: var(--hair);
  border-radius: 4px;
  color: var(--pb-ink);
}

[data-theme^="pair-"] .theme-option.is-active .theme-mini {
  box-shadow: 0 0 0 2px var(--pa), 0 0 0 4px var(--pb-ink);
}

[data-theme^="pair-"] .legal-link {
  color: var(--pb-ink);
}

/* sign-in: the deep half carries the headline, the light half the form */
[data-theme^="pair-"] .auth-screen {
  background: var(--pa);
}

[data-theme^="pair-"] .auth-aside {
  background: var(--pb);
  color: var(--pa-ink);
}

[data-theme^="pair-"] .auth-aside::before {
  background: none;
  inset: auto 64px 56px 64px;
  height: 0;
  border-top: 1.5px solid var(--pa-ink);
  opacity: 1;
}

[data-theme^="pair-"] .auth-aside h1 {
  font-size: clamp(42px, 5.4vw, 84px);
  line-height: 0.92;
}

[data-theme^="pair-"] .auth-lead,
[data-theme^="pair-"] .auth-points {
  color: color-mix(in srgb, var(--pa-ink) 78%, var(--pb));
}

[data-theme^="pair-"] .point-check {
  background: var(--pa);
  color: var(--pb-ink);
  border-radius: 3px;
}

[data-theme^="pair-"] .auth-art {
  display: none;
}

[data-theme^="pair-"] .auth-card {
  background: var(--pa);
  border: 0;
  border-top: 3px solid var(--pb-ink);
  border-radius: 0;
  box-shadow: none;
}

[data-theme^="pair-"] .auth-tabs {
  background: transparent;
  border: var(--hair);
  border-radius: 4px;
}

[data-theme^="pair-"] .auth-tab {
  border-radius: 2px;
}

[data-theme^="pair-"] .auth-tab.is-active {
  background: var(--pb);
  color: var(--pa-ink);
}

[data-theme^="pair-"] .field input {
  background: transparent;
  border: 0;
  border-bottom: var(--hair);
  border-radius: 0;
  padding-left: 2px;
}

[data-theme^="pair-"] .field-control .at {
  left: 2px;
}

[data-theme^="pair-"] .field-control input {
  padding-left: 20px;
}

[data-theme^="pair-"] .field input:focus {
  background: transparent;
  box-shadow: inset 0 -1.5px 0 var(--pb-ink);
}

[data-theme^="pair-"] .form-error {
  background: var(--pb);
  color: var(--pa-ink);
  border-radius: 3px;
}

@media (max-width: 900px) {
  [data-theme^="pair-"] .chat-empty::before,
  [data-theme^="pair-"] .chat-empty::after {
    left: 24px;
    right: 24px;
  }
}

/* the picker's little card for a colour pair */
.theme-mini.is-pair .tm-line {
  left: 8%;
  width: 22%;
  top: 30%;
  height: 7%;
  border-radius: 1px;
  box-shadow: 0 9px 0 0 currentColor;
}

.theme-mini.is-pair .tm-in {
  left: 45%;
  width: 36%;
  top: 22%;
  border-radius: 2px;
}

.theme-mini.is-pair .tm-out {
  left: auto;
  right: 8%;
  width: 34%;
  top: 50%;
  border-radius: 2px;
}

.theme-mini.is-pair .tm-send {
  border-radius: 2px;
}

/* the red half keeps its secondary text near-black: grey on red is unreadable */
[data-theme="pair-scarlet"] .sidebar,
[data-theme="pair-scarlet"] .modal,
[data-theme="pair-scarlet"] #theme-popover,
[data-theme="pair-scarlet"] .auth-card {
  --text-2: #000;
  --muted: #1c0000;
  --faint: #3a0000;
}