/* Shared public browsing chrome: homepage, catalog, genres and rankings. */
body.public-library {
    --font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-family: var(--font-family);
    background: #fdf8f4;
}
html[data-theme="dark"] body.public-library { background: var(--color-bg-secondary); }
body.public-library .page-shell,
body.public-library .site-footer > .container {
    max-width: 1200px;
    padding-inline: 12px;
}
body.public-library .page-shell { padding-top: 28px; padding-bottom: 40px; }
body.public-library .section-title,
body.public-library .site-footer h4 {
    font-family: var(--font-family);
}
body.public-library .section-title {
    color: var(--color-primary);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.025em;
    padding-left: 0;
}
body.public-library .section-title::before { display: none; }
body.public-library .btn {
    font-family: var(--font-family);
    border-radius: 999px;
    box-shadow: none;
    letter-spacing: 0;
    min-height: 40px;
    font-size: 12px;
    font-weight: 500;
}
body.public-library .btn-primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}
body.public-library .btn-primary:hover { background: var(--color-primary-hover); }
html[data-theme="dark"] body.public-library .btn-primary { color: var(--primary-foreground); }
body.public-library .bottom-nav-label { font-size: 12px; white-space: nowrap; letter-spacing: 0; }
.public-library .story-browse-grid .card-views-overlay { font-size: 12px; letter-spacing: 0; }
.public-library .category-grid { gap: 16px; }
.public-library .category-card {
    padding: 20px 16px;
    border-radius: 12px;
    border-color: var(--color-border-light);
    box-shadow: none;
    transform: none;
}
.public-library .category-card::before { display: none; }
.public-library .category-card:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.public-library .category-card-title { font-family: var(--font-family); font-size: 14px; font-weight: 600; }
.public-library .category-card-desc,
.public-library .category-card-count { font-size: 12px; letter-spacing: 0; }
.public-library .browse-filters,
.public-library .ranking-filter-group,
.public-library .ranking-list,
.public-library .story-browse-grid {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    box-shadow: none;
}
.public-library .browse-filters,
.public-library .ranking-filter-group { padding: 16px; margin-bottom: 20px; }
.public-library .browse-filters { gap: 10px; }
.public-library .browse-filters input,
.public-library .browse-filters select {
    font: inherit;
    font-size: 13px;
    color: var(--color-text-primary);
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 999px;
    min-height: 40px;
    min-width: 0;
    padding: 8px 14px;
}
.public-library .browse-filters input { flex: 1 1 220px; }
.public-library .browse-filters select { padding-right: 32px; }
.public-library .ranking-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.public-library .ranking-filter-label { font-size: 13px; font-weight: 600; margin-right: 8px; }
.public-library .ranking-list { overflow: hidden; }
.public-library .ranking-story-row:nth-child(even) { background: transparent; }
.public-library .ranking-story-row:last-child { border-bottom: 0; }
.public-library .ranking-story-row:hover { background: var(--color-primary-light); }
.public-library .ranking-story-cover-image { aspect-ratio: 3 / 4; border-radius: 6px; }
.public-library .ranking-story-title { font-size: 14px; font-weight: 600; }
.public-library .ranking-category-links .badge { font-size: 12px; letter-spacing: 0; }
.public-library .story-browse-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-content: start;
    gap: 24px 20px;
    padding: 0;
    border: 0;
    background: transparent;
}
.public-library .story-browse-grid .story-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    border-radius: 20px;
    background: #fff;
    box-shadow: none;
    transform: none;
}
.public-library .story-browse-grid .story-card::after { display: none; }
html[data-theme="dark"] .public-library .story-browse-grid .story-card { background: var(--card); }
.public-library .story-browse-grid .card-img-wrap {
    flex-shrink: 0;
    margin: 8px 8px 0;
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    overflow: hidden;
}
.public-library .story-browse-grid .card-img { aspect-ratio: 3 / 4; }
.public-library .story-browse-grid .card-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 12px; }
.public-library .story-browse-grid .card-title,
.public-library .story-browse-grid .card-meta { margin: 0; }
.public-library .story-browse-grid .card-title {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    min-height: 39px;
}
.public-library .story-browse-grid .card-meta { font-size: 12px; letter-spacing: 0; }
.public-library .story-browse-grid .story-card-footer { align-items: flex-start; flex-direction: column; gap: 5px; margin-top: auto; }
.public-library .story-browse-grid .badge { font-size: 12px; letter-spacing: 0; padding: 3px 8px; min-height: 24px; }
.story-collection-description { margin:0 0 24px; color:var(--color-text-muted); line-height:1.7; }
.recent-updates-page .section-header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; }
.recent-updates-page .section-header > span { white-space:nowrap; }
.public-library .recent-updates-page .story-card { min-width:0; }
.public-library .recent-updates-page .card-title { font-size:14px; min-height:4.5em; -webkit-line-clamp:3; overflow-wrap:anywhere; }
.public-library .recent-updates-page .card-meta { overflow-wrap:anywhere; }
.story-card-update-time { display:block; color:var(--color-text-muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
@media (min-width: 1025px) {
    body.public-library .site-header {
        left: max(12px, calc((100vw - 1200px) / 2));
        right: max(12px, calc((100vw - 1200px) / 2));
    }
    body.public-library .header-search-form { width: 220px; min-width: 160px; }
    body.public-library .main-nav .btn-ghost { padding-inline: 8px; }
}
@media (min-width: 541px) and (max-width: 1024px) {
    .public-library .story-browse-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; gap: 20px 12px; }
}
@media (max-width: 768px) {
    body.public-library .section-title { font-size: 20px; }
    .public-library .browse-filters input { flex-basis: 100%; }
    .public-library .browse-filters select { flex: 1 1 140px; }
}
@media (max-width: 540px) {
    body.public-library .page-shell,
    body.public-library .site-footer > .container { padding-inline: 2.5vw; }
    body.public-library .section-title { font-size: 19px; }
    .public-library .story-browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; gap: 16px 12px; }
    .public-library .story-browse-grid .card-body { padding-inline: 8px; }
    .public-library .browse-filters,
    .public-library .ranking-filter-group { padding: 12px; }
    .public-library .ranking-filter-label { flex-basis: 100%; }
    .public-library .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .public-library .category-card { padding: 16px 12px; }
}

