style.css

:root {
    --content-margin-left: 20px;
    --card-w: 380px;
    --card-gap: 18px;
    /* Sidebar width on desktop (>= 900px). Below that it slides off-canvas. */
    --sidebar-w: 250px;
    /* Arduino teal accent — used for active sort, focus rings, hero accents,
       pick dots, sparkline ticks (via activity.css --activity-new-color). */
    --accent: #00979D;
    --accent-dark: #006b6f;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Courier New', monospace;
    background-color: white;
    color: black;
    line-height: 1.4;
    /* Sidebar + main shell. Below 900px the sidebar slides off-canvas and
       the layout collapses to a single full-width column. */
}

/* Link styles */
a {
    color: black !important;
    text-decoration: underline;
}

a:visited {
    color: black !important;
}

a:hover {
    color: #333 !important;
}

/* =========================================================================
   LAYOUT SHELL
   Two-column grid: a persistent card-catalog sidebar and the main content
   pane that switches between views. The catalog-card motif (monospace,
   black/white/grey, teal accent, hover-inversion) is carried into every
   sidebar control so the navigation reads as part of the same physical
   card catalog.
   ========================================================================= */
@media (min-width: 900px) {
    body {
        display: grid;
        grid-template-columns: var(--sidebar-w) 1fr;
        grid-template-areas: "sidebar main";
        min-height: 100vh;
    }
}

@media (max-width: 899px) {
    body {
        display: block;
    }
}

/* =========================================================================
   SIDEBAR (card-catalog card catalog)
   ========================================================================= */
.sidebar {
    font-family: 'Courier New', monospace;
    background-color: white;
    border-right: 1px solid black;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* On desktop the sidebar is a sticky, independently-scrolling column. */
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    grid-area: sidebar;
    z-index: 200;
}

.sidebar-brand {
    padding: 18px 18px 14px;
    border-bottom: 1px solid black;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-brand-title {
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.15;
}

.sidebar-brand-sub {
    font-size: 10px;
    color: #666;
    font-style: italic;
    letter-spacing: 0.2px;
}

.view-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border-bottom: 1px solid black;
}

