/* Final medieval skin pass.
   Keep this file late in the cascade so the theme can own the full shell. */

html[data-theme="mideval"] {
  --font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  font-size-adjust: 0.58;

  --lch-black: 93% 0.035 84;
  --lch-white: 8% 0.03 55;
  --lch-gray: 17% 0.045 58;
  --lch-gray-dark: 25% 0.055 62;
  --lch-gray-darker: 45% 0.075 70;
  --lch-blue: 78% 0.11 84;
  --lch-blue-light: 27% 0.075 66;
  --lch-blue-dark: 47% 0.105 70;
  --lch-orange: 68% 0.12 78;
  --lch-red: 66% 0.16 30;
  --lch-green: 69% 0.13 145;

  --mideval-ink: oklch(13% 0.035 62);
  --mideval-ink-soft: oklch(25% 0.04 65);
  --mideval-ink-muted: oklch(36% 0.045 68);
  --mideval-parchment: oklch(84% 0.055 82);
  --mideval-parchment-light: oklch(93% 0.035 86);
  --mideval-parchment-edge: oklch(49% 0.075 70);
  --mideval-wood: oklch(17% 0.052 58);
  --mideval-wood-dark: oklch(9% 0.04 55);
  --mideval-wood-black: oklch(6% 0.028 55);
  --mideval-oak: oklch(42% 0.085 64);
  --mideval-brass: oklch(68% 0.12 78);
  --mideval-brass-bright: oklch(78% 0.11 84);
  --mideval-brass-dark: oklch(47% 0.105 70);
  --mideval-garnet: oklch(42% 0.13 30);

  --color-bg: var(--mideval-wood-dark);
  --color-message-bg: var(--mideval-parchment);
  --color-text: var(--mideval-parchment-light);
  --color-text-reversed: var(--mideval-wood-black);
  --color-border: oklch(35% 0.055 66);
  --color-border-dark: oklch(25% 0.05 62);
  --color-border-darker: oklch(47% 0.075 70);
  --color-link: var(--mideval-brass-bright);
  --color-selected: oklch(30% 0.085 68);
  --color-selected-dark: var(--mideval-brass-dark);
  --color-alert: var(--mideval-brass);
  --hover-color: var(--mideval-brass);
  --hover-size: 0.12em;

  --icon-filter-black: invert(78%) sepia(28%) saturate(520%) hue-rotate(6deg) brightness(92%) contrast(92%);
  --icon-filter-white: invert(88%) sepia(12%) saturate(400%) hue-rotate(12deg) brightness(96%) contrast(95%);
  --btn-icon-filter: var(--icon-filter-black);
  --btn-icon-filter-dark: brightness(0) saturate(100%) invert(12%) sepia(20%) saturate(300%) hue-rotate(20deg) brightness(90%) contrast(95%);

  --mideval-paper-image:
    linear-gradient(180deg, oklch(94% 0.03 86 / 0.88), oklch(75% 0.06 77 / 0.9)),
    radial-gradient(140% 110% at 12% -8%, oklch(98% 0.025 90 / 0.34), transparent 58%),
    radial-gradient(120% 100% at 88% 112%, oklch(55% 0.06 68 / 0.22), transparent 62%),
    repeating-linear-gradient(34deg, oklch(96% 0.02 86 / 0.11) 0 2px, transparent 2px 7px);
  --mideval-table-image:
    linear-gradient(180deg, oklch(59% 0.08 70), oklch(48% 0.08 66)),
    radial-gradient(130% 120% at 8% -10%, oklch(75% 0.1 78 / 0.34), transparent 58%),
    radial-gradient(140% 110% at 90% 110%, oklch(31% 0.06 58 / 0.28), transparent 62%),
    repeating-linear-gradient(34deg, oklch(100% 0 0 / 0.035) 0 2px, transparent 2px 8px);
  --mideval-menu-image:
    linear-gradient(180deg, oklch(15% 0.045 58), oklch(8% 0.035 55)),
    radial-gradient(120% 85% at 12% 0%, oklch(27% 0.065 62 / 0.5), transparent 58%),
    radial-gradient(120% 90% at 90% 100%, oklch(5% 0.02 55 / 0.72), transparent 62%),
    repeating-linear-gradient(90deg, oklch(100% 0 0 / 0.026) 0 1px, transparent 1px 18px);
  --mideval-carved-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.12),
    inset 0 -1px 0 oklch(0% 0 0 / 0.5),
    0 2px 4px oklch(0% 0 0 / 0.38);
}

html[data-theme="mideval"] body {
  background: var(--mideval-wood-dark);
}

html[data-theme="mideval"] .btn {
  --btn-background: var(--mideval-wood);
  --btn-border-color: var(--mideval-brass-dark);
  --btn-color: var(--mideval-parchment-light);
  --btn-icon-filter: var(--icon-filter-black);
  --hover-color: var(--mideval-brass);
  --hover-filter: brightness(1.05);

  background-color: var(--btn-background);
  background-image:
    linear-gradient(180deg, oklch(20% 0.052 58 / 0.94), oklch(8% 0.03 55 / 0.98));
  border-color: var(--btn-border-color);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.1),
    inset 0 -1px 0 oklch(0% 0 0 / 0.52),
    0 1px 2px oklch(0% 0 0 / 0.34);
  color: var(--btn-color);
}

