#search-result:empty {
  display: none;
}

#filterbox-left:hover {
  opacity: 1;
  color: #fff;
}

/* Global NSFW toggle, moved into the site header (between search and edit). */
#header #tBlurEl {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  cursor: pointer;
  color: #b3b3b3;
  font-size: 14px;
  white-space: nowrap;
  user-select: none;
}
/* NSFW shown -> soft red (same cue as the old filter-box toggle). Placed before
   :hover so hovering still brightens to white. */
#header #tBlurEl.nsfw-visible {
  color: #f29c9c;
}
#header #tBlurEl:hover {
  color: #fff;
}
#header #tBlurEl i {
  font-size: 20px;
}
/* Narrow screens: keep the "NSFW" label (the eye alone is ambiguous) but make it
   compact so the header stays tidy. */
@media screen and (max-width: 560px) {
  /* Mobile = clean icon-only header: hide the "NSFW" text (font-size:0 collapses the text
     node) while the eye icon keeps its explicit 20px size. */
  #header #tBlurEl {
    font-size: 0;
    gap: 0;
    padding: 0 9px;
  }
}

html.nsfw-visible .nsfwsection,
html.nsfw-visible #search-result .nsfwsection {
  display: block;
}

html:not(.nsfw-visible) #search-result .nsfwsection {
  display: none;
}

/* Per-section NSFW gate: an NSFW section -- its panel, its jump box and its side-menu
   link all carry .nsfw-gated -- is fully rendered but hidden by CSS while NSFW is off,
   so the header toggle shows/hides the whole set instantly (no reload). The dedicated
   /section/<slug> page is never tagged, so navigating there always shows it. */
html:not(.nsfw-visible) .nsfw-gated {
  display: none;
}

/* "Turn on NSFW" notice on a dedicated /section page: the mirror image of .nsfw-gated --
   hidden while NSFW is on, shown while it is off -- so the gated panel and the notice
   swap instantly when the toggle flips. */
.nsfw-notice {
  display: none;
}
html:not(.nsfw-visible) .nsfw-notice {
  display: block;
}

#editmenu .item-menu {
  cursor: pointer;
}

.section-item > a {
  word-break: break-word;
}

.section-expand .footnote:empty {
  display: none;
}

.restored-section-page {
  display: block !important;
}

.restored-section-page #comment-cont {
  padding: 0 15px;
  max-width: 600px;
  margin: 25px auto;
}

#content-single {
  padding-top: 40px;
}

#info-header a {
  color: #bbdbdf;
}

/* Site icon on the detail-page title: pin a uniform height so every site's icon
   renders the same size (width auto keeps the aspect ratio, no distortion) and an
   oversized upload can't blow out the header. Mirrors the height-capped list icons,
   which the base style sizes with `.section-item img { max-height: 16px }`. */
#info-header img {
  height: 32px;
  width: auto;
  vertical-align: middle;
  margin-right: 6px;
}

#headaccountbtn {
  color: #bbdbdf;
  display: block;
  font-size: 14px;
  line-height: 22px;
  max-width: 180px;
  overflow: hidden;
  padding: 7px 8px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#headaccountbtn .mdil {
  font-size: 20px;
  margin-left: 3px;
}

#headaccountbtn:hover {
  color: #e9fdff;
}

@media screen and (max-width: 650px) {
  #headaccountbtn {
    max-width: 110px;
    padding-left: 5px;
    padding-right: 5px;
  }
}

/* Header language dropdown (top-right control cluster; replaces the old side-menu footer
   switcher). The panel is position:fixed -- JS-positioned in toggleLangMenu -- because
   #header is overflow:hidden + fixed-height and would otherwise clip a dropping panel. */
/* Align the LAST control in the header to the ~1000px content column. The base theme hard-codes
   this margin onto #editmenubtn/#headsearchbtn, which assumes the edit button is the last control
   -- true on the English comments sub-app and the 404 page, but on the main pages the language
   dropdown sits after it. So: clear that base margin, give the offset to the dropdown (always
   last when it is present), and give it to the edit button ONLY when IT is the last child (the
   headers with no dropdown). Every variant then meets the column identically; #headsearchbtn
   (never last) stays at 0 so it can't open a gap mid-cluster. max(0px, ...) stays 0 on narrow
   screens where the calc would go negative (#mainmenubtn keeps its mirroring left margin). */