.view-nav-item {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    background-color: white;
    color: black;
    border: none;
    border-left: 3px solid transparent;
    padding: 11px 18px 11px 15px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.view-nav-item:hover {
    background-color: black;
    color: white;
}

.view-nav-item.active {
    background-color: black;
    color: white;
    border-left-color: var(--accent);
}

.sidebar-group {
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-group:last-of-type {
    border-bottom: none;
}

.sidebar-label {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #999;
    padding: 4px 18px 8px;
}

.sidebar-foot {
    margin-top: auto;
    padding: 12px 18px 16px;
    font-size: 9px;
    color: #999;
    letter-spacing: 0.3px;
    border-top: 1px solid #e0e0e0;
}

/* Sort list — the .sort-buttons block restyled as a vertical stack. The
   delegated click handler in setupSortButtons() is unchanged; it still
   listens on .sort-buttons. */
.sidebar-group .sort-buttons {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 12px;
}

.sort-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sort-btn {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    text-transform: uppercase;
    padding: 8px 14px;
    border: 1.5px solid black;
    background-color: white;
    color: black;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
    font-weight: bold;
    line-height: 1.2;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Inside the sidebar, sort buttons become full-width rows (radio-like). */
.sidebar-group .sort-btn {
    width: 100%;
    border: none;
    border-left: 3px solid transparent;
    justify-content: flex-start;
    padding: 9px 12px;
    font-size: 12px;
    background-color: transparent;
}

.sidebar-group .sort-btn:hover {
    background-color: black;
    color: white;
    border-left-color: var(--accent);
}

.sidebar-group .sort-btn.active {
    background-color: black;
    color: white;
    border-left-color: var(--accent);
}

/* Keep the standalone .sort-btn palette for any non-sidebar sort usage. */
.sort-btn:hover {
    background-color: black;
    color: white;
}

.sort-btn.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: white;
}

.sort-btn.active:hover {
    background-color: var(--accent-dark);
    color: white;
}

/* =========================================================================
   SUBJECT (card-catalog drawer rail) — restyled as a vertical list.
   The folder-tab clip-path + top spine becomes a flat row with a colored
   LEFT spine (the Dewey-decimal hue). renderDrawerRail() / selectDrawer /
   syncDrawerActive() JS is unchanged.
   ========================================================================= */
.sidebar-group .drawer-rail {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0 12px;
}

.drawer-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px;
    margin: 0 0 0 0;
    padding: 14px 0 0;
}

/* Vertical-list drawer tab (sidebar context). */
.sidebar-group .drawer-tab {
    --spine: #000;
    position: relative;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    color: black;
    background-color: transparent;
    border: none;
    border-left: 3px solid var(--spine, #000);
    padding: 8px 10px 8px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    clip-path: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-group .drawer-tab .drawer-tab-spine {
    display: none; /* the colored left border IS the spine now */
}

.sidebar-group .drawer-tab-label {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-group .drawer-tab-count {
    font-size: 10px;
    font-weight: normal;
    color: #666;
    letter-spacing: 0.25px;
    flex-shrink: 0;
}

.sidebar-group .drawer-tab:hover {
    background-color: black;
    color: white;
}
.sidebar-group .drawer-tab:hover .drawer-tab-count {
    color: #999;
}
.sidebar-group .drawer-tab.active {
    background-color: black;
    color: white;
    border-left-color: var(--accent);
}
.sidebar-group .drawer-tab.active .drawer-tab-count {
    color: #999;
}

/* The standalone (non-sidebar) folder-tab drawer tab styling is retained
   for any out-of-sidebar usage and for the comments/history. */
.drawer-tab {
    --spine: #000;
    position: relative;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    color: black;
    background-color: white;
    border: 1px solid black;
    border-bottom: none;
    padding: 14px 14px 10px;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 92px;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px)
    );
    transition: background-color 0.15s ease, color 0.15s ease;
}

.drawer-tab-spine {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--spine, #000);
    pointer-events: none;
}

.drawer-tab-label {
    margin-top: 2px;
}

.drawer-tab-count {
    font-size: 10px;
    font-weight: normal;
    color: #666;
    letter-spacing: 0.25px;
}

.drawer-tab:hover {
    background-color: black;
    color: white;
}
.drawer-tab:hover .drawer-tab-count {
    color: #999;
}

.drawer-tab.active {
    background-color: black;
    color: white;
}
.drawer-tab.active .drawer-tab-count {
    color: #999;
}
.drawer-tab.active .drawer-tab-spine {
    filter: brightness(1.6) saturate(1.2);
}

.drawer-tab-all .drawer-tab-spine,
.drawer-tab-more .drawer-tab-spine {
    background: #000;
}
.drawer-tab-all.active .drawer-tab-spine,
.drawer-tab-more.active .drawer-tab-spine {
    background: #fff;
}

/* Platform filter list inside the sidebar */
.sidebar-group .platform-filters {
    display: none;
}

.sidebar-group #platformButtons {
    padding: 0 12px;
    margin-top: 0;
    flex-direction: column;
    gap: 0;
    max-height: none;
    transition: none;
}

.sidebar-group #platformButtons.collapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.sidebar-group #platformButtons .filter-btn {
    width: 100%;
    border: none;
    border-left: 3px solid transparent;
    justify-content: flex-start;
    padding: 7px 10px 7px 12px;
    font-size: 11px;
    background-color: transparent;
    max-width: none;
}

.sidebar-group #platformButtons .filter-btn:hover {
    background-color: black;
    color: white;
    border-left-color: var(--accent);
}

.sidebar-group #platformButtons .filter-btn.active {
    background-color: black;
    color: white;
    border-left-color: var(--accent);
}

/* The sidebar platform header is a collapsible label row. */
.sidebar-group .sidebar-label#platformHeader {
    cursor: pointer;
    user-select: none;
    padding: 4px 18px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =========================================================================
   MAIN CONTENT
   ========================================================================= */
.main {
    grid-area: main;
    padding: 0 var(--content-margin-left);
    min-width: 0;
}

@media (max-width: 899px) {
    .main {
        padding: 56px var(--content-margin-left) 0;
    }
}

.search-container {
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 18px;
    padding: 14px 0 16px;
    background-color: white;
}

.search-nav {
    margin-top: 10px;
}

.search-nav-title {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    color: #666;
}