html[data-theme="mideval"] .btn--plain,
html[data-theme="mideval"] .btn--borderless,
html[data-theme="mideval"] .btn.avatar {
  --btn-background: transparent;
  --btn-border-color: transparent;

  background-image: none;
  box-shadow: none;
}

html[data-theme="mideval"] .btn--reversed {
  --btn-background: var(--mideval-brass);
  --btn-border-color: var(--mideval-brass-dark);
  --btn-color: var(--mideval-ink);
  --btn-icon-filter: var(--btn-icon-filter-dark);

  background-image: var(--mideval-paper-image);
  background-blend-mode: multiply;
}

html[data-theme="mideval"] .input:not(.input--transparent):not(.input--invisible):not([type="file"]),
html[data-theme="mideval"] .input--actor {
  --input-background: oklch(86% 0.048 83 / 0.98);
  --input-color: var(--mideval-ink);
  --input-border-color: oklch(49% 0.075 70 / 0.48);

  background-color: var(--input-background);
  background-image: var(--mideval-paper-image);
  background-blend-mode: multiply;
  border-color: var(--input-border-color);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.18);
  color: var(--input-color);
}

html[data-theme="mideval"] .input--actor .input,
html[data-theme="mideval"] .input--file input[type="file"] {
  --input-background: transparent;

  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

html[data-theme="mideval"] .input.fill-white {
  background-color: var(--input-background);
}

html[data-theme="mideval"] .input:autofill,
html[data-theme="mideval"] .input:-webkit-autofill,
html[data-theme="mideval"] .input:-webkit-autofill:hover,
html[data-theme="mideval"] .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mideval-ink);
  -webkit-box-shadow: 0 0 0px 1000px oklch(86% 0.048 83) inset;
}

html[data-theme="mideval"] .theme-option {
  background:
    linear-gradient(180deg, oklch(17% 0.045 58 / 0.82), oklch(7% 0.028 55 / 0.92));
  border-color: oklch(58% 0.095 78 / 0.42);
  border-radius: 0.28rem;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    inset 0 -1px 0 oklch(0% 0 0 / 0.45);
}

html[data-theme="mideval"] .theme-option:has(.theme-option__input:checked) {
  border-color: var(--mideval-brass);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.1),
    0 0 0 1px oklch(0% 0 0 / 0.6),
    0 0 0.7rem oklch(68% 0.12 78 / 0.18);
}

html[data-theme="mideval"] #main-content {
  background-color: var(--mideval-oak);
  background-image: var(--mideval-table-image);
  background-attachment: fixed;
  border-inline-color: oklch(7% 0.03 55 / 0.7);
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.06),
    inset 0 0 7rem oklch(0% 0 0 / 0.08);
}

html[data-theme="mideval"] body[data-room-background-image] #main-content {
  background-blend-mode: multiply, multiply, multiply, normal;
  background-image:
    linear-gradient(180deg, oklch(19% 0.045 58 / 0.6), oklch(8% 0.035 55 / 0.72)),
    linear-gradient(180deg, oklch(76% 0.07 78 / 0.32), oklch(44% 0.08 66 / 0.34)),
    repeating-linear-gradient(34deg, oklch(100% 0 0 / 0.035) 0 2px, transparent 2px 8px),
    var(--room-background-image);
  background-position: center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-size: cover, cover, auto, cover;
}

html[data-theme="mideval"] #sidebar {
  background-color: var(--mideval-wood-black);
  background-image: var(--mideval-menu-image);
  border-inline-end: 1px solid oklch(75% 0.095 78 / 0.34);
  box-shadow:
    inset -1px 0 0 oklch(0% 0 0 / 0.72),
    inset 1px 0 0 oklch(100% 0 0 / 0.06),
    -0.75rem 0 2rem oklch(0% 0 0 / 0.28);
}

html[data-theme="mideval"] body.sidebar-right #sidebar {
  border-inline-end: 0;
  border-inline-start: 1px solid oklch(75% 0.095 78 / 0.34);
  box-shadow:
    inset 1px 0 0 oklch(0% 0 0 / 0.72),
    inset -1px 0 0 oklch(100% 0 0 / 0.06),
    -0.75rem 0 2rem oklch(0% 0 0 / 0.34);
}

html[data-theme="mideval"] .sidebar__container {
  background:
    linear-gradient(180deg, oklch(14% 0.042 58 / 0.62), transparent 18rem),
    linear-gradient(90deg, oklch(100% 0 0 / 0.03), transparent 1.2rem, transparent calc(100% - 1.2rem), oklch(100% 0 0 / 0.025));
}

html[data-theme="mideval"] .sidebar__heading {
  color: var(--mideval-brass);
  font-size: calc(0.72rem * var(--user-font-scale, 1));
  font-weight: 800;
  letter-spacing: 0.17em;
  padding-block: 0.25rem;
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.8);
}

html[data-theme="mideval"] .sidebar__heading::after {
  border-block-start-color: oklch(61% 0.095 78 / 0.5);
  box-shadow: 0 1px 0 oklch(0% 0 0 / 0.7);
}

html[data-theme="mideval"] .sidebar__heading--toggle::before {
  border-inline-start-color: var(--mideval-brass-dark);
}

html[data-theme="mideval"] .directs {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(180deg, oklch(8% 0.035 55 / 0.18), transparent 72%);
  box-shadow: inset 0 -1px 0 oklch(100% 0 0 / 0.04);
}

