/* Public visitor skins for the Joe3 theme. */

html[data-skin] body,
html[data-skin] .joe_header__above,
html[data-skin] .joe_list__item,
html[data-skin] .joe_aside__item,
html[data-skin] .joe_detail,
html[data-skin] .joe_detail__article,
html[data-skin] .joe_comment_box,
html[data-skin] .joe_footer,
html[data-skin] .joe_pagination li {
  transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, color 0.45s ease;
}

.joe-skin-switcher {
  position: fixed;
  top: 76px;
  right: 24px;
  z-index: 1101;
  font-size: 13px;
}

.joe-skin-toggle {
  align-items: center;
  background: rgba(9, 13, 25, 0.76);
  border: 1px solid rgba(125, 211, 252, 0.38);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
  color: #e0f2fe;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  height: 36px;
  padding: 0 13px 0 10px;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.joe-skin-toggle:hover,
.joe-skin-toggle:focus-visible {
  background: rgba(14, 29, 50, 0.94);
  border-color: var(--theme);
  outline: none;
  transform: translateY(-2px);
}

.joe-skin-toggle__icon {
  border: 2px solid currentColor;
  border-radius: 50%;
  display: inline-block;
  height: 14px;
  position: relative;
  width: 14px;
}

.joe-skin-toggle__icon::after {
  background: currentColor;
  border-radius: 50%;
  content: '';
  height: 7px;
  left: 2px;
  opacity: 0.75;
  position: absolute;
  top: 2px;
  width: 7px;
}

.joe-skin-menu {
  background: rgba(13, 17, 29, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  display: none;
  margin-top: 10px;
  padding: 12px;
  width: 224px;
}

.joe-skin-menu.is-open {
  display: block;
  animation: joe-skin-menu-in 0.2s ease both;
}

.joe-skin-menu__title {
  color: #cbd5e1;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin: 0 0 9px;
  text-transform: uppercase;
}

.joe-skin-options {
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr 1fr;
}

.joe-skin-option {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #cbd5e1;
  cursor: pointer;
  display: flex;
  gap: 8px;
  min-height: 38px;
  padding: 7px 8px;
  text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.joe-skin-option:hover,
.joe-skin-option:focus-visible {
  background: rgba(148, 163, 184, 0.12);
  border-color: var(--theme);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.joe-skin-option[aria-pressed='true'] {
  background: rgba(125, 211, 252, 0.15);
  border-color: var(--theme);
  color: #fff;
}

.joe-skin-swatch {
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

.joe-skin-swatch--space { background: #7dd3fc; }
.joe-skin-swatch--aurora { background: #6ee7b7; }
.joe-skin-swatch--cyber { background: #ff4fd8; }
.joe-skin-swatch--paper { background: #f8fafc; border-color: #64748b; }

@keyframes joe-skin-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Aurora: deep teal glass with a softer reading contrast. */
html[data-skin='aurora'] body {
  --background: #071a1b !important;
  --sib-background: #0c2929 !important;
  --main: #e2fdf6 !important;
  --routine: #9dd7c7 !important;
  --minor: #76aa9e !important;
  --classA: #2b5d59 !important;
  --classB: #214945 !important;
  --classC: #1c3d3a !important;
  --classD: #123331 !important;
  --classE: #356b64 !important;
  --theme: #6ee7b7 !important;
  background-color: #071a1b !important;
}

html[data-skin='aurora'] body::before {
  filter: hue-rotate(66deg) saturate(1.25) brightness(0.72);
  opacity: 0.72;
}

html[data-skin='aurora'] .joe_header__above.glass {
  background: rgba(4, 28, 29, 0.78) !important;
  border-bottom: 1px solid rgba(110, 231, 183, 0.24);
}

html[data-skin='aurora'] .joe_list__item,
html[data-skin='aurora'] .joe_aside__item,
html[data-skin='aurora'] .joe_detail,
html[data-skin='aurora'] .joe_detail__article,
html[data-skin='aurora'] .joe_comment_box {
  border: 1px solid rgba(110, 231, 183, 0.2);
  box-shadow: 0 12px 32px rgba(0, 28, 27, 0.34);
}

html[data-skin='aurora'] .joe_list__item:hover,
html[data-skin='aurora'] .joe_aside__item:hover {
  border-color: rgba(110, 231, 183, 0.6);
  box-shadow: 0 16px 38px rgba(25, 150, 125, 0.2);
  transform: translateY(-4px);
}

html[data-skin='aurora'] .joe-skin-toggle,
html[data-skin='aurora'] .joe-skin-menu {
  background-color: rgba(4, 39, 37, 0.95);
  border-color: rgba(110, 231, 183, 0.38);
}

/* Cyber: sharper contrast, cyan/magenta accents, and a restrained technical grid. */
html[data-skin='cyber'] body {
  --background: #0b0713 !important;
  --sib-background: #170f24 !important;
  --main: #f6eaff !important;
  --routine: #c9b8da !important;
  --minor: #9d86b4 !important;
  --classA: #5a3b6f !important;
  --classB: #432b54 !important;
  --classC: #352343 !important;
  --classD: #251832 !important;
  --classE: #704a87 !important;
  --theme: #ff4fd8 !important;
  background-color: #0b0713 !important;
  background-image: linear-gradient(rgba(72, 220, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 79, 216, 0.07) 1px, transparent 1px) !important;
  background-size: 34px 34px !important;
}

html[data-skin='cyber'] body::before {
  filter: hue-rotate(238deg) saturate(1.5) brightness(0.48);
  opacity: 0.56;
}

html[data-skin='cyber'] .joe_header__above.glass {
  background: rgba(13, 5, 25, 0.86) !important;
  border-bottom: 1px solid rgba(255, 79, 216, 0.32);
}

html[data-skin='cyber'] .joe_list__item,
html[data-skin='cyber'] .joe_aside__item,
html[data-skin='cyber'] .joe_detail,
html[data-skin='cyber'] .joe_detail__article,
html[data-skin='cyber'] .joe_comment_box {
  border: 1px solid rgba(255, 79, 216, 0.24);
  box-shadow: 0 0 0 1px rgba(72, 220, 255, 0.04), 0 14px 34px rgba(0, 0, 0, 0.42);
}

html[data-skin='cyber'] .joe_list__item:hover,
html[data-skin='cyber'] .joe_aside__item:hover {
  border-color: rgba(72, 220, 255, 0.72);
  box-shadow: 0 0 26px rgba(72, 220, 255, 0.18), 0 18px 40px rgba(0, 0, 0, 0.48);
  transform: translateY(-4px);
}

html[data-skin='cyber'] .joe_list__item .title a:hover,
html[data-skin='cyber'] .joe_aside__item a:hover {
  color: #48dcff !important;
}

html[data-skin='cyber'] .joe-skin-toggle,
html[data-skin='cyber'] .joe-skin-menu {
  background-color: rgba(23, 10, 38, 0.96);
  border-color: rgba(255, 79, 216, 0.46);
}

/* Paper: a calm light mode for reading and writing. */
html[data-skin='paper'] body {
  --background: #ffffff !important;
  --sib-background: #ffffff !important;
  --main: #1f2937 !important;
  --routine: #475569 !important;
  --minor: #64748b !important;
  --classA: #cbd5e1 !important;
  --classB: #dbe3ec !important;
  --classC: #e2e8f0 !important;
  --classD: #f1f5f9 !important;
  --classE: #94a3b8 !important;
  --theme: #4f46e5 !important;
  background-color: #f4f6f8 !important;
  background-image: none !important;
}

html[data-skin='paper'] body::before {
  display: none !important;
}

html[data-skin='paper'] #canvas-universe,
html[data-skin='paper'] canvas[data-joe-skin-canvas='backdrop'],
html[data-skin='paper'] canvas[data-joe-skin-canvas='cursor'] {
  display: none !important;
}

html[data-skin='paper'] #EvanBigBanner,
html[data-skin='paper'] .evan-big-banner {
  background-color: #f4f6f8 !important;
  background-image: none !important;
  background-position: center;
  filter: none !important;
  height: 410px !important;
}

html[data-skin='paper'] #EvanBigBanner .title,
html[data-skin='paper'] #EvanBigBanner #EvanBigBannerLastTitleTip,
html[data-skin='paper'] #EvanBigBanner .desctitle,
html[data-skin='paper'] #EvanBigBanner .motto {
  color: #1e293b !important;
  text-shadow: none !important;
}

html[data-skin='paper'] #EvanBigBanner .index-goto-icon {
  color: #4f46e5 !important;
  text-shadow: none !important;
}

html[data-skin='paper'] #EvanBigBanner #EvanWaves,
html[data-skin='paper'] #EvanBigBanner #gentle-wave {
  fill: #f4f6f8 !important;
}

html[data-skin='paper'] .joe_header__above.glass {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

html[data-skin='paper'] .joe_list__item,
html[data-skin='paper'] .joe_aside__item,
html[data-skin='paper'] .joe_detail,
html[data-skin='paper'] .joe_detail__article,
html[data-skin='paper'] .joe_comment_box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

html[data-skin='paper'] .joe_list__item:hover,
html[data-skin='paper'] .joe_aside__item:hover {
  border-color: #a5b4fc;
  box-shadow: 0 16px 34px rgba(79, 70, 229, 0.12);
  transform: translateY(-4px);
}

html[data-skin='paper'] .joe-skin-toggle {
  background: rgba(255, 255, 255, 0.94);
  border-color: #cbd5e1;
  color: #334155;
}

html[data-skin='paper'] .joe-skin-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: #dbe3ec;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
}

html[data-skin='paper'] .joe-skin-menu__title,
html[data-skin='paper'] .joe-skin-option {
  color: #475569;
}

html[data-skin='paper'] .joe-skin-option:hover,
html[data-skin='paper'] .joe-skin-option:focus-visible,
html[data-skin='paper'] .joe-skin-option[aria-pressed='true'] {
  background: #eef2ff;
  color: #312e81;
}

@media (max-width: 768px) {
  .joe-skin-switcher {
    right: 12px;
    top: 68px;
  }

  .joe-skin-toggle {
    height: 34px;
    padding-right: 10px;
  }

  .joe-skin-menu {
    width: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .joe-skin-menu.is-open,
  .joe-skin-option,
  .joe-skin-toggle {
    animation: none;
    transition: none;
  }
}