/* Public frontend rules. Loaded after page styles; artwork and reading layouts
   stay in their own stylesheets. Widths describe the outer, border-box shell. */
:root {
    --color-paper: #f5f1eb;
    --color-surface: #fff;
    --color-muted: #737373;
    --width-home: 1200px;
    --width-directory: 1120px;
    --width-content: 1000px;
    --width-reading: 840px;
    --page-gutter: 24px;
    --panel-padding: 24px;
    --panel-radius: 8px;
    --space-section: 24px;
    --text-directory: 24px;
    --text-hero: 28px;
    --text-section: 20px;
    --text-card: 20px;
    --control-size: 44px;
}
body { background: var(--color-bg); }
main :is(a, button, input, select, textarea, summary):focus-visible,
footer a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Four deliberate page widths, with the same content edges at each width. */
.home-page { max-width: var(--width-home); }
.collection-directory, .books-directory, .guide-directory, .allusions-directory,
.authors-page, .poems-page, .quotes-page, .search-page {
    max-width: var(--width-directory);
}
.poem-detail-container,
.author-detail-page, .quote-detail-container, .collection-detail-page.collection-container,
.cipai-detail-page.cipai-container, .tag-catalog-page, .dynasty-page,
.book-detail, .book-reading-layout, .allusion-detail, .correction-page {
    max-width: var(--width-content);
}
.guide-detail, .editorial-page { max-width: var(--width-reading); }
.home-page, .collection-directory, .books-directory, .guide-directory, .guide-detail,
.allusions-directory, .authors-page, .poems-page, .quotes-page, .search-page,
.poem-detail-container, .author-detail-page, .quote-detail-container,
.collection-detail-page.collection-container, .cipai-detail-page.cipai-container,
.tag-catalog-page, .dynasty-page, .book-detail, .book-reading-layout,
.allusion-detail, .correction-page, .editorial-page {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}
.guide-directory, .guide-detail { margin-top: 24px; }
.allusion-surface { background: var(--color-bg); }
.taxonomy-directory .page-header, .guide-directory-heading, .allusions-heading,
.dynasty-hero { background-color: var(--color-paper); border-radius: var(--panel-radius); }

