/* Navigation remains links; clear surfaces make the hit areas visible. */
.nav-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  margin-bottom: 8px;
  min-height: 48px;
}
.nav-item:hover {
  border-color: var(--theme-accent);
  background: var(--theme-pale);
}
.nav-item.active {
  border-color: var(--theme-accent);
}
.nav-item:focus-visible,
.article-tabs > a:focus-visible,
.reader-directory > a:focus-visible,
.guide-favorite:focus-visible,
.contents-disclosure :focus-visible,
.open-boss-result:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.article-tabs {
  gap: 8px;
  flex-wrap: wrap;
  white-space: normal;
  overflow: visible;
  padding: 0 0 14px;
}
.article-tabs > a,
.article-tabs > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
}
.article-tabs > a:hover,
.article-tabs > button:hover {
  border-color: var(--theme-accent);
  background: var(--theme-pale);
}
.article-tabs > a.active {
  border: 1px solid var(--theme-accent);
  background: var(--theme-pale);
  color: var(--theme-accent);
  font-weight: 700;
}
.reader-directory {
  gap: 10px;
  align-items: center;
}
.reader-directory > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: var(--theme-pale);
  color: var(--theme-accent);
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
}
.reader-directory > a:hover {
  border-color: var(--theme-accent);
}
.directory-shortcuts > .quiet-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: var(--paper);
  text-decoration: none;
}
.directory-shortcuts > .quiet-link:hover {
  border-color: var(--theme-accent);
}
.topbar .search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: 430px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.topbar .search-trigger:hover {
  border-color: var(--theme-accent);
}
.topbar .search-trigger:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* A section navigator is visually separate from the guide it controls. */
.reader-layout > .toc {
  padding: 0;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--paper);
  overflow: visible;
  align-self: start;
  max-height: none;
}
.toc .contents-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 16px;
  color: var(--theme-accent);
  background: var(--theme-pale);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  list-style: none;
  border-radius: 7px;
}
.toc .contents-disclosure > summary::-webkit-details-marker {
  display: none;
}
.toc .contents-disclosure > summary::marker {
  content: "";
}
.contents-disclosure > summary > svg {
  flex-shrink: 0;
  margin-left: auto;
}
.contents-disclosure[open] > summary > svg {
  transform: rotate(180deg);
}
.section-total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 25px;
  padding-inline: 5px;
  border: 1px solid var(--theme-line);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
}
.section-tools {
  padding: 14px 14px 8px;
  border-top: 1px solid var(--theme-line);
}
.section-search {
  position: relative;
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.section-search > span {
  display: block;
  margin-bottom: 6px;
}
.section-search input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 42px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.section-search input::placeholder {
  color: var(--muted);
}
.section-search button {
  position: absolute;
  right: 1px;
  bottom: 1px;
  min-width: 42px;
  min-height: 42px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
}
.section-tools p {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
}
.toc .contents-disclosure nav {
  border: 0;
  padding: 0 8px 10px;
  margin: 0;
  max-height: 54vh;
  overflow-y: auto;
}
.toc .contents-disclosure nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 9px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
  text-decoration: none;
  color: var(--text);
}
.toc .contents-disclosure nav a > svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--theme-accent);
}
.toc .contents-disclosure nav a.toc-h3 {
  padding-left: 22px;
  font-size: 12px;
}
.toc .contents-disclosure nav a:hover {
  background: var(--theme-pale);
  color: var(--theme-accent);
}
.toc .toc-back {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 14px;
  border-top: 1px solid var(--theme-line);
  margin: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The star extends the existing Saved collection and local-storage model. */
.has-guide-favorite {
  position: relative;
}
.has-guide-favorite h1 {
  padding-right: 58px;
}
.has-guide-favorite > .chapter-accent {
  right: 80px;
  opacity: 0.28;
}
.guide-favorite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--theme-accent);
  cursor: pointer;
}
.guide-favorite-top {
  position: absolute;
  top: 22px;
  right: 20px;
  z-index: 2;
}
.guide-favorite:hover {
  border-color: var(--theme-accent);
  background: var(--theme-pale);
}
.guide-favorite[aria-pressed="true"] {
  background: var(--theme-pale);
  border-color: var(--theme-accent);
}
.guide-favorite[aria-pressed="true"] > svg {
  fill: currentColor;
}
.saved-guide-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.saved-guide-list > li {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--theme-line);
  border-radius: 7px;
  margin-bottom: 10px;
  padding: 8px;
  background: var(--paper);
}
.saved-guide-list > li > a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  align-items: center;
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 6px 9px;
  text-decoration: none;
  color: var(--text);
}
.saved-guide-list strong {
  font-size: 15px;
  line-height: 1.6;
  grid-column: 1;
}
.saved-guide-list a > span {
  font-size: 12px;
  color: var(--muted);
  grid-column: 1;
}
.saved-guide-list a > svg {
  grid-column: 2;
  grid-row: 1/3;
  color: var(--theme-accent);
}
.saved-guide-list > li:hover {
  border-color: var(--theme-accent);
}
#saved-boss-section,
#saved-guide-section {
  margin-top: 34px;
}
#saved-boss-section > h2,
#saved-guide-section > h2 {
  font-size: 26px;
  margin-bottom: 20px;
}

