/* Library components. The shared Carbon & Chartreuse foundations own all colors,
   typography families, controls, spacing, and the site's navigation. */
.library { padding-bottom: var(--space-24); overflow-wrap: anywhere; }
.library-hero { padding-block: 64px 48px; display: grid; grid-template-columns: minmax(0, 760px) 1fr; align-items: end; gap: 64px; }
.library-hero .eyebrow { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; }
.library-hero .eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--action); border: 1px solid var(--accent); }
.library-hero h1 { margin-bottom: 20px; }
.library-intro { font-size: 20px; line-height: 1.55; max-width: 650px; color: var(--muted); margin: 0; }
.library-principle { border-left: 1px solid var(--border); padding-left: 24px; color: var(--muted); font-size: 14px; margin-bottom: 4px; }
.library-principle strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 8px; }
.library-tools { padding-block: 8px 28px; border-bottom: 1px solid var(--border); }
.library-search-row { display: grid; grid-template-columns: minmax(0, 1fr) 208px 256px; gap: 16px; }
.library-search { position: relative; }
.library-search > svg { position: absolute; inset: 17px auto auto 18px; color: var(--muted); pointer-events: none; }
.library-search input { box-sizing: border-box; min-width: 0; width: 100%; min-height: 56px; border: 1px solid var(--input-border); border-radius: var(--control-radius); background: var(--surface); padding: 13px 52px; font-size: 16px; }
.library-search input::placeholder { color: var(--muted); opacity: 1; }
.library-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.library-search-clear { position: absolute; right: 6px; top: 6px; min-height: 44px; width: 44px; border: 0; background: transparent; border-radius: var(--control-radius); }
.library-search-clear:hover { background: var(--surface-soft); }
.library-select { position: relative; min-width: 0; }
.library-select select { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 100%; min-width: 0; min-height: 56px; border: 1px solid var(--input-border); background: var(--surface); color: var(--ink); border-radius: var(--control-radius); padding: 12px 48px 12px 16px; font-size: 16px; line-height: 1.5; }
.library-select > svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.library-select select:hover { border-color: var(--accent); }
.library-select select:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; }
.library-select select:focus-visible + svg { color: var(--accent); }
.library-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.library-reset { min-height: 44px; padding: 8px 0; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; color: var(--accent); white-space: nowrap; }
.library-collection-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
.library-collection-top h2 { font-size: 16px; line-height: 1.5; font-weight: 500; letter-spacing: 0; margin: 0; }
.library-collection-top h2 span { color: var(--muted); font-weight: 400; }
.library-layout { display: flex; gap: 4px; }
.library-layout button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 44px; border: 1px solid transparent; border-radius: var(--control-radius); font-size: 13px; color: var(--muted); background: transparent; }
.library-layout button[aria-pressed='true'] { border-color: var(--input-border); background: var(--surface); color: var(--ink); }
.library-list { list-style: none; margin: 0; padding: 0; }
.library-item { display: grid; grid-template-columns: 224px minmax(0, 1fr) 32px; gap: 32px; align-items: start; padding-block: 32px; border-top: 1px solid var(--border); margin: 0; }
.library-item:first-child { padding-top: 0; border-top: 0; }
.library-media { width: 100%; aspect-ratio: 8 / 5; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.library-media img { width: 100%; height: 100%; object-fit: contain; }
.library-media--fallback { padding: 24px; text-align: left; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.library-media--fallback strong { font-size: 18px; font-weight: 500; color: var(--ink); }
.library-media--fallback small { font-size: 11px; }
.library-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0 0 8px; }
.library-meta .library-format { color: var(--ink); font-weight: 500; }
.library-meta .library-dot { width: 3px; height: 3px; background: var(--muted); border-radius: 50%; }
.library-item h3 { margin: 0 0 10px; max-width: 760px; font-size: 24px; line-height: 1.3; letter-spacing: -.025em; }
.library-item h3 a { color: var(--ink); text-decoration: none; }
.library-item h3 a:hover { color: var(--accent); text-decoration: underline; }
.library-item-note { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0 0 12px; max-width: 76ch; }
.library-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.library-tags li { font-size: 11px; color: var(--muted); background: var(--surface-soft); border-radius: var(--control-radius); padding: 3px 8px; margin: 0; }
.library-arrow { margin-top: 32px; color: var(--accent); font-size: 24px; }
.library-list[data-view='grid'] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.library-list[data-view='grid'] .library-item { display: block; padding: 0; border: 0; }
.library-list[data-view='grid'] .library-media { margin-bottom: 20px; }
.library-list[data-view='grid'] .library-item h3 { font-size: 22px; }
.library-list[data-view='grid'] .library-arrow { display: none; }
.library-empty { border-block: 1px solid var(--border); padding: 64px 24px; text-align: center; }
.library-empty h3 { font-size: 24px; }
.library-empty p { color: var(--muted); margin-bottom: 16px; }
.library-footnote { border-top: 1px solid var(--border); margin-top: 40px; padding-top: 24px; color: var(--muted); font-size: 13px; max-width: 760px; }
.library-breadcrumb { font-size: 13px; color: var(--muted); padding-top: 24px; }
.library-breadcrumb ol { display: flex; align-items: center; gap: 12px; list-style: none; padding: 0; margin: 0; }
.library-breadcrumb li { display: flex; align-items: center; gap: 12px; margin: 0; flex-shrink: 0; }
.library-breadcrumb li + li::before { content: '/'; color: var(--muted); }
.library-breadcrumb li:last-child { display: block; min-width: 0; flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-breadcrumb li:last-child::before { margin-right: 12px; }
.library-breadcrumb a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.library-breadcrumb a:hover { text-decoration: underline; }
.library-detail-heading { padding-block: 32px 40px; max-width: 900px; }
.library-detail-heading .library-meta { margin-bottom: 20px; font-size: 13px; }
.library-detail-heading h1 { font-size: clamp(34px, 4.3vw, 52px); line-height: 1.13; margin-bottom: 20px; }
.library-detail-heading .library-byline { color: var(--muted); font-size: 15px; margin: 0; }
.library-detail-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(240px, 1fr); column-gap: 64px; align-items: start; }
.library-preview { grid-column: 1; grid-row: 1; margin: 0 0 40px; }
.library-preview .library-media { aspect-ratio: auto; min-height: 200px; }
.library-preview .library-media img { width: 100%; height: auto; }
.library-preview .library-media--fallback { min-height: 280px; padding: 40px; }
.library-preview .library-media--fallback strong { font-size: 32px; }
.library-preview .library-media--fallback small { font-size: 13px; }
.library-preview figcaption { font-size: 12px; margin-top: 12px; }
.library-reading { grid-column: 1; grid-row: 2; font-size: 18px; line-height: 1.8; }
.library-reading h2 { font-size: 28px; margin-bottom: 20px; }
.library-reading section { margin-bottom: 40px; }
.library-reading p { margin-bottom: 20px; }
.library-reading .library-note-attribution { font-size: 13px; color: var(--muted); margin-top: -8px; }
.library-reading blockquote { margin: 24px 0; padding-left: 24px; border-left: 3px solid var(--accent); font: 500 22px/1.6 var(--font-serif); }
.library-source { grid-column: 2; grid-row: 1 / span 2; border-top: 1px solid var(--ink); padding-top: 20px; }
.library-source h2 { font: 500 12px/1.6 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 20px; }
.library-source .btn { width: 100%; justify-content: space-between; padding-inline: 16px; }
.library-source dl { margin: 24px 0 16px; }
.library-source dl > div { margin-bottom: 16px; }
.library-source dt { font-size: 12px; color: var(--muted); }
.library-source dd { font-size: 14px; margin: 2px 0 0; overflow-wrap: anywhere; }
.library-source .text-link { font-size: 13px; font-weight: 400; }
.library-source-note { font-size: 12px; color: var(--muted); line-height: 1.65; }
.library-source .library-tags { margin: 24px 0; }
.library-citation { padding-top: 28px; border-top: 1px solid var(--border); margin-top: 32px; }
.library-citation-text { font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; margin-bottom: 0; }
.library-citation .citation-content-wrapper { gap: 12px; width: 100%; }
.library-reading .library-citation p { margin-bottom: 0; }
.library-copy-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.library-copy-actions button { display: flex; align-items: center; gap: 8px; min-height: 48px; border: 1px solid var(--input-border); border-radius: var(--control-radius); padding: 10px 12px; font-size: 13px; }
.library-copy-actions button:hover { background: var(--surface-soft); }
.library-copy-status { min-height: 22px; color: var(--muted); font-size: 12px; margin-top: 8px; }
.library-bibtex { margin-top: 12px; }
.library-bibtex summary { min-height: 44px; display: flex; align-items: center; font-size: 12px; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.library-bibtex pre { padding: 12px; margin: 0; background: var(--surface-soft); font: 11px/1.75 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--control-radius); }
.library-related { border-top: 1px solid var(--border); margin-top: 56px; padding-top: 40px; }
.library-related-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 24px; }
.library-related-heading h2 { font-size: 28px; margin: 0; }
.library-related-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 0; margin: 0; }
.library-related-list li { margin: 0; }
.library-related-list .library-media { margin-bottom: 20px; }
.library-related-list h3 { font-size: 20px; line-height: 1.3; margin-bottom: 12px; }
.library-related-list h3 a { color: var(--ink); text-decoration: none; }
.library-related-list h3 a:hover { text-decoration: underline; color: var(--accent); }
.library-related-list p { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0; }
.library-related-list .library-meta { margin-bottom: 8px; font-size: 12px; }
@media (max-width: 1100px) {
    .library-detail-layout { column-gap: 40px; }
    .library-hero { grid-template-columns: 1fr; gap: 32px; }
    .library-principle { display: none; }
}
@media (max-width: 850px) {
    .library-search-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .library-search { grid-column: 1 / -1; }
    .library-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .library-preview, .library-source, .library-reading { grid-column: 1; grid-row: auto; }
    .library-source { margin-bottom: 40px; }
    .library-source dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
    .library-source .btn { width: auto; min-width: 240px; }
    .library-list[data-view='grid'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .library-item { grid-template-columns: 176px minmax(0, 1fr); gap: 24px; }
    .library-arrow { display: none; }
    .library-related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .library { padding-bottom: 56px; }
    .library-hero { padding-block: 40px 32px; }
    .library-intro { font-size: 18px; }
    .library-hero h1 { font-size: 40px; }
    .library-search-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .library-search input { font-size: 15px; }
    .library-select select { min-height: 52px; }
    .library-filter-row { display: block; margin-top: 12px; }
    .library-reset { margin-top: 4px; }
    .library-tools { padding-bottom: 20px; }
    .library-collection-top { min-height: 80px; gap: 12px; }
    .library-layout button { padding-inline: 8px; }
    .library-layout button span { display: none; }
    .library-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 28px; }
    .library-media { aspect-ratio: 16 / 9; }
    .library-item h3 { font-size: 24px; }
    .library-item-note { font-size: 15px; }
    .library-list[data-view='grid'] { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .library-list[data-view='grid'] .library-item h3 { font-size: 24px; }
    .library-detail-heading { padding-block: 24px 28px; }
    .library-detail-heading .library-meta { margin-bottom: 16px; }
    .library-reading { font-size: 17px; }
    .library-reading h2 { font-size: 26px; }
    .library-source .btn { width: 100%; }
    .library-preview { margin-bottom: 32px; }
    .library-preview .library-media--fallback { padding: 24px; }
    .library-related { margin-top: 40px; padding-top: 32px; }
    .library-related-heading { display: block; margin-bottom: 24px; }
    .library-related-heading h2 { font-size: 26px; }
    .library-related-list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (forced-colors: active) {
    .library-select select { appearance: auto; -webkit-appearance: auto; padding-right: 16px; }
    .library-select > svg { display: none; }
}
@media print {
    .library-tools, .library-layout, .library-copy-actions { display: none !important; }
    .library-detail-layout { display: block; }
    .library-source { break-inside: avoid; }
    .library { padding-bottom: 0; }
}