#header #editmenubtn,
#header #headsearchbtn {
  margin-right: 0;
}
#header .lang-switch {
  display: flex;
  align-items: center;
  margin-right: max(0px, 50% - 500px);
}
#header #editmenubtn:last-child {
  margin-right: max(0px, 50% - 500px);
}
#header .lang-switch-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  cursor: pointer;
  color: #b3b3b3;
  font-size: 14px;
  white-space: nowrap;
  user-select: none;
}
#header .lang-switch-btn:hover {
  color: #fff;
}
#header .lang-switch-caret {
  font-size: 16px;
  margin-left: -2px;
}
.lang-switch-menu {
  display: none;
  position: fixed;
  z-index: 20;
  min-width: 150px;
  background: #1f1f1f;
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.lang-switch-menu.open {
  display: block;
}
.lang-switch-menu .lang-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  color: #c7c7c7;
  font-size: 14px;
  cursor: pointer;
}
.lang-switch-menu .lang-opt:hover {
  background: #2a2a2a;
  color: #fff;
}
.lang-switch-menu .lang-opt-active {
  color: #cfe2ff;
  background: #232c38;
}
.lang-switch-menu .lang-opt .mdil {
  font-size: 16px;
}
@media screen and (max-width: 560px) {
  #header .lang-switch-cur {
    display: none;
  }
  #header .lang-switch-btn {
    gap: 2px;
    padding: 0 7px;
  }
  /* Account name collapses here too (not 420), so language / account / NSFW all drop their
     labels together -- the whole right cluster becomes clean icons on phones. */
  #headaccountbtn .headaccount-name {
    display: none;
  }
}

.restored-site-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 34%);
  gap: 12px;
  align-items: stretch;
}

.restored-site-links {
  max-width: none;
  float: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: 4px;
  margin-top: 0;
  padding-bottom: 0;
  border-left: 1px solid #323232;
  padding-left: 10px;
}

.restored-site-links .section-tags {
  float: none;
  margin-top: 0;
  margin-left: 0;
  width: 100%;
  max-width: none;
}

.restored-site-links .section-tags img {
  flex: 0 0 auto;
}

.restored-site-info {
  clear: none;
  color: #c7c7c7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 0;
  text-align: left;
}

/* Homepage / search inline site-expand (.section-expand, built by expandinfo()):
   draw the same vertical divider as the detail page. Done with an ABSOLUTE pseudo-element
   line (NOT flex/border) on purpose: .section-expand animates height:0 -> scrollHeight, and
   making it a flex container with align-items:stretch breaks that scrollHeight read (the
   children get stretched to the 0 height, so scrollHeight reads ~0 and the panel never
   opens). The line sits at the left edge of the fixed-140px float links column (the width
   the original's .section-expand-right uses); top/bottom inset so it tracks the panel. */
.section-expand {
  position: relative;
}

.section-expand .section-tag-cont {
  width: 140px;
  max-width: 140px;
  padding-left: 11px;
}

.section-expand::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  right: 140px;
  width: 1px;
  background-color: #323232;
}

/* Cap the content column so it can't cross the divider. The links float right in a fixed
   140px column but are only a couple rows tall; WITHOUT this the notes/description below
   them span the full width and run PAST the full-height ::after divider line (the original
   uses a real flex 2-col so this never happens). margin-right -- not flex -- keeps the
   height:0 -> scrollHeight expand animation intact. */
.section-expand .expand-base {
  margin-right: 150px;
}

/* The global "Expand all" control sits next to "Share" in the filterbox. (Moved here from
   style.min.css. See Layout::renderRestoredFilterBox and restored-public.js expandAll.) */
#openexpandbtn {
  margin-left: 8px;
  cursor: pointer;
}

/* "View all" link (homepage -> full /section page) + "Load more" button (section page). These
   replace the old inline low-ranks toggle; same centered, subtle row look. The row carries the
   shared .section-more-row class so the tag filter skips it. (See HomeView::renderRestoredSectionMore.) */
.section-loadmore,
.section-viewall {
  display: block;
  width: 100%;
  text-align: center;
  color: #bdbdbd;
  padding: 7px 0;
  cursor: pointer;
  text-decoration: none;
}

.section-loadmore:hover,
.section-viewall:hover {
  color: #fff;
  background-color: #1d1d1d;
}

.section-loadmore[data-loading="y"] {
  opacity: 0.6;
  cursor: default;
}

.restored-review-placeholder {
  display: block !important;
}

.restored-review-empty {
  color: #999;
  margin: 0 0 10px 0;
  text-align: center;
}

.submission-page {
  padding: 0 15px;
}

.submission-panel {
  margin: 18px auto;
  max-width: 560px;
  border: 1px solid #2b2b2b;
  background: #1a1a1a;
  padding: 15px;
}

.submission-panel h2 {
  margin: 0 0 12px;
}

.site-submission-status {
  margin: 0 0 12px;
  color: #999;
}

.site-submission-status.ok {
  color: #91c491;
}

.site-submission-status.error {
  color: #d59898;
}

.site-submission-form {
  display: grid;
  gap: 10px;
}

.site-submission-form label {
  display: grid;
  gap: 6px;
  color: #999;
  font-size: 13px;
}