html[data-theme="mideval"] .direct {
  color: var(--mideval-parchment-light);
  font-weight: 800;
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.86);
}

html[data-theme="mideval"] .direct__author {
  letter-spacing: 0.01em;
}

html[data-theme="mideval"] .direct > .avatar,
html[data-theme="mideval"] .direct > .avatar__group {
  box-shadow:
    0 0 0 1px oklch(0% 0 0 / 0.66),
    0 0 0 2px oklch(61% 0.095 78 / 0.46),
    0 0.28rem 0.6rem oklch(0% 0 0 / 0.34);
}

html[data-theme="mideval"] .direct.current > .avatar,
html[data-theme="mideval"] .direct.current > .avatar__group,
html[data-theme="mideval"] .direct.current.direct--with-background > .avatar::before,
html[data-theme="mideval"] .direct.current.direct--with-background > .avatar__group::before {
  box-shadow:
    0 0 0 2px var(--mideval-brass-dark),
    0 0 0 4px oklch(0% 0 0 / 0.5),
    0 0.35rem 0.8rem oklch(0% 0 0 / 0.4);
}

html[data-theme="mideval"] .direct__author .unread,
html[data-theme="mideval"] .unread .direct__author {
  color: var(--mideval-brass-bright);
}

html[data-theme="mideval"] .unread .direct__author::after {
  background-color: var(--mideval-brass-bright);
  box-shadow: 0 0 0.5rem var(--mideval-brass);
}

html[data-theme="mideval"] .rooms {
  gap: calc(var(--inline-space-half) * 1.15);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: var(--sidebar-inline-space);
}

html[data-theme="mideval"] .room,
html[data-theme="mideval"] .rooms__new-btn {
  --btn-border-radius: 0.22rem;
  --btn-border-size: 1px;
  --btn-background: oklch(8% 0.035 55);
  --btn-border-color: oklch(43% 0.08 70 / 0.74);
  --btn-color: var(--mideval-parchment-light);
  --btn-icon-filter: var(--icon-filter-black);
  --hover-color: var(--mideval-brass-dark);

  background:
    linear-gradient(180deg, oklch(18% 0.052 58 / 0.86), oklch(5% 0.025 55 / 0.96)),
    radial-gradient(120% 120% at 50% -20%, oklch(41% 0.08 67 / 0.28), transparent 56%);
  border-color: var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.09),
    inset 0 -1px 0 oklch(0% 0 0 / 0.64),
    0 1px 0 oklch(100% 0 0 / 0.04);
  color: var(--btn-color);
  font-size: calc(1rem * var(--user-font-scale, 1));
  font-weight: 800;
  line-height: 1.05;
  min-block-size: 4.15rem;
  overflow: hidden;
  padding-block: 0.74em;
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.88);
}

html[data-theme="mideval"] .room.room--with-background {
  background-image:
    linear-gradient(180deg, oklch(10% 0.03 55 / 0.5), oklch(4% 0.02 55 / 0.82)),
    var(--room-tile-background-image);
  border-color: oklch(57% 0.09 78 / 0.65);
  color: var(--mideval-parchment-light);
  text-shadow:
    0 1px 1px oklch(0% 0 0 / 0.95),
    0 0 0.7rem oklch(0% 0 0 / 0.72);
}

html[data-theme="mideval"] .room.current,
html[data-theme="mideval"] .room.unread {
  border-color: var(--mideval-brass);
  color: var(--mideval-parchment-light);
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.1),
    inset 0 -1px 0 oklch(0% 0 0 / 0.68),
    0 0 0 1px oklch(0% 0 0 / 0.58),
    0 0 0.7rem oklch(67% 0.12 78 / 0.18);
}

html[data-theme="mideval"] .room.current {
  background:
    linear-gradient(180deg, oklch(28% 0.075 66 / 0.95), oklch(10% 0.038 55 / 0.98)),
    radial-gradient(120% 120% at 50% -18%, oklch(62% 0.12 78 / 0.25), transparent 55%);
}

html[data-theme="mideval"] .room .room__contents {
  min-inline-size: 0;
}

html[data-theme="mideval"] .rooms__empty {
  color: oklch(79% 0.06 82 / 0.74);
}

html[data-theme="mideval"] .sidebar__tools {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background:
    linear-gradient(180deg, oklch(10% 0.035 55 / 0.82), oklch(7% 0.028 55 / 0.97)),
    radial-gradient(130% 100% at 50% 0%, oklch(33% 0.07 64 / 0.24), transparent 70%);
  border-block-start: 1px solid oklch(62% 0.095 78 / 0.42);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.06),
    0 -1rem 1.8rem -1.4rem oklch(0% 0 0 / 0.9);
}

html[data-theme="mideval"] .sidebar__tool,
html[data-theme="mideval"] .sidebar__font-scaler-btn {
  --btn-background: oklch(12% 0.04 58);
  --btn-border-color: oklch(58% 0.095 78 / 0.66);
  --btn-color: var(--mideval-brass-bright);
  --btn-icon-filter: var(--icon-filter-black);
  --hover-color: var(--mideval-brass);

  background:
    radial-gradient(circle at 50% 18%, oklch(28% 0.065 64 / 0.84), oklch(8% 0.03 55) 72%),
    linear-gradient(180deg, oklch(23% 0.055 60), oklch(7% 0.028 55));
  border-color: var(--btn-border-color);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.11),
    inset 0 -1px 0 oklch(0% 0 0 / 0.62),
    0 0.25rem 0.8rem oklch(0% 0 0 / 0.38);
  color: var(--btn-color);
}