/* Breadcrumbs: white standalone strip, or embedded in a catalog header. */
main .breadcrumb {
    margin: 0 0 16px;
    padding: 0 var(--panel-padding);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-muted);
}
main .breadcrumb ol { gap: 0 8px; font-size: inherit; color: inherit; }
main .breadcrumb li { gap: 8px; min-height: var(--control-size); overflow-wrap: anywhere; }
main .breadcrumb li + li::before { content: '›'; margin: 0; color: var(--color-muted); font-size: 16px; flex: none; }
main .breadcrumb a { min-height: var(--control-size); }
main .breadcrumb li[aria-current='page'] {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    color: var(--color-text);
}
main .catalog-header > .breadcrumb, main .catalog-toolbar > .breadcrumb {
    margin: 0;
    padding: 0 var(--panel-padding);
    font-size: 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
main .catalog-toolbar > .breadcrumb { padding: 0; }
main .catalog-header > .breadcrumb, .catalog-toolbar {
    position: relative;
    margin-bottom: 8px;
}
main .catalog-header > .breadcrumb::after, .catalog-toolbar::after {
    content: '';
    position: absolute;
    left: var(--panel-padding);
    right: var(--panel-padding);
    bottom: 0;
    height: 1px;
    background: var(--color-border);
    pointer-events: none;
}
main .education-directory .catalog-header > .breadcrumb::after,
main .collections-directory .catalog-toolbar::after {
    content: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.catalog-header { border-radius: var(--panel-radius); margin-bottom: 12px; }
.catalog-header :is(.quotes-filters, .poems-work-disclosure) {
    margin: 0 var(--panel-padding) 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.catalog-header :is(.book-filters, .dynasty-filter) { margin: 0 var(--panel-padding) 12px; }
.catalog-filter-heading { margin: 0 0 8px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--color-text-light); }
.poems-filters { margin: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
.poems-filter-link, .quote-filter-link, .book-filter-options a, .book-category-root,
.book-filters .book-categories a, .book-filters .book-classification-row > a.book-filter-label,
.dynasty-tag, .pagination a, .page-nav, .knowledge-pagination a {
    min-height: var(--control-size);
    min-width: var(--control-size);
    display: inline-flex;
    align-items: center;
}
.poems-filter-more summary, .quote-filter-more summary { min-height: var(--control-size); display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.poems-filter-label, .quote-filter-label { padding-top: 12px; }

/* Native details are closed in server HTML. JS opens them on desktop;
   without JS their summaries and server-rendered links remain operable. */
.catalog-disclosure { min-width: 0; }
.catalog-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--control-size);
    list-style: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.catalog-disclosure > summary::-webkit-details-marker { display: none; }
.disclosure-label { flex: none; color: var(--color-accent); }
.disclosure-close-label, .catalog-disclosure[open] > summary .disclosure-open-label { display: none; }
.catalog-disclosure[open] > summary .disclosure-close-label { display: inline; }
.catalog-disclosure:not([open]) > :not(summary) { display: none; }
.catalog-disclosure[open] > nav { margin-top: 12px; }
@media (min-width: 769px) {
    .catalog-disclosure.is-responsive > summary { display: none; }
    .catalog-disclosure.is-responsive[open] > nav { margin-top: 0; }
}

/* Typography follows content role; book and guide article titles keep their
   existing display size. Small metadata and sidebar titles remain separate. */
.collection-directory:not(.taxonomy-directory) .page-title { font-size: var(--text-directory); }
.taxonomy-directory .page-title, .guide-directory-heading h1,
.allusions-heading h1, .dynasty-page .dynasty-hero h1 { font-size: var(--text-hero); }
.search-page > h1 { font-size: var(--text-directory); }
.correction-heading h1, .editorial-page h1,
.collection-detail-page .collection-title { font-size: var(--text-hero); }
.tag-catalog-header h1, .cipai-detail-page .cipai-heading { font-size: var(--text-directory); }
.collection-directory .section-title, .guide-group-heading h2,
.guide-section-heading h2, .guide-further h2, .author-detail-page .section-title,
.author-detail-page .guide-section-heading h2, .poem-detail-container .content-section-title,
.quote-detail-page .content-section-title, .knowledge-section h2,
.allusion-detail .knowledge-section h2, .collection-detail-page .category-title,
.tag-catalog-guides > h2, .tag-catalog-works > h2, .editorial-page h2 {
    font-size: var(--text-section);
    line-height: 1.6;
}
.poems-page .poem-title, .cipai-detail-page .poem-title,
.authors-page .author-info h2, .collection-directory .collection-name,
.collection-directory .edu-name, .guide-directory .guide-card h3,
.books-directory .book-card h2, .tag-catalog-poem h3, .knowledge-entry-card h2,
.allusions-directory .knowledge-entry-card h2 {
    font-size: var(--text-card);
    overflow-wrap: anywhere;
}

/* Consistent surfaces, keeping the paper color for contextual knowledge. */
.poems-page .poem-card, .quote-sheet, .quote-detail-page .content-section,
.poem-detail-container .content-section, .author-detail-page .author-bio-section, .author-detail-page .author-extra-section,
.tag-catalog-header, .tag-catalog-works, .book-reading, .book-reading-aside,
.poem-detail-container .sidebar-card, .quote-detail-page .sidebar-card {
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
}
.quote-sheet { border-left: 3px solid rgba(192, 72, 81, .3); }
.tag-catalog-header { background: var(--color-surface); margin: 0 0 var(--space-section); padding: var(--panel-padding); }
.tag-catalog-header h1 { padding-left: 12px; border-left-width: 3px; }
.tag-catalog-guides { background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--panel-radius); padding: var(--panel-padding); }
.tag-catalog-works { padding: var(--panel-padding); }
.book-reading, .allusion-reading, .correction-sheet { padding: var(--panel-padding); border-radius: var(--panel-radius); }
.allusion-contents a, .book-reading-quick-nav a { min-height: var(--control-size); display: inline-flex; align-items: center; }
.guide-group { padding-left: var(--panel-padding); padding-right: var(--panel-padding); }
.quote-detail-page .quote-card { background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--panel-radius); }
.knowledge-section, .knowledge-entry-card { background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--panel-radius); padding: var(--panel-padding); }
.cipai-detail-page .cipai-header { background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--panel-radius); box-shadow: var(--shadow); padding: var(--panel-padding); }
.tag-guide-disclosure { border-top: 1px solid var(--color-border); margin-top: 12px; padding-top: 12px; }
.tag-guide-disclosure .tag-catalog-guide + .tag-catalog-guide { margin-top: 12px; }
.tag-catalog-poem h3 a { display: flex; align-items: center; min-height: var(--control-size); }
.tag-catalog-backlink, .cipai-backlink, .book-enter { display: inline-flex; align-items: center; min-height: var(--control-size); }
.poems-page .tool-btn, .poem-detail-container .tool-btn,
.poems-page .poem-card-footer.member-action-bar .tool-btn,
.poem-detail-container .poem-detail-tools.member-action-bar .tool-btn,
.cipai-detail-page .poem-card-footer.member-action-bar .tool-btn,
.cipai-detail-page .poem-list-section .tool-btn,
.quote-detail-page .section-tool-btn,
main .member-controls button,
.poems-page .poem-detail-link, .poems-page .poem-reading summary {
    min-height: var(--control-size);
    min-width: var(--control-size);
}
.poems-page .poem-reading[open] { padding-bottom: var(--control-size); }
body > header .member-user-trigger { min-height: var(--control-size); min-width: var(--control-size); }

