/* Library: wing maps, article pages, backlinks */

/* Wing colours (light, then dark) */
:root { --w-liberal-arts: #855f12; --w-mathematics: #6a3fa0; --w-health: #2f6b2c; --w-engineering: #2f5876; --w-music: var(--ember); --w-academy: var(--lapis); --w-science: var(--teal); --w-canon: #8a3b5c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --w-liberal-arts: #e6bd60; --w-mathematics: #c5a6f5; --w-health: #8fd48a; --w-engineering: #9cc6e8; --w-canon: #f0a2c2; } }
:root[data-theme="dark"] { --w-liberal-arts: #e6bd60; --w-mathematics: #c5a6f5; --w-health: #8fd48a; --w-engineering: #9cc6e8; --w-canon: #f0a2c2; }
.w-liberal-arts { --accent: var(--w-liberal-arts); }
.w-mathematics { --accent: var(--w-mathematics); }
.w-health { --accent: var(--w-health); }
.w-engineering { --accent: var(--w-engineering); }
.w-music { --accent: var(--w-music); }
.w-academy { --accent: var(--w-academy); }
.w-science { --accent: var(--w-science); }
.w-canon { --accent: var(--w-canon); }
body[class*="w-"] { --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg)); }

.crumbs { font-size: .92rem; color: var(--ink-3); margin-bottom: 1rem; }
.crumbs a { color: var(--ink-2); }

/* Search */
.lib-search { max-width: 36rem; margin-top: 1.5rem; }
.lib-search input { font-size: 1.1rem; min-height: 3.25rem; padding-inline: 1rem; border-radius: 999px; }
#lib-count { margin: .75rem 0; }

/* Cards */
.lib-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.lib-card {
  display: grid; gap: .25rem; height: 100%; padding: 1rem 1.15rem; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-sm);
  transition: border-color .15s, transform .15s;
}
.lib-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.lib-card-title { font: 600 1.08rem/1.3 var(--serif); }
.lib-card-wing { font: 650 .72rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.lib-card-sum { color: var(--ink-2); font-size: .93rem; }

/* Wing grid on the library home */
.wing-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.wing-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-top: 5px solid var(--accent); border-radius: var(--r); padding: 1.4rem; box-shadow: var(--shadow);
}
.wing-head { text-decoration: none; color: var(--ink); }
.wing-head h2 { font-size: 1.45rem; margin: .1rem 0 .5rem; }
.wing-head:hover h2 { color: var(--accent); }
.wing-card > p { color: var(--ink-2); font-size: .95rem; }
.wing-list { padding-left: 1.1rem; margin: 0 0 1rem; font-size: .95rem; }
.wing-list li { margin-bottom: .25rem; }
.wing-list a { color: var(--ink); }
.wing-go { margin-top: auto; font-weight: 650; }
.tag-cloud .chip { text-decoration: none; display: inline-flex; gap: .35rem; align-items: center; }

/* Wing MOC */
.moc { display: grid; gap: 2.5rem; }
.moc-section h2 { font-size: 1.5rem; }
.moc-section h2 .mono { color: var(--accent); font-size: .9rem; margin-right: .35rem; vertical-align: middle; }

/* Article */
.lib-page { padding-block: clamp(2rem, 6vw, 4rem); }
.lib-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; }
@media (max-width: 960px) { .lib-layout { grid-template-columns: minmax(0, 1fr); } }
.lib-article { max-width: 46rem; }
.lib-head h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
.lib-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tag { font-size: .88rem; color: var(--ink-3); text-decoration: none; padding: .15rem .5rem; border-radius: 999px; background: var(--surface-2); }
.tag:hover { color: var(--accent); }

.prose { font-size: 1.06rem; line-height: 1.75; }
.prose h2 { font-size: 1.65rem; margin-top: 2.4rem; padding-top: .5rem; scroll-margin-top: 5rem; }
.prose h3 { font-size: 1.25rem; margin-top: 1.8rem; scroll-margin-top: 5rem; }
.prose h4 { font-size: 1.05rem; margin-top: 1.4rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: .35rem; }
.prose li > p { margin-bottom: .35rem; }
.prose blockquote { margin: 1.25rem 0; padding: .4rem 0 .4rem 1.1rem; border-left: 3px solid var(--accent); font-family: var(--serif); font-style: italic; color: var(--ink-2); }
.prose code { background: var(--surface-2); padding: .1em .35em; border-radius: 4px; }
.prose pre { background: var(--surface-2); padding: 1rem; border-radius: var(--r-sm); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { margin: 2rem 0; }
.prose .table-wrap { overflow-x: auto; margin: 1.25rem 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose thead th { font: 650 .75rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.prose a[href^="/library/"] { text-decoration-style: dotted; text-decoration-thickness: 1.5px; }
.prose .badge { font-size: .68rem; vertical-align: .15em; }

.lib-sources { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.lib-sources h2 { font-size: 1.1rem; font-family: var(--sans); }
.lib-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.lib-pager a { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; color: var(--ink); font-weight: 600; background: var(--surface); }
.lib-pager a:hover { border-color: var(--accent); }
.lib-pager .next { text-align: right; }
@media (max-width: 520px) { .lib-pager { grid-template-columns: 1fr; } .lib-pager .next { text-align: left; } }

.lib-aside { position: sticky; top: 5.5rem; display: grid; gap: 1.5rem; font-size: .93rem; max-height: calc(100vh - 7rem); overflow-y: auto; }
@media (max-width: 960px) { .lib-aside { position: static; max-height: none; border-top: 1px solid var(--line); padding-top: 1.5rem; } }
.lib-aside h2 { font: 650 .78rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .6rem; }
.lib-aside .count { display: inline-block; min-width: 1.4rem; padding: .1rem .35rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); text-align: center; margin-left: .2rem; }
.lib-toc, .lib-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.lib-toc a, .lib-links a { color: var(--ink-2); text-decoration: none; }
.lib-toc a:hover, .lib-links a:hover { color: var(--accent); text-decoration: underline; }
.wing-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); vertical-align: .05em; }

.wing-card h3 { font-size: 1.35rem; margin: .1rem 0 .5rem; }
.wings-more { margin-top: 2rem; }