html[data-theme="mideval"] .sidebar__tools .btn.avatar.sidebar__tool {
  --btn-border-size: 1px;
  --btn-border-color: oklch(58% 0.095 78 / 0.66);

  background:
    radial-gradient(circle at 50% 18%, oklch(28% 0.065 64 / 0.84), oklch(8% 0.03 55) 72%);
  border-color: var(--btn-border-color);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.1),
    0 0.25rem 0.8rem oklch(0% 0 0 / 0.38);
}

html[data-theme="mideval"] .sidebar__font-scaler-label,
html[data-theme="mideval"] .sidebar__revision {
  color: var(--mideval-parchment-light);
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.85);
}

html[data-theme="mideval"] .sidebar__initials {
  background: radial-gradient(circle at 50% 24%, oklch(32% 0.07 64), oklch(9% 0.03 55) 78%);
  border-color: var(--mideval-brass-dark);
  color: var(--mideval-brass-bright);
}

html[data-theme="mideval"] .messages {
  background-color: var(--mideval-oak);
  background-image: var(--mideval-table-image);
  background-blend-mode: multiply;
  padding-block-end: calc(var(--block-space) * 1.2);
}

html[data-theme="mideval"] body[data-room-background-image] .messages.messages--with-background {
  background:
    linear-gradient(180deg, oklch(16% 0.04 58 / 0.18), oklch(8% 0.03 55 / 0.26));
}

html[data-theme="mideval"] .message-area:not(:has(.message)) {
  background-color: var(--mideval-oak);
  background-image: var(--mideval-table-image);
}

html[data-theme="mideval"] .message__body-content,
html[data-theme="mideval"] .messages--with-background .message:not(.message--emoji) .message__body-content {
  --message-background: oklch(88% 0.046 83 / 0.96);
  --message-color: var(--mideval-ink);

  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: var(--message-background);
  background-image: var(--mideval-paper-image);
  background-blend-mode: multiply;
  border: 1px solid oklch(43% 0.075 70 / 0.46);
  border-radius: 0.34rem;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.2),
    inset 0 -1px 0 oklch(0% 0 0 / 0.08),
    0 0.2rem 0.45rem oklch(0% 0 0 / 0.26);
  color: var(--message-color);
}

html[data-theme="mideval"] .message__body-content:has(.message__attachment) {
  background-color: oklch(86% 0.046 83 / 0.97);
  background-image: var(--mideval-paper-image);
  overflow: hidden;
}

html[data-theme="mideval"] .message--emoji .message__body-content {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="mideval"] .message--mentioned .message__body-content {
  border-color: var(--mideval-brass-dark);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.2),
    0 0 0 1px oklch(0% 0 0 / 0.24),
    0 0.3rem 0.8rem oklch(0% 0 0 / 0.22);
}

html[data-theme="mideval"] .message__attachment {
  border-color: oklch(43% 0.075 70 / 0.5);
  border-radius: 0.24rem;
}

html[data-theme="mideval"] .message__meta,
html[data-theme="mideval"] .message__heading,
html[data-theme="mideval"] .message__author,
html[data-theme="mideval"] .message__permalink,
html[data-theme="mideval"] .message__reply-link {
  color: var(--mideval-ink);
}

html[data-theme="mideval"] .message__author {
  font-weight: 800;
}

html[data-theme="mideval"] .message__permalink,
html[data-theme="mideval"] .message__reply-label {
  color: var(--mideval-ink-muted);
  opacity: 1;
}

html[data-theme="mideval"] .message__reply-link {
  border-inline-start-color: oklch(44% 0.07 70 / 0.45);
}

html[data-theme="mideval"] .message__status--delivered,
html[data-theme="mideval"] .message__status--read {
  color: oklch(55% 0.12 145);
}

html[data-theme="mideval"] .message__avatar {
  box-shadow:
    0 0 0 2px oklch(7% 0.03 55 / 0.8),
    0 0 0 3px oklch(70% 0.105 78 / 0.48),
    0 0.25rem 0.5rem oklch(0% 0 0 / 0.3);
}

html[data-theme="mideval"] .avatar img {
  box-shadow: none;
}

html[data-theme="mideval"] .avatar--icon {
  background:
    radial-gradient(circle at 50% 26%, oklch(27% 0.06 62), var(--mideval-wood-dark) 74%);
  border: 1px solid var(--mideval-brass-dark);
}

html[data-theme="mideval"] .avatar--icon img {
  filter: var(--icon-filter-black);
}

html[data-theme="mideval"] .message__day-separator,
html[data-theme="mideval"] .messages__unread-divider {
  color: var(--mideval-ink);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 oklch(100% 0 0 / 0.16);
}

html[data-theme="mideval"] .message__day-separator::before,
html[data-theme="mideval"] .message__day-separator::after,
html[data-theme="mideval"] .messages__unread-divider::before,
html[data-theme="mideval"] .messages__unread-divider::after {
  border-top-color: oklch(18% 0.042 58 / 0.72);
  box-shadow: 0 1px 0 oklch(92% 0.035 86 / 0.16);
}

