/*
 * Stack2 interface refinements.
 * This file intentionally loads after the theme bundle so upgrades do not
 * require editing the minified main.css.
 */

.mobile-menu-search {
  display: none;
}

a,
button,
summary {
  touch-action: manipulation;
}

.article-list article:nth-child(5n + 1) .article-category a {
  background: #4e6f45;
}

.article-list article:nth-child(5n + 2) .article-category a {
  background: #a33f50;
}

.article-list article:nth-child(5n + 3) .article-category a {
  background: #00649c;
}

.article-list article:nth-child(5n + 4) .article-category a {
  background: #805500;
}

.article-list article:nth-child(5n + 5) .article-category a {
  background: #4f4aa8;
}

:root[data-scheme='light'] {
  color-scheme: light;
}

:root[data-scheme='dark'] {
  color-scheme: dark;
  --body-text-color: rgba(255, 255, 255, 0.72);
  --card-text-color-tertiary: rgba(255, 255, 255, 0.72);
}

#dark-mode-toggle {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.tag-cloud-more {
  margin-top: 10px;
}

.tag-cloud-more summary {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--tag-border-radius);
  background: var(--card-background);
  box-shadow: var(--shadow-l1);
  color: var(--card-text-color-main);
  cursor: pointer;
  font-size: 1.35rem;
  list-style: none;
}

.tag-cloud-more summary::-webkit-details-marker {
  display: none;
}

.tag-cloud-more summary::after {
  content: '＋';
  margin-left: 8px;
}

.tag-cloud-more[open] summary {
  margin-bottom: 10px;
}

.tag-cloud-more[open] summary::after {
  content: '－';
}

.tag-cloud-more summary:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

.search-result--title:empty {
  display: none;
}

@media (max-width: 767.98px) {
  :root {
    --container-padding: 12px;
    --card-padding: 18px;
    --section-separation: 24px;
    --card-border-radius: 8px;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    overflow-x: hidden;
  }

  .main-container {
    padding: 14px 12px calc(28px + env(safe-area-inset-bottom));
  }

  .left-sidebar {
    gap: 12px;
    --sidebar-avatar-size: 80px;
  }

  .left-sidebar header {
    padding-right: 48px;
  }

  .sidebar header .site-name {
    font-size: 2rem;
  }

  .sidebar header .site-description {
    font-size: 1.45rem;
    line-height: 1.6;
  }

  #toggle-menu {
    top: 8px;
    right: 2px;
    display: flex;
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  #toggle-menu:hover,
  #toggle-menu:focus-visible {
    background: var(--card-background-selected);
  }

  .menu {
    gap: 0;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  }

  .mobile-menu-search {
    display: block;
    margin-bottom: 8px;
  }

  .mobile-menu-search a {
    background: var(--accent-color);
    color: var(--accent-color-text);
    font-weight: 700;
  }

  .mobile-menu-search + li {
    border-top: 0;
  }

  .menu li + li {
    border-top: 1px solid var(--card-separator-color);
  }

  .menu li a {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 1.6rem;
  }

  .menu li a:hover,
  .menu li.current a {
    background: var(--card-background-selected);
  }

  .article-list {
    gap: 18px;
  }

  .article-list article {
    border-radius: 8px;
  }

  .article-list article .article-image img {
    height: 180px;
  }

  .article-details {
    gap: 12px;
    padding: 18px;
  }

  .article-title {
    font-size: 2rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .article-subtitle {
    font-size: 1.6rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  .article-time {
    gap: 8px 14px;
    font-size: 1.35rem;
  }

  .article-category a,
  .article-tags a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 7px 14px;
    font-size: 1.4rem;
    font-weight: 600;
  }

  .pagination {
    border-radius: 8px;
  }

  .pagination .page-number {
    min-width: 44px;
    min-height: 44px;
  }

  .article-page .main-article .article-header .article-details {
    padding: 18px 18px 0;
  }

  .article-page .main-article .article-content {
    margin: 18px;
    font-size: 1.7rem;
    line-height: 1.9;
    overflow-wrap: anywhere;
  }

  .article-content img,
  .article-content video,
  .article-content iframe {
    max-width: 100%;
    height: auto;
  }

  .article-content pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .article-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .article-nav {
    gap: 12px;
  }

  .article-nav .article-nav-link {
    min-height: 72px;
    padding: 14px;
  }

  .footer {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 359.98px) {
  :root {
    --container-padding: 10px;
    --card-padding: 16px;
  }

  .main-container {
    padding-right: 10px;
    padding-left: 10px;
  }

  .article-list article .article-image img {
    height: 160px;
  }

  .article-title {
    font-size: 1.9rem;
  }

  .article-page .main-article .article-content {
    margin: 16px;
    font-size: 1.65rem;
  }
}

.site-footer .site-disclaimer {
  max-width: 68rem;
  margin-top: 6px;
  color: var(--body-text-color);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.7;
}

.site-footer .site-report {
  max-width: 68rem;
  margin-top: 4px;
  color: var(--body-text-color);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.7;
}

.site-footer .site-report span {
  margin: 0 4px;
}