/* Completed catalog follows the framed cover cards on the homepage. */
.public-library .completed-story-list { padding-top: 28px; }
.public-library .completed-story-list .story-browse-grid {
    grid-template-columns: repeat(auto-fill, minmax(0, 160px));
    justify-content: start;
    gap: 24px 20px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.public-library .completed-story-list .story-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}
.public-library .completed-story-list .card-img-wrap {
    flex-shrink: 0;
    margin: 8px 8px 0;
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
}
.public-library .completed-story-list .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 12px;
}
.public-library .completed-story-list .card-title { margin: 0; }
.public-library .completed-story-list .card-meta { margin: 0; }
.public-library .completed-story-list .story-card-footer { margin-top: auto; }
html[data-theme="dark"] .public-library .completed-story-list .story-card { background: var(--card); }
@media (max-width: 540px) {
    .public-library .completed-story-list .story-browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
}

@media (max-width: 768px) {
    .public-library .browse-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-library .browse-filters input[type="search"] { grid-column: 1 / -1; width: 100%; }
    .public-library .browse-filters select,
    .public-library .browse-filters .btn { width: 100%; max-width: 100%; }
}
@media (max-width: 540px) {
    .public-library .browse-filters { grid-template-columns: minmax(0, 1fr) auto; }
    .public-library .browse-filters select { grid-column: 1 / -1; }
    .public-library .browse-filters #orderby-filter { grid-column: 1; }
    .public-library .browse-filters .btn { grid-column: 2; min-width: 64px; }
}