html[data-theme="mideval"] .message__day-separator time,
html[data-theme="mideval"] .message__day-separator span,
html[data-theme="mideval"] .messages__unread-divider span {
  background-color: oklch(87% 0.045 84 / 0.96);
  background-image: var(--mideval-paper-image);
  background-blend-mode: multiply;
  border: 1px solid oklch(58% 0.07 73 / 0.42);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.22),
    0 1px 2px oklch(0% 0 0 / 0.22);
  color: var(--mideval-ink);
}

html[data-theme="mideval"] .message:not(:last-of-type)::after {
  border-bottom-color: oklch(22% 0.04 60 / 0.14);
}

html[data-theme="mideval"] #nav .room--current,
html[data-theme="mideval"] #nav .btn:not(.btn--plain):not(.btn--borderless),
html[data-theme="mideval"] .pinned-messages-toggle {
  --btn-background: oklch(82% 0.052 82 / 0.96);
  --btn-border-color: oklch(49% 0.075 70 / 0.5);
  --btn-color: var(--mideval-ink);
  --btn-icon-filter: var(--btn-icon-filter-dark);
  --hover-color: var(--mideval-brass-dark);

  background-color: var(--btn-background);
  background-image: var(--mideval-paper-image);
  background-blend-mode: multiply;
  border-color: var(--btn-border-color);
  box-shadow: var(--mideval-carved-shadow);
  color: var(--btn-color);
  text-shadow: 0 1px 0 oklch(100% 0 0 / 0.22);
}

html[data-theme="mideval"] #nav .room--current {
  border-radius: 0.38rem;
  font-weight: 800;
}

html[data-theme="mideval"] #nav .btn--plain,
html[data-theme="mideval"] #nav .btn--borderless {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-icon-filter: var(--btn-icon-filter-dark);

  background-image: none;
  box-shadow: none;
}

html[data-theme="mideval"] #nav .nav__actions .btn:not(.pinned-messages-toggle--active) .colorize--black {
  filter: var(--btn-icon-filter-dark);
}

html[data-theme="mideval"] #nav .nav__actions .pinned-messages-toggle--active .colorize--black {
  filter: var(--icon-filter-black);
}

html[data-theme="mideval"] .pinned-messages-toggle--active {
  --btn-background: oklch(27% 0.075 66);
  --btn-border-color: var(--mideval-brass);
  --btn-color: var(--mideval-brass-bright);
  --btn-icon-filter: var(--icon-filter-black);

  background-image:
    radial-gradient(circle at 50% 18%, oklch(42% 0.095 70 / 0.7), transparent 58%),
    linear-gradient(180deg, oklch(25% 0.065 62), oklch(9% 0.03 55));
  color: var(--btn-color);
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.75);
}

html[data-theme="mideval"] #nav .call-action-menu,
html[data-theme="mideval"] .composer__tools-menu,
html[data-theme="mideval"] .message__actions-menu {
  --border-color: oklch(61% 0.095 78 / 0.5);
  --boost-border-color: oklch(61% 0.095 78 / 0.5);

  background-color: var(--mideval-wood-dark);
  background-image: var(--mideval-menu-image);
  border-color: var(--border-color);
  border-radius: 0.28rem;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    0 0.8rem 1.8rem oklch(0% 0 0 / 0.48);
  color: var(--mideval-parchment-light);
}

html[data-theme="mideval"] .message__actions-menu::after {
  background: var(--mideval-wood-dark);
}

html[data-theme="mideval"] #nav .call-action-menu__section-label,
html[data-theme="mideval"] #nav .daily-summary-menu__meta {
  color: var(--mideval-brass);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-theme="mideval"] #nav .call-action-menu__divider {
  background-color: oklch(61% 0.095 78 / 0.38);
}

html[data-theme="mideval"] .message__action-btn,
html[data-theme="mideval"] .message__options-btn,
html[data-theme="mideval"] #nav .call-action-menu .call-action-menu__button,
html[data-theme="mideval"] #nav .call-action-menu .daily-summary-menu__companion-button,
html[data-theme="mideval"] .composer__tool-btn,
html[data-theme="mideval"] .boost,
html[data-theme="mideval"] .boost__action,
html[data-theme="mideval"] .boost__form-button {
  --btn-background: oklch(12% 0.04 58);
  --btn-border-color: oklch(58% 0.095 78 / 0.42);
  --btn-color: var(--mideval-parchment-light);
  --btn-icon-filter: var(--icon-filter-black);
  --boost-background: oklch(12% 0.04 58);
  --boost-border-color: oklch(58% 0.095 78 / 0.42);
  --boost-color: var(--mideval-parchment-light);
  --boost-action-background: oklch(13% 0.04 58);
  --boost-action-border-color: oklch(58% 0.095 78 / 0.42);
  --boost-action-color: var(--mideval-parchment-light);
  --boost-action-icon-filter: var(--icon-filter-black);

  background:
    linear-gradient(180deg, oklch(19% 0.052 58 / 0.9), oklch(7% 0.028 55 / 0.96));
  background-blend-mode: normal;
  border-color: var(--btn-border-color);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    inset 0 -1px 0 oklch(0% 0 0 / 0.48);
  color: var(--btn-color);
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.72);
}

html[data-theme="mideval"] .composer__tool-btn {
  border-radius: 0.2rem;
}

html[data-theme="mideval"] .composer__tool-btn:hover,
html[data-theme="mideval"] #nav .call-action-menu .call-action-menu__button:hover,
html[data-theme="mideval"] .message__action-btn:hover {
  background:
    linear-gradient(180deg, oklch(26% 0.065 64 / 0.92), oklch(10% 0.035 55 / 0.98));
  border-color: var(--mideval-brass-dark);
}