.search-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-nav-link {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid #ccc;
    background-color: white;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.search-nav-link:hover {
    background-color: #f0f0f0;
    border-color: #999;
    color: #333;
}

.search-box {
    width: 100%;
    margin-bottom: 0;
    padding: 14px 16px;
    border: 2px solid black;
    background-color: white;
    font-family: 'Courier New', monospace;
    font-size: 16px;
}

.search-box:focus {
    outline: none;
    background-color: black;
    color: white;
}

/* clear button — needs a home; sit it at the right of the search box. */
.search-container .clear-search-btn {
    position: absolute;
    top: 22px;
    right: 4px;
}

.clear-search-btn {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: #666;
    padding: 0;
    margin: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    line-height: 1;
}

.clear-search-btn:hover {
    color: #000;
}

/* The category filter row is superseded by the sidebar subject list.
   Kept in the DOM (hidden) for state sync / treemap / e2e. */
.category-filters {
    display: none;
}

.platform-filters {
    margin-bottom: 16px;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.filter-buttons.collapsed {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
}

.filter-btn {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    text-transform: uppercase;
    padding: 6px 12px;
    border: 1px solid black;
    background-color: white;
    color: black;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-btn:hover {
    background-color: black;
    color: white;
}

.filter-btn.active {
    background-color: black;
    color: white;
}

/* =========================================================================
   VIEWS — one visible at a time. switchView() toggles .is-active.
   ========================================================================= */
.view {
    display: none;
    animation: viewIn 0.18s ease;
}

.view.is-active {
    display: block;
}

@keyframes viewIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =========================================================================
   SERENDIPITY HERO — the first-class discovery action. Two large inviting
   buttons at the top of the Discover view. They reuse the existing sort
   pipeline (Surprise Me = surprise-me sort, Shuffle = shelf-order sort).
   ========================================================================= */
.serendipity-hero {
    display: flex;
    gap: 14px;
    margin: 0 0 24px;
    flex-wrap: wrap;
}

.hero-btn {
    flex: 1 1 240px;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 18px 22px;
    border: 2px solid black;
    background-color: white;
    color: black;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    line-height: 1.2;
}

.hero-btn-icon {
    font-size: 22px;
    line-height: 1;
}

.hero-btn:hover {
    background-color: black;
    color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

.hero-btn:active {
    transform: translateY(1px);
}

/* The Surprise button gets the teal accent as its lead action. */
#heroSurprise {
    border-color: var(--accent);
    color: var(--accent);
}

#heroSurprise:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: white;
}

@media (max-width: 480px) {
    .serendipity-hero {
        flex-direction: column;
        gap: 10px;
    }
    .hero-btn {
        flex-basis: auto;
        font-size: 14px;
        padding: 15px 18px;
    }
}

/* =========================================================================
   SHARED SECTION/HEADER STYLES
   ========================================================================= */
.section-header {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.section-header.collapsible {
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    user-select: none;
    padding: 4px 0;
}

.collapse-indicator {
    font-size: 14px;
    font-weight: bold;
    transition: transform 0.2s ease;
    margin-right: 10px;
    order: -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid black;
    line-height: 1;
}

.section-header.collapsible:hover {
    background-color: #f9f9f9;
}

.section-header.expanded .collapse-indicator {
    transform: rotate(45deg);
}

/* View title (For AI Agents / About headers inside their views). */
.view-title {
    border-bottom: 1px solid black;
    margin-bottom: 16px;
}

/* About content (also used for the MCP view). */
.about-content {
    transition: all 0.3s ease;
    overflow: hidden;
    margin-top: 4px;
    padding: 0;
    max-height: 2000px;
}

.about-content.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.about-content p {
    margin: 0 0 14px;
    line-height: 1.6;
    font-size: 14px;
    color: #333;
}

.about-content a {
    color: #0066cc;
    text-decoration: underline;
}

/* =========================================================================
   LIBRARY GRID + CARDS (catalog-card aesthetic — unchanged motif)
   ========================================================================= */
.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
    gap: var(--card-gap);
    grid-auto-rows: 280px;
    justify-content: start;
}

/* Search grouping styles */
.search-group {
    margin-bottom: 30px;
    width: 100%;
}

.search-group-header {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid black;
    color: black;
    width: 100%;
}

.search-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
    gap: var(--card-gap);
    grid-auto-rows: 280px;
    justify-content: start;
    width: 100%;
}

.library-card {
    /* Catalog-card aesthetic: black/white/grey only, no decorative color.
       The card is a flex column with a call-number row at the top, a thin
       rule, the title (the visual anchor), by-statement, description, and
       a meta row at the bottom anchored by margin-top:auto. */
    border: 1px solid black;
    padding: 16px 18px;
    background-color: white;
    color: black;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    height: 280px;
    /* Cards are <button> elements; reset font so the body monospace applies */
    font-family: 'Courier New', monospace;
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 6px;
}

.library-card:hover {
    background-color: black;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Call-number row — the tiny mono owner/repo above the title. Evokes the
   top-left shelfmark on a physical LOC card. */
.library-card .call-number {
    font-size: 10px;
    line-height: 1.2;
    color: #999;
    letter-spacing: 0.5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 14px;
}

.library-card .pick-dot {
    display: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
    flex-shrink: 0;
}

/* When a card has a pick kind, show a small dot next to the call number
   as a vertical-scan anchor. Color matches the corner badge palette but
   remains small. */
.library-card.pick-editor .pick-dot {
    display: inline-block;
    background: var(--accent);
}
.library-card.pick-themed .pick-dot {
    display: inline-block;
    background: #333;
}
.library-card.pick-computed .pick-dot {
    display: inline-block;
    background: #000;
}

.library-card:hover .call-number,
.library-card:hover .by-statement,
.library-card:hover .meta-row,
.library-card:hover .chips-row,
.library-card:hover .library-description {
    color: inherit;
}

.library-card:hover .call-number {
    color: #ccc;
}

/* The catalog rule — thin black line that separates the call-number row
   from the title. */
.library-card .card-rule {
    height: 1px;
    background: #000;
    margin: 0 -18px;
    width: calc(100% + 36px);
}

.library-card:hover .card-rule {
    background: #fff;
}

/* Tiny 90-day version-history sparkline rendered as the first flex item
   of every .library-card. One 1px-wide <rect> per day; idle days render
   as a faint grey stub, days with a published version render as a taller
   teal tick. Sits inline above the call-number row so it never collides
   with the absolute-positioned .pick-badge in the top-right corner. */
.library-card .card-spark {
    display: block;
    width: 90px;
    height: 14px;
    flex-shrink: 0;
    align-self: flex-start;
}

.library-card .card-spark .tick-on {
    fill: var(--activity-new-color, var(--accent));
}

.library-card .card-spark .tick-off {
    fill: var(--activity-stale-color, #b3b3b3);
}

.library-card:hover .card-spark .tick-on {
    fill: #fff;
}

.library-card:hover .card-spark .tick-off {
    fill: #555;
}

/* Title — the visual anchor of the card. */
.library-name {
    font-weight: bold;
    font-size: 22px;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.library-card .by-statement {
    font-size: 12px;
    font-style: italic;
    color: #333;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.library-card:hover .by-statement {
    color: #ccc;
}

.library-description {
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #222;
    margin: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.library-card:hover .library-description {
    color: #ddd;
}

/* Subject chips — category + top architectures, inline, uppercase, dot-separated.
   Catalog-card convention: subjects are a quiet line of metadata, not pill UI. */
.library-card .chips-row {
    font-size: 10px;
    line-height: 1.3;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: auto;
}

.library-card .chips-row .chip-dot {
    margin: 0 6px;
    color: #999;
}

.library-card .chips-row .chip-more {
    color: #999;
}

.library-card:hover .chips-row {
    color: #ccc;
}

/* Meta row — version, stars, updated, license. Single line, tight. */
.library-card .meta-row {
    font-size: 10px;
    line-height: 1.3;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid #000;
}

.library-card:hover .meta-row {
    border-top-color: #fff;
    color: #ccc;
}

.library-card .meta-row .meta-version {
    font-weight: bold;
    color: #000;
}

.library-card:hover .meta-row .meta-version {
    color: #fff;
}

.library-card .meta-row .meta-stars {
    font-weight: bold;
}

.library-card .meta-row .meta-sep {
    color: #999;
}

.library-card:hover .meta-row .meta-sep {
    color: #555;
}

.library-card .meta-row .meta-license {
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
}

.pick-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 3px 6px;
    background-color: white;
    color: black;
    border: 1px solid black;
    letter-spacing: 0.5px;
    z-index: 2;
    pointer-events: none;
}

.pick-badge.editor {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}

.pick-badge.themed {
    background-color: #333;
    color: white;
    border-color: #333;
}

.pick-badge.new {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}

.pick-badge.updated {
    background-color: #ff8c00;
    color: white;
    border-color: #ff8c00;
}

.loading {
    text-align: center;
    padding: 50px;
    font-size: 16px;
}

.no-results {
    text-align: center;
    padding: 50px;
    border: 1px solid black;
    margin-top: 20px;
}

/* Load More Button Styles */
.load-more-container {
    text-align: center;
    margin: 30px 0;
    padding: 20px;
}

.load-more-btn {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    text-transform: uppercase;
    padding: 15px 30px;
    border: 2px solid black;
    background-color: white;
    color: black;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 10px;
}

.load-more-btn:hover {
    background-color: black;
    color: white;
}

.load-more-info {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

/* =========================================================================
   RESPONSIVE — card sizing breakpoints (kept from the original design).
   The sidebar layout breakpoint is 900px (handled above); these 1200/768/480
   rules only shrink the card grid inside .main.
   ========================================================================= */
@media (max-width: 1200px) {
    :root {
        --card-w: 340px;
        --card-gap: 16px;
    }

    .library-grid {
        grid-auto-rows: 260px;
    }

    .search-group-grid {
        grid-auto-rows: 260px;
    }

    .library-card {
        height: 260px;
        padding: 14px 16px;
    }

    .library-name {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    :root {
        --content-margin-left: 10px;
        --card-w: 280px;
        --card-gap: 12px;
    }

    .library-grid {
        grid-auto-rows: 240px;
    }

    .search-group-grid {
        grid-auto-rows: 240px;
    }

    .library-card {
        height: 240px;
        padding: 12px 14px;
    }

    .library-name {
        font-size: 18px;
    }

    .library-card .card-rule {
        margin: 0 -14px;
        width: calc(100% + 28px);
    }

    .search-nav-links {
        gap: 6px;
    }

    .search-nav-link {
        font-size: 9px;
        padding: 3px 6px;
    }

    .filter-buttons {
        gap: 5px;
    }

    .filter-btn {
        padding: 6px 10px;
        font-size: 10px;
    }

    .sort-btn {
        padding: 8px 12px;
        font-size: 10px;
    }
}

/* =========================================================================
   LIBRARY DETAIL MODAL
   ========================================================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: white;
    border: 3px solid black;
    max-width: 900px;
    max-height: 90vh;
    width: 90%;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    position: relative;
}

.modal-header {
    padding: 20px;
    border-bottom: 2px solid black;
    background-color: #f9f9f9;
}

.modal-title {
    font-size: clamp(20px, 4vw, 36px);
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-wrap: anywhere;
}

.copy-name-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 7px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
}

.copy-name-btn:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: 2px solid black;
    border-radius: 2px;
    font-size: 18px;
    font-weight: bold;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background-color: black;
    color: white;
}

.modal-body {
    padding: 20px;
}

.detail-section {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

.detail-section:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    color: #666;
}

.detail-value {
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

.detail-value a {
    color: black;
    text-decoration: underline;
}

.detail-value a:hover {
    background-color: black;
    color: white;
}

.neighbors-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid black;
}

.neighbors-title {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.neighbors-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 0;
}

.neighbor-card {
    min-width: 120px;
    border: 1px solid black;
    padding: 8px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 10px;
}

.neighbor-card:hover {
    background-color: black;
    color: white;
}

.neighbor-card.current {
    background-color: black;
    color: white;
    font-weight: bold;
}

.neighbor-name {
    font-weight: bold;
    margin-bottom: 3px;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.neighbor-author {
    font-size: 9px;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.neighbor-card:hover .neighbor-author {
    color: #ccc;
}

.neighbor-card.current .neighbor-author {
    color: #ccc;
}

.neighbor-card { padding: 8px 10px; }
.neighbor-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.neighbor-author { font-size: 10px; color: #666; font-style: italic; }
.neighbor-reason { font-size: 9px; color: #999; text-transform: uppercase; letter-spacing: 0.3px; }
.neighbor-empty { font-size: 12px; color: #666; font-style: italic; padding: 10px 0; }
.neighbor-card:hover .neighbor-reason { color: #ccc; }

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header {
        padding: 15px;
    }

    .modal-title {
        font-size: 24px;
        gap: 8px;
    }

    .modal-close {
        top: 10px;
        right: 20px;
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .copy-name-btn {
        font-size: 11px;
        padding: 3px 5px;
    }

    .modal-body {
        padding: 15px;
    }

    .neighbors-grid {
        gap: 8px;
    }

    .neighbor-card {
        min-width: 100px;
        padding: 6px;
    }
}

@media (max-width: 480px) {
    :root {
        --content-margin-left: 8px;
        --card-w: 220px;
        --card-gap: 8px;
    }

    .library-grid {
        grid-auto-rows: 220px;
    }

    .search-group-grid {
        grid-auto-rows: 220px;
    }

    .library-card {
        height: 220px;
        padding: 10px 12px;
    }

    .library-card .card-rule {
        margin: 0 -12px;
        width: calc(100% + 24px);
    }

    .library-name {
        font-size: 16px;
    }

    .library-description {
        font-size: 12px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .library-card .meta-row {
        font-size: 9px;
    }

    .modal-title {
        font-size: 18px;
        gap: 6px;
    }

    .modal-close {
        top: 8px;
        right: 16px;
        width: 26px;
        height: 26px;
        font-size: 14px;
    }

    .copy-name-btn {
        font-size: 10px;
        padding: 2px 4px;
    }

    .modal-header {
        padding: 12px;
    }

    .modal-body {
        padding: 12px;
    }
}

/* =========================================================================
   CURATED DISCOVERIES
   ========================================================================= */
.curated-discoveries {
    margin: 24px 0 32px;
}

.curated-row {
    margin-bottom: 35px;
}

.curated-section-header {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.curated-section-header::after {
    content: attr(data-count);
    font-size: 10px;
    color: #666;
    font-weight: normal;
    letter-spacing: 0;
}

.curated-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
    gap: var(--card-gap);
}

.curated-count {
    font-size: 12px;
    color: #666;
    font-weight: normal;
    letter-spacing: 0;
}

/* =========================================================================
   DRAWER HEADER + FOOTER — the active-subject label above the grid and the
   "showing X of Y" line below it. Now children of the Discover view.
   ========================================================================= */
.drawer-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    border-top: 3px solid black;
    border-bottom: 1px solid black;
    padding: 8px 0 8px;
    margin-bottom: var(--card-gap);
    background-color: white;
}

.drawer-header-tab {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: black;
}

.drawer-header-meta {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin-left: auto;
}

.drawer-footer {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    padding: 10px 0 4px;
    border-top: 1px solid #ddd;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .drawer-header-tab {
        font-size: 14px;
        letter-spacing: 1px;
    }
    .drawer-header-meta {
        font-size: 10px;
    }
    .drawer-footer {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .drawer-header {
        gap: 8px;
        padding: 6px 0;
    }
    .drawer-header-tab {
        font-size: 12px;
        letter-spacing: 0.75px;
    }
}

/* =========================================================================
   MOBILE SIDEBAR DRAWER (below 900px)
   The sidebar slides in off-canvas. A ☰ toggle and a backdrop control it.
   ========================================================================= */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 250;
    width: 38px;
    height: 38px;
    background-color: white;
    border: 2px solid black;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.sidebar-toggle:hover {
    background-color: black;
    color: white;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 180;
    /* Hidden by default via the [hidden] HTML attribute, which the JS
       toggles when the drawer opens/closes. */
}

/* On desktop the sidebar is persistent, so the backdrop is never relevant. */
@media (min-width: 900px) {
    .sidebar-backdrop {
        display: none !important;
    }
}

@media (max-width: 899px) {
    .sidebar-toggle {
        display: flex;
    }

    /* When the toggle is pressed and the sidebar is open, push the toggle
       so it stays visible above the backdrop. */
    .sidebar-toggle[aria-expanded="true"] {
        color: white;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(82vw, 300px);
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        border-right: 1px solid black;
        /* No longer a grid area; float above everything. */
        grid-area: auto;
        align-self: auto;
    }

    .sidebar.open {
        transform: translateX(0);
    }
}

/* Accessibility - Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* SEO and semantic improvements */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

/* Improve focus indicators for accessibility */
button:focus,
input:focus,
a:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}