/* Predictable search/filter controls: immediate counts and an explicit reset. */
.boss-search {
  position: relative;
}
.boss-search input {
  padding-right: 46px;
}
.clear-search {
  position: absolute;
  right: 1px;
  bottom: 1px;
  min-height: 44px;
  min-width: 44px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
}
.filter-summary {
  flex-wrap: wrap;
}
.open-boss-result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--theme-accent);
  border-radius: 6px;
  background: var(--theme-pale);
  color: var(--theme-accent);
  font-size: 12px;
  text-decoration: none;
}
.open-boss-result kbd {
  font-size: 10px;
  border: 1px solid var(--theme-line);
  padding: 2px 4px;
  border-radius: 3px;
}
.active-filter {
  min-height: 44px;
}
.library-groups[aria-busy="true"] {
  opacity: 0.65;
}
.library-controls {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 310px);
  align-items: end;
}
.library-controls .topic-filter {
  display: block;
  min-width: 0;
  font-size: 12px;
  color: var(--text);
}
.topic-filter > label {
  display: block;
  margin-bottom: 6px;
}
.topic-filter .ts-wrapper {
  margin: 0;
  min-width: 0;
  font-size: 14px;
}
.topic-filter .ts-control,
.topic-filter .ts-wrapper.single.input-active .ts-control {
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--text);
  box-shadow: none;
}
.topic-filter .ts-control > input {
  color: var(--text);
  font: inherit;
  min-width: 0;
}
.topic-filter .ts-control > input::placeholder {
  color: var(--muted);
}
.topic-filter .ts-wrapper.focus .ts-control {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.topic-filter .ts-wrapper.single .ts-control:after {
  border-color: var(--text) transparent transparent;
}
.topic-filter .ts-dropdown {
  margin-top: 5px;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  z-index: 25;
  box-shadow: 0 8px 24px #0003;
}
.topic-filter .ts-dropdown-content {
  max-height: 280px;
  padding: 4px;
}
.topic-filter .ts-dropdown .option {
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 4px;
  color: var(--text);
}
.topic-filter .ts-dropdown .option.selected {
  font-weight: 700;
  background: var(--theme-pale);
}
.topic-filter .ts-dropdown .option.active {
  background: var(--theme-accent);
  color: var(--paper);
}
.topic-filter .ts-dropdown .no-results {
  padding: 12px;
  color: var(--muted);
}
.topic-filter .ts-control .item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guide-favorite[hidden],
.clear-search[hidden],
[data-clear-section-search][hidden],
.open-boss-result[hidden],
.saved-guide-list > li[hidden],
.toc .contents-disclosure nav a[hidden] {
  display: none !important;
}
@media (max-width: 760px) {
  .reader-layout > .toc {
    position: static;
    margin-bottom: 22px;
    width: 100%;
  }
  .toc .contents-disclosure > summary {
    min-height: 56px;
  }
  .toc .contents-disclosure nav {
    max-height: 45vh;
  }
  .topbar .search-trigger {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    justify-content: center;
    padding: 10px;
  }
  .article-tabs {
    gap: 8px;
    overflow: visible;
    white-space: normal;
  }
  .article-tabs > a,
  .article-tabs > button {
    font-size: 12px;
    padding-inline: 12px;
  }
  .reader-directory > a {
    font-size: 12px;
  }
  .guide-favorite-top {
    top: 16px;
    right: 14px;
  }
  .has-guide-favorite > .chapter-accent {
    right: 62px;
  }
  .library-controls {
    grid-template-columns: 1fr;
  }
  .topic-filter .ts-dropdown-content {
    max-height: 38vh;
  }
}
@media (forced-colors: active) {
  .nav-item,
  .article-tabs > a,
  .reader-directory > a,
  .guide-favorite,
  .contents-disclosure,
  .open-boss-result {
    border-color: ButtonText;
  }
  .guide-favorite[aria-pressed="true"] > svg {
    fill: ButtonText;
  }
  .topic-filter .ts-dropdown .option.active {
    color: HighlightText;
    background: Highlight;
  }
}
@media print {
  .guide-favorite,
  .section-tools,
  .contents-disclosure,
  .open-boss-result {
    display: none !important;
  }
}

.library-controls .inline-search{width:100%;min-width:0}.library-controls .inline-search input{width:100%;min-width:0}.library-controls .topic-filter{width:100%}.topic-filter .ts-wrapper{width:100%}