html[data-theme="mideval"] .message__action-btn img,
html[data-theme="mideval"] .message__options-btn img,
html[data-theme="mideval"] #nav .call-action-menu .call-action-menu__button img,
html[data-theme="mideval"] .composer__tool-btn img,
html[data-theme="mideval"] .boost__action img,
html[data-theme="mideval"] .boost__form-button img {
  filter: var(--icon-filter-black);
}

html[data-theme="mideval"] .boost__delete,
html[data-theme="mideval"] .boost__form-button--cancel,
html[data-theme="mideval"] .btn--negative {
  --boost-action-background: var(--mideval-garnet);
  --boost-action-border-color: oklch(50% 0.14 30);

  background-color: var(--mideval-garnet);
  background-image: linear-gradient(180deg, oklch(51% 0.15 30), oklch(34% 0.12 28));
  border-color: oklch(58% 0.14 32 / 0.7);
}

html[data-theme="mideval"] .composer,
html[data-theme="mideval"] body[data-room-background-image] #footer,
html[data-theme="mideval"] body[data-room-background-image] .composer {
  background-color: oklch(80% 0.05 81);
  background-image: var(--mideval-paper-image);
  background-blend-mode: multiply;
  border-block-start: 1px solid oklch(26% 0.05 60 / 0.54);
  border-block-end: 1px solid oklch(95% 0.02 86 / 0.18);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.18),
    0 -0.5rem 1.2rem oklch(0% 0 0 / 0.08);
}

html[data-theme="mideval"] .composer::before,
html[data-theme="mideval"] .composer::after {
  background: oklch(45% 0.07 70 / 0.38);
  content: "";
  height: 1px;
  inset-inline: calc(var(--inline-space) + 1vw);
  position: absolute;
}

html[data-theme="mideval"] .composer::before {
  inset-block-start: 0.22rem;
}

html[data-theme="mideval"] .composer::after {
  inset-block-end: 0.22rem;
}

html[data-theme="mideval"] .composer__input {
  --input-border-color: oklch(34% 0.06 64 / 0.68);
  --hover-color: var(--mideval-brass-dark);

  background-color: oklch(87% 0.045 84 / 0.98);
  background-image:
    linear-gradient(180deg, oklch(95% 0.03 86 / 0.78), oklch(78% 0.055 78 / 0.82)),
    repeating-linear-gradient(34deg, oklch(96% 0.02 86 / 0.1) 0 2px, transparent 2px 7px);
  border-color: var(--input-border-color);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.14),
    inset 0 2px 4px oklch(0% 0 0 / 0.12),
    0 1px 0 oklch(100% 0 0 / 0.12);
  color: var(--mideval-ink);
}

html[data-theme="mideval"] .composer__input .input,
html[data-theme="mideval"] .composer__input trix-editor,
html[data-theme="mideval"] .composer__input textarea.input {
  color: var(--mideval-ink);
}

html[data-theme="mideval"] .composer__input .btn--borderless {
  --btn-color: var(--mideval-ink);
  --btn-icon-filter: var(--btn-icon-filter-dark);
}

html[data-theme="mideval"] .composer__input .colorize--black {
  filter: var(--btn-icon-filter-dark);
}

html[data-theme="mideval"] .composer__input .composer__tools-menu .colorize--black,
html[data-theme="mideval"] .composer__input .composer__primary-action-btn .colorize--black {
  filter: var(--icon-filter-black);
}

html[data-theme="mideval"] .composer__input .btn--reversed,
html[data-theme="mideval"] .composer__primary-action-btn {
  --btn-background: oklch(13% 0.04 58);
  --btn-border-color: var(--mideval-brass-dark);
  --btn-color: var(--mideval-brass-bright);
  --btn-icon-filter: var(--icon-filter-black);
  --hover-color: var(--mideval-brass);

  background:
    radial-gradient(circle at 50% 18%, oklch(30% 0.07 64 / 0.9), oklch(8% 0.03 55) 72%);
  border-color: var(--btn-border-color);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.1),
    0 0.2rem 0.7rem oklch(0% 0 0 / 0.28);
  color: var(--btn-color);
}

html[data-theme="mideval"] .composer__reply {
  background: oklch(82% 0.045 82 / 0.9);
  background-image: var(--mideval-paper-image);
  border-color: oklch(49% 0.075 70 / 0.42);
  border-radius: 0.32rem;
  color: var(--mideval-ink);
}

html[data-theme="mideval"] .composer__reply-link {
  color: var(--mideval-ink);
}

html[data-theme="mideval"] code,
html[data-theme="mideval"] pre,
html[data-theme="mideval"] .hljs,
html[data-theme="mideval"] .message__markdown code,
html[data-theme="mideval"] .message__markdown pre,
html[data-theme="mideval"] .message__markdown pre code,
html[data-theme="mideval"] trix-editor pre,
html[data-theme="mideval"] .trix-content pre {
  background: oklch(78% 0.045 82 / 0.86);
  border-color: oklch(49% 0.075 70 / 0.42);
  color: var(--mideval-ink);
}

html[data-theme="mideval"] .trix-button-group,
html[data-theme="mideval"] .trix-button {
  color: var(--mideval-ink) !important;
}

html[data-theme="mideval"] .trix-button::before {
  filter: var(--btn-icon-filter-dark);
}