.site-submission-form input,
.site-submission-form select,
.site-submission-form textarea {
  width: 100%;
  border: 1px solid #464646;
  background: #111;
  color: #fff;
  padding: 9px 10px;
  font: inherit;
}

.site-submission-form textarea {
  min-height: 100px;
  resize: vertical;
}

.site-submission-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #999;
}

.site-submission-actions button {
  border: 1px solid #575757;
  border-radius: 3px;
  padding: 7px 12px;
  background: #323232;
  color: #d5d5d5;
  cursor: pointer;
}

.site-submission-login {
  margin: 0;
}

.submission-rules {
  color: #b5b5b5;
}

#everythingmoe_thread {
  display: block;
}

#comment-btn {
  display: block;
}

.site-ss:hover .left-btn,
.site-ss:hover .right-btn {
  visibility: visible;
}

.site-ss-img {
  width: 178px;
  height: 100px;
  object-fit: cover;
  background: #101213;
}

/* Enlarged screenshot in the click-to-open viewer. It had NO size limit, so high-res uploads
   rendered at full pixels and filled the screen. Cap with an absolute desktop ceiling (720px,
   a comfortable modal -- not the whole screen; iterated 720 -> 900 -> 1200 toward the original's un-capped size) plus a viewport fit for phones; tall shots are
   bounded by max-height. width/height auto keeps the aspect ratio and never upscales small shots. */
.ss-full {
  max-width: min(90vw, 1200px);
  max-height: 85vh;
  width: auto;
  height: auto;
}

.comment-status-line {
  color: #999;
  text-align: center;
  margin: 2px 0 12px 60px;
  font-size: 14px;
}

.comment-status-line.ok,
.comment-composer-message.ok {
  color: #8ddf9c;
}

.comment-status-line.error {
  color: #ff8d8d;
}

.comment-vote-score {
  display: inline-block;
  color: #9f9f9f;
  margin-left: 6px;
}

.comment-delete-btn {
  color: rgb(159, 95, 95);
  cursor: pointer;
  display: inline-block;
  margin-right: 5px;
}

.comment-delete-btn:hover {
  color: rgb(159, 95, 95);
}

.bookmark-remove-btn,
.bookmark-remove-btn .mdil {
  color: rgb(159, 95, 95);
}

.bookmark-remove-btn:hover,
.bookmark-remove-btn:hover .mdil {
  color: rgb(159, 95, 95);
}

/* Bookmark toggle in an expanded row: the pin's colour IS the state -- amber when this
   site is bookmarked, default grey otherwise. Click toggles it (see toggleBookmark()). */
.bookmark-btn.bookmarked,
.bookmark-btn.bookmarked .mdil {
  color: #e6b450;
}

.bookmark-btn.bookmarked:hover,
.bookmark-btn.bookmarked:hover .mdil {
  color: #f2cd7a;
}

.own-comment-badge {
  background-color: #2d3336;
  color: #b9d8df;
}

.comment-composer .c-tool-btn {
  line-height: 28px;
}

@media screen and (max-width: 500px) {
  #content-search.restored-force-search {
    display: block;
  }

  .comment-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .site-submission-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Blur is retired: NSFW is now hidden server-side (home/section lists) or via
   display:none (search) -- never blurred. Keep this unconditional override so the
   legacy blur in style.min.css never flashes on a default-ON page load. */
.nsfwsection > a {
  filter: none;
}

/* Semantic headings added for SEO are styled to render exactly like the original
   inline title elements they replaced: neutralize the browser's default heading
   margin / size / weight so nothing shifts visually. (#info-header pins its own
   size+margin via its id, so it needs no reset here.) */
h1.title-text,
h2.title-text {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

h1.topinfo-title {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* Static content pages: the first heading is now an <h1>; match the existing
   #about-base h2 look so size/color don't shift. */
#about-base h1 {
  font-size: 1.5em;
  color: #fff;
  margin: 0 0 12px;
}

/* Visually hidden but crawlable/announced: gives utility pages (activity, changelog)
   a semantic h1 without changing the visible layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#legend-dead.legend-active {
  background-color: #2c4033;
  color: #cfe9d6;
}

#legend-dead.legend-clickable {
  cursor: pointer;
}

#legend-dead .legend-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

#legend-dead .legend-ico {
  font-size: 18px;
  flex: none;
}

#legend-dead .legend-chevron {
  margin-left: auto;
  font-size: 18px;
  transition: transform 0.15s;
}

#legend-dead.legend-open .legend-chevron {
  transform: rotate(180deg);
}

#legend-dead .legend-history {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#legend-dead.legend-open .legend-history {
  display: block;
}

#legend-dead .legend-event {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.4em;
  color: #d8d8d8;
}

#legend-dead .legend-when {
  flex: none;
  min-width: 86px;
  color: #9a9a9a;
}