footer .footer-links { gap: 0 16px; }
footer :is(.footer-links a, p, .footer-icp a) { color: var(--color-muted); }
footer :is(.footer-links a, .footer-icp a) { display: inline-flex; align-items: center; min-height: var(--control-size); min-width: var(--control-size); justify-content: center; }
body > header .nav-search { width: var(--control-size); }
body > header .nav-actions > li > a { min-width: var(--control-size); }
body > header .site-navigation .logo { display: inline-flex; align-items: center; min-height: var(--control-size); }
@media (max-width: 768px) {
    :root {
        --page-gutter: 16px;
        --panel-padding: 16px;
        --space-section: 20px;
        --text-directory: 22px;
        --text-hero: 24px;
        --text-section: 18px;
        --text-card: 18px;
    }
    body > header .nav-search-item { display: list-item; }
    body > header .nav-actions > li > a, body > header .nav-explore-trigger { min-width: var(--control-size); width: auto; }
    body > header .nav-explore-trigger { width: var(--control-size); }
    .catalog-header .book-filters { padding-top: 0; margin: 0 var(--panel-padding) 12px; }
    .poems-page .tool-btn { min-width: var(--control-size); }
    .catalog-header .poems-work-disclosure { padding-top: 0; margin-bottom: 12px; }
    .poems-work-disclosure .catalog-filter-heading { display: none; }
    .tag-catalog-guides { grid-template-columns: 1fr; gap: 4px; margin-bottom: 16px; }
    .tag-catalog-guides > h2 { padding: 0; }
    .tag-catalog-guide-list { padding: 0; border: 0; }
    .tag-catalog-guide { min-height: var(--control-size); gap: 12px; padding: 8px 0; }
    .tag-catalog-guide-list > .tag-catalog-guide p { display: none; }
    .tag-catalog-guide-action { display: none; }
    .tag-guide-disclosure { margin-top: 4px; padding-top: 4px; }
    .tag-catalog-header { gap: 4px; }
    .tag-catalog-guides h3 { overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
    body > header .site-navigation { padding-left: 16px; padding-right: 16px; }
    body > header #memberAuthNav > a[href='/login.html'] { font-size: 0; width: var(--control-size); padding: 0; gap: 0; }
    body > header .site-navigation .logo img { width: 128px; }
}