html[data-theme="mideval"] .trix-button.trix-active {
  background-color: oklch(84% 0.05 82) !important;
  border: 1px solid oklch(49% 0.075 70 / 0.52) !important;
}

html[data-theme="mideval"] .trix-button.trix-active::before {
  filter: var(--btn-icon-filter-dark);
}

html[data-theme="mideval"] .games-area-page #main-content,
html[data-theme="mideval"] .games-area-page .main-content__scroll {
  background:
    linear-gradient(118deg, transparent 0 18%, oklch(24% 0.08 135 / 0.24) 18% 28%, transparent 28% 100%),
    linear-gradient(242deg, transparent 0 24%, oklch(33% 0.09 58 / 0.28) 24% 33%, transparent 33% 100%),
    linear-gradient(color-mix(in oklab, var(--mideval-brass) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--mideval-brass) 7%, transparent) 1px, transparent 1px),
    linear-gradient(135deg, oklch(7% 0.03 55), oklch(13% 0.04 58));
  background-size: auto, auto, 5rem 5rem, 5rem 5rem, auto;
}

html[data-theme="mideval"] .games-page {
  --game-accent-a: var(--mideval-brass);
  --game-accent-b: oklch(57% 0.1 58);
}

html[data-theme="mideval"] #nav .games-page__nav-title,
html[data-theme="mideval"] #nav .sidebar__desktop-toggle,
html[data-theme="mideval"] .games-page__launcher-toggle {
  --btn-background: oklch(82% 0.052 82 / 0.96);
  --btn-border-color: oklch(49% 0.075 70 / 0.58);
  --btn-color: var(--mideval-ink);
  --btn-icon-filter: var(--btn-icon-filter-dark);

  background-color: var(--btn-background);
  background-image: var(--mideval-paper-image);
  background-blend-mode: multiply;
  border-color: var(--btn-border-color);
  box-shadow: var(--mideval-carved-shadow);
  color: var(--btn-color);
  text-shadow: 0 1px 0 oklch(100% 0 0 / 0.22);
}

html[data-theme="mideval"] #nav .games-page__nav-title .colorize--black,
html[data-theme="mideval"] #nav .sidebar__desktop-toggle .colorize--white,
html[data-theme="mideval"] .games-page__launcher-toggle .colorize--white {
  filter: var(--btn-icon-filter-dark);
}

html[data-theme="mideval"] .sidebar__desktop-toggle-copy,
html[data-theme="mideval"] .games-page__launcher-toggle-copy {
  color: var(--mideval-ink);
  text-shadow: 0 1px 0 oklch(100% 0 0 / 0.2);
}

html[data-theme="mideval"] .games-page__launcher {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(180deg, oklch(10% 0.035 55 / 0.9), oklch(6% 0.025 55 / 0.98)),
    radial-gradient(120% 90% at 50% 0%, oklch(27% 0.06 62 / 0.22), transparent 64%);
  border-inline-end-color: oklch(61% 0.095 78 / 0.36);
}

html[data-theme="mideval"] .games-page__game-tab {
  background-color: oklch(73% 0.045 82);
  background-image: var(--mideval-paper-image);
  background-blend-mode: multiply;
  border-color: oklch(41% 0.075 70 / 0.62);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.14),
    inset 0 -1px 0 oklch(0% 0 0 / 0.12),
    0 0.16rem 0.36rem oklch(0% 0 0 / 0.28);
  color: var(--mideval-ink);
}

html[data-theme="mideval"] .games-page__game-tab strong {
  color: var(--mideval-ink);
  text-shadow: 0 1px 0 oklch(100% 0 0 / 0.16);
}

html[data-theme="mideval"] .games-page__game-tab small {
  color: var(--mideval-ink-muted);
  font-weight: 750;
}

html[data-theme="mideval"] .games-page__game-tab.is-active {
  background:
    linear-gradient(135deg, oklch(68% 0.1 82 / 0.26), transparent 58%),
    var(--mideval-paper-image);
  border-color: var(--mideval-brass);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.16),
    0 0 0 1px oklch(0% 0 0 / 0.38),
    0 0 0.7rem oklch(68% 0.12 78 / 0.16);
}

html[data-theme="mideval"] .games-page__game-icon {
  background:
    radial-gradient(circle at 50% 18%, oklch(22% 0.06 58), oklch(7% 0.03 55) 76%);
  border: 1px solid oklch(58% 0.095 78 / 0.42);
  color: var(--mideval-parchment-light);
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.82);
}

html[data-theme="mideval"] .game-panel__eyebrow {
  color: var(--mideval-brass-bright);
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.62);
}

html[data-theme="mideval"] .game-panel__status {
  color: var(--mideval-parchment-light);
  font-weight: 750;
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.56);
}

html[data-theme="mideval"] .tic-tac-toe__active-header,
html[data-theme="mideval"] .tic-tac-toe__choice,
html[data-theme="mideval"] .tic-tac-toe__active-game,
html[data-theme="mideval"] .game-high-scores {
  background-color: oklch(82% 0.048 82 / 0.96);
  background-image: var(--mideval-paper-image);
  background-blend-mode: multiply;
  border-color: oklch(49% 0.075 70 / 0.52);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.18),
    0 0.24rem 0.55rem oklch(0% 0 0 / 0.28);
  color: var(--mideval-ink);
}

