/* Content-owned Shirone skin. Keep the theme's typography, layout, banner,
   semantic HCT roles and interaction states. Artwork is purely decorative. */
html:root {
  --page-bg: color-mix(in oklab, var(--surface-container-low) 45%, var(--surface-container-lowest));
  --dango-border: color-mix(in oklab, var(--outline-variant) 55%, transparent);
}
html:root.dark {
  --page-bg: var(--surface);
  --dango-border: color-mix(in oklab, var(--outline-variant) 42%, transparent);
}

/* Give the existing containers a quiet boundary without changing their size. */
html:root .m3-blog-postcard,
html:root .m3-profile,
html:root #category-bar {
  outline: 1px solid var(--dango-border);
  outline-offset: -1px;
}
html:root .m3-blog-postcard {
  background: var(--card-bg);
}
html:root .m3-profile {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--primary-container) 16%, var(--card-bg)),
    var(--card-bg) 70%
  );
}

/* The existing brand accent is decorative: retain the accessible title. */
html #navbar > div > a > span:first-child {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 1.75rem;
  border-radius: 0;
  background: url("/images/theme/dango-mark.svg") center / contain no-repeat;
}

/* Keep Nagisa's transparent image and Shirone's original avatar shape. */
html:root .m3-profile__avatar-link,
html:root .m3-profile .m3-avatar {
  background: transparent;
}
html:root .m3-profile__accent {
  width: 5.25rem;
  height: 1.6rem;
  margin-block: var(--m3e-space-2) var(--m3e-space-3);
  border-radius: 0;
  background: url("/images/theme/dango-family.svg") center / contain no-repeat;
}
html:root #category-bar {
  background: color-mix(in oklab, var(--primary-container) 8%, var(--card-bg));
}

/* A small family gathering ends the page. No JS or automatic motion. */
.dango-family-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--m3e-space-4);
  margin-block: var(--m3e-space-4) var(--m3e-space-6);
}
.dango-family-footer img {
  display: block;
  width: 13.5rem;
  height: 6.75rem;
  max-width: 60vw;
  object-fit: contain;
}
.dango-family-footer__line {
  width: clamp(1.5rem, 8vw, 5rem);
  height: 1px;
  background: var(--outline-variant);
}
@media (max-width: 767px) {
  html #navbar > div > a > span:first-child {
    flex-basis: 1.75rem;
    width: 1.75rem;
    height: 1.5rem;
  }
}

/* Pastel reading companions reuse the existing aria-hidden title accent. */
html:root .m3-blog-postcard { --dango-companion: url("/images/theme/dango-green.svg"); }
html:root .m3-blog-postcard:nth-child(5n + 2) { --dango-companion: url("/images/theme/dango-pink.svg"); }
html:root .m3-blog-postcard:nth-child(5n + 3) { --dango-companion: url("/images/theme/dango-blue.svg"); }
html:root .m3-blog-postcard:nth-child(5n + 4) { --dango-companion: url("/images/theme/dango-yellow.svg"); }
html:root .m3-blog-postcard:nth-child(5n) { --dango-companion: url("/images/theme/dango-purple.svg"); }
html:root .m3-blog-postcard__title .m3-accent-bar {
  display: inline-block;
  width: 1.5rem;
  height: 1.625rem;
  border-radius: 0;
  background: var(--dango-companion) center / contain no-repeat;
}
/* Empty generated content is decorative and cannot change widget names. */
html:root .widget-layout__header::after {
  content: "";
  flex: 0 0 2.625rem;
  height: 1.75rem;
  margin-inline-start: auto;
  background: url("/images/theme/dango-mark.svg") center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 767px) {
  html:root .m3-blog-postcard__title .m3-accent-bar {
    width: 1.25rem;
    height: 1.375rem;
  }
}