/* HNHOT directory route styles. */

.feature-toolbar {
display: none; min-height: 42px; margin-bottom: 18px; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700;
}

.feature-toolbar a {
display: inline-flex; min-height: 38px; align-items: center; color: inherit;
}

.feature-root {
gap: 6px;
}

.feature-root:hover, .feature-section:hover {
color: var(--accent);
}

.feature-separator {
color: var(--line);
}

.feature-section {
color: var(--ink) !important;
}

.feature-back {
min-width: 0; gap: 7px;
}

.feature-back-arrow {
color: var(--muted); font-size: 15px; font-weight: 500;
}

.feature-back-label {
overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap;
}

.feature-back:hover .feature-back-label {
color: var(--accent);
}

.knowledge-page > .site-search, .directory-browser > .site-search {
margin-top: 20px;
}

.directory-browser > .site-search + .filter-tabs {
margin-top: 13px;
}

.knowledge-page {
width: min(980px, 100%);
}

.knowledge-header {
align-items: flex-start;
}

.knowledge-header > div {
max-width: 680px;
}

.knowledge-header p {
margin-top: 8px; line-height: 1.7;
}

.knowledge-grid {
display: grid; margin-top: 25px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}

.subject-directory-group {
margin-top: 32px;
}

.subject-directory-group > header {
display: flex; align-items: baseline; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line);
}

.subject-directory-group > header h2 {
margin: 0 0 11px; font: 700 24px/1.25 Georgia, "Noto Serif CJK SC", serif;
}

.subject-directory-group > header span {
color: var(--muted); font-size: 11px;
}

.subject-directory-group .knowledge-grid {
margin-top: 14px;
}

.knowledge-card {
display: flex; min-width: 0; min-height: 116px; padding: 19px; align-items: flex-start; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); box-shadow: var(--shadow);
}

.knowledge-card:hover {
border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
}

.knowledge-card h2 {
margin: 0; overflow-wrap: anywhere; font: 700 18px/1.5 Georgia, "Noto Serif CJK SC", serif;
}

.knowledge-card p {
margin: 7px 0 0; color: var(--muted); font-size: 11px;
}

.knowledge-card-count {
flex: 0 0 auto; color: var(--muted); font-size: 10px; white-space: nowrap;
}

.knowledge-card-count strong {
color: var(--accent); font: 800 21px/1 Georgia, serif;
}

.directory-browser {
margin-top: 22px;
}

.filter-tabs {
display: flex; padding: 0 0 14px; overflow-x: auto; gap: 8px; scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar {
display: none;
}

.filter-tabs button {
flex: 0 0 auto; min-height: 32px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px;
}

.filter-tabs button:hover {
border-color: var(--accent); color: var(--accent);
}

.filter-tabs button.active {
border-color: var(--accent); color: var(--on-accent); background: var(--accent);
}

.filter-tabs button span {
margin-left: 3px; color: currentColor; opacity: .72; font-size: 9px;
}

.directory-list {
margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); list-style: none;
}

.directory-row:not(:last-child) {
border-bottom: 1px solid var(--line-soft);
}

.directory-row a {
display: grid; min-height: 54px; padding: 11px 15px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
}

.directory-row a:hover {
background: color-mix(in srgb, var(--accent-soft) 52%, transparent);
}

.directory-row a > span {
display: grid; min-width: 0; gap: 2px;
}

.directory-row strong {
overflow-wrap: anywhere; font: 700 14px/1.45 var(--font-sans);
}

.directory-row small {
color: var(--muted); font-size: 10px;
}

.directory-row em {
color: var(--muted); font-size: 10px; font-style: normal; white-space: nowrap;
}

.directory-progress {
display: flex; min-height: 48px; padding: 12px 2px 0; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px;
}

.directory-progress button {
min-height: 38px; padding: 7px 13px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); background: var(--accent-soft); cursor: pointer; font-size: 11px; font-weight: 700;
}

.directory-progress button:hover {
color: var(--on-accent); background: var(--accent);
}

@media (max-width: 760px) {
.feature-shell .feature-toolbar {
top: 0; min-height: calc(48px + env(safe-area-inset-top)); padding-top: calc(5px + env(safe-area-inset-top));
}

.feature-toolbar {
position: sticky; top: calc(57px + env(safe-area-inset-top)); z-index: 38; display: flex; min-height: 48px; margin: -19px -16px 19px; padding: 5px max(16px, env(safe-area-inset-right)) 5px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line-soft); background: var(--bg);
}

.subjects-page .directory-browser {
margin-top: 18px;
}

.events-page .directory-browser,
  .documents-page .directory-browser {
margin-top: 18px;
}

.knowledge-grid {
grid-template-columns: 1fr;
}

.knowledge-card {
min-height: 100px; padding: 16px; box-shadow: none;
}

.knowledge-card h2 {
font-size: 16px;
}

.directory-browser {
margin-top: 18px;
}

.filter-tabs button {
min-height: 44px; padding: 8px 12px;
}

.directory-row a {
min-height: 52px; padding: 10px 12px;
}

.directory-progress {
align-items: flex-start; flex-direction: column;
}

.directory-progress button {
width: 100%; min-height: 44px; justify-content: center;
}
}

.document-reader-shell .feature-toolbar {
position: sticky; top: 0; z-index: 30; border-bottom: 0;
}

.reader-directory-trigger {
display: none;
}

@media (max-width: 760px) {
.document-reader-shell .detail-back-toolbar .feature-back {
min-width: 0; flex: 1 1 auto;
}

.reader-directory-trigger {
position: fixed;
    top: calc(7px + env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 80;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 8px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: var(--ink);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    box-shadow: var(--shadow);
    cursor: pointer;
}

.reader-directory-trigger svg {
width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}

.reader-directory-trigger:hover,
  .reader-directory-trigger[aria-expanded="true"] {
color: var(--accent); background: var(--accent-soft);
}

.reader-directory-trigger {
box-sizing: border-box;
    width: 38px;
    height: 38px;
    padding: 8px;
}
}