html[data-theme="mideval"] .tic-tac-toe__active-header .game-panel__eyebrow,
html[data-theme="mideval"] .tic-tac-toe__choice .game-panel__status,
html[data-theme="mideval"] .tic-tac-toe__active-game .game-panel__status,
html[data-theme="mideval"] .game-high-scores .game-panel__status {
  color: var(--mideval-ink-muted);
  text-shadow: 0 1px 0 oklch(100% 0 0 / 0.16);
}

html[data-theme="mideval"] .tic-tac-toe__active-header h3,
html[data-theme="mideval"] .tic-tac-toe__choice h3,
html[data-theme="mideval"] .tic-tac-toe__active-game strong,
html[data-theme="mideval"] .game-high-scores h3 {
  color: var(--mideval-ink);
  text-shadow: 0 1px 0 oklch(100% 0 0 / 0.18);
}

html[data-theme="mideval"] .tic-tac-toe__summary,
html[data-theme="mideval"] .tic-tac-toe__active-game small,
html[data-theme="mideval"] .game-high-scores p,
html[data-theme="mideval"] .solitaire-meta {
  color: var(--mideval-ink-muted);
}

html[data-theme="mideval"] .tic-tac-toe__summary-row span,
html[data-theme="mideval"] .tic-tac-toe__active-game .tic-tac-toe__active-meta span {
  background: oklch(34% 0.05 62 / 0.18);
  border-color: oklch(43% 0.075 70 / 0.36);
  color: var(--mideval-ink-soft);
}

html[data-theme="mideval"] .tic-tac-toe__mark-badge,
html[data-theme="mideval"] .tic-tac-toe__turn-badge {
  background:
    linear-gradient(180deg, oklch(19% 0.052 58 / 0.92), oklch(8% 0.03 55 / 0.98));
  border-color: oklch(58% 0.095 78 / 0.54);
  color: var(--mideval-parchment-light);
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.8);
}

html[data-theme="mideval"] .tic-tac-toe__mark-badge:first-child {
  background:
    linear-gradient(180deg, oklch(33% 0.11 33), oklch(17% 0.07 28));
  border-color: oklch(63% 0.13 38 / 0.6);
}

html[data-theme="mideval"] .game-chat {
  background-color: oklch(82% 0.048 82 / 0.94);
  background-image: var(--mideval-paper-image);
  background-blend-mode: multiply;
  border-color: oklch(49% 0.075 70 / 0.52);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.16),
    0 0.24rem 0.55rem oklch(0% 0 0 / 0.28);
}

html[data-theme="mideval"] .game-chat .messages {
  background:
    linear-gradient(180deg, oklch(16% 0.055 58), oklch(10% 0.04 55));
  border: 1px solid oklch(43% 0.075 70 / 0.36);
  border-radius: 0.18rem;
  color: var(--mideval-parchment-light);
}

html[data-theme="mideval"] .game-chat__message-line,
html[data-theme="mideval"] .game-chat__message-line strong {
  color: var(--mideval-parchment-light);
}

html[data-theme="mideval"] .game-chat__timestamp,
html[data-theme="mideval"] .game-chat__pending-meta,
html[data-theme="mideval"] .game-chat__message-line .message__status {
  color: oklch(80% 0.055 82 / 0.72);
}

html[data-theme="mideval"] .game-chat .composer {
  background: transparent;
  border: 0;
  box-shadow: none;
}

html[data-theme="mideval"] .game-chat .composer::before,
html[data-theme="mideval"] .game-chat .composer::after {
  content: none;
}

html[data-theme="mideval"] .game-chat .composer__input {
  border-radius: 999px;
}

html[data-theme="mideval"] .checkers__board {
  background:
    linear-gradient(135deg, oklch(7% 0.03 55), oklch(16% 0.045 58));
  border-color: oklch(58% 0.095 78 / 0.36);
  box-shadow:
    inset 0 0 0 1px oklch(0% 0 0 / 0.6),
    0 0.55rem 1.2rem oklch(0% 0 0 / 0.36);
}

html[data-theme="mideval"] .checkers__square {
  background: oklch(25% 0.045 58);
}

html[data-theme="mideval"] .checkers__square.is-dark {
  background: oklch(10% 0.035 55);
}

html[data-theme="mideval"] .checkers__piece--x {
  background:
    radial-gradient(circle at 42% 32%, oklch(35% 0 0), oklch(7% 0 0) 72%);
  border-color: oklch(60% 0 0 / 0.42);
}

html[data-theme="mideval"] .checkers__piece--o {
  background:
    radial-gradient(circle at 42% 32%, oklch(58% 0.16 29), oklch(34% 0.14 28) 72%);
  border-color: oklch(70% 0.11 36 / 0.52);
}

@media (max-width: 67.4375rem) {
  html[data-theme="mideval"] #sidebar {
    border-inline: 0;
    box-shadow: none;
  }

  html[data-theme="mideval"] .sidebar__container {
    padding-block-start: calc(var(--block-space) + var(--safe-area-inset-top) + 0.25rem);
  }

  html[data-theme="mideval"] .directs {
    background: transparent;
  }

  html[data-theme="mideval"] .rooms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: var(--inline-space-double);
  }

  html[data-theme="mideval"] .room {
    min-block-size: 3.85rem;
  }

  html[data-theme="mideval"] .sidebar #nav::before {
    background: linear-gradient(180deg, oklch(82% 0.045 82 / 0.96), oklch(82% 0.045 82 / 0));
  }
}