/* changkun.de/library, in the home page's look: Inter, its ink grays, and
 * its navy for links; light or dark by the same choice. List pages have
 * three panes like Zotero's: the topic tree, the entries, and the selected
 * entry with its comments. Phones get one column. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-raised: #f4f4f4;
  --zebra: #fafafa;
  --text: #0d0d0d;
  --text-secondary: #525252;
  --navy: #38538f;
  --link: var(--navy);
  --sel: #e1e5ec;
  --link-tint: rgba(56, 83, 143, 0.08);
  --link-tint-strong: rgba(56, 83, 143, 0.14);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --good: #1f7a3a;
  --bad: #a33a2a;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #161616;
    --bg-raised: #262626;
    --zebra: #1c1c1c;
    --text: #ececec;
    --text-secondary: #b4b4b4;
    --navy: #9bb0e4;
    --sel: #2e333b;
    --link-tint: rgba(155, 176, 228, 0.10);
    --link-tint-strong: rgba(155, 176, 228, 0.18);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --good: #8fc79a;
    --bad: #e59a8c;
}
* { box-sizing: border-box; }
::selection { background: #555; color: #fff; }
/* The document scrolls, so the browser's elastic scroll works; the header is
   fixed, so it stays still. --hdr is the header's height, kept by library.js. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr, 53px); }
body {
  margin: 0;
  padding-top: var(--hdr, 53px);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 15px/24px 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
a { color: var(--text); text-decoration: none; }
.pane a, .comments a, table.fields a, a.bib, a.open { color: var(--link); }
a:hover { text-decoration: underline; }
.muted { color: var(--text-secondary); }
h1 { font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; margin: 28px 0 4px; }
h2 { font-size: 17px; font-weight: 600; margin: 36px 0 10px; }
h2 button { font-size: 14px; font-weight: 400; margin-left: 8px; vertical-align: 1px; }
p { margin: 6px 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0 10px;
  line-height: 28px;
  cursor: pointer;
}
button:hover { border-color: var(--text-secondary); }
button.primary { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
button.primary:hover { opacity: .85; }
button.link { background: none; border: 0; padding: 0; color: var(--text-secondary); line-height: inherit; }
button.link:hover { color: var(--navy); text-decoration: underline; }
input, select, textarea {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 3px 8px;
}
textarea { width: 100%; display: block; }
form.inline { display: inline; }
label { display: block; margin: 6px 0; }
label.check { display: inline-flex; gap: 4px; align-items: center; }

main { flex: 1; padding: 0 clamp(16px, 3vw, 40px) 48px; }
main:has(> .app) { padding: 0; }

.page { max-width: 1000px; }
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: var(--bg); }
header.site {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  /* 16px at the top and right puts the theme button where the home page has it. */
  padding: 16px 16px 16px clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--border);
}
.site-name { font-weight: 600; display: flex; align-items: baseline; gap: 8px; margin-right: auto; }
/* The home page's theme button. */
.theme-toggle {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover { color: var(--text); background: var(--bg-raised); border-color: var(--border-strong); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="light"] .icon-sun, [data-theme="dark"] .icon-moon { display: none; }
.site-name a, .site-name span { color: var(--text); }
.site-name .sep { color: var(--text-secondary); font-weight: 400; }
h1 a.up { color: inherit; }
h1 .sub { font-weight: 400; color: var(--text-secondary); font-size: 0.72em; }
h1 .sub a { color: inherit; }
header nav { display: flex; gap: 20px; align-items: center; color: var(--text-secondary); }
/* The header's links and its one button read alike, as the home page's
 * plain text links. */
header nav a, header nav button { color: var(--text-secondary); }
header nav button { background: none; border: 0; padding: 0; line-height: inherit; }
header nav a:hover, header nav button:hover { color: var(--text); text-decoration: underline; }
header nav .synced { color: var(--text-secondary); font-size: 13px; }
.status { margin: 8px clamp(16px, 2vw, 24px); padding: 6px 10px; border-radius: 6px; background: var(--bg-raised); color: var(--text-secondary); }
.head .meta { margin: 0; color: var(--text-secondary); }
.head .meta a { color: var(--text-secondary); }
nav.topics { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; margin: 16px 0 4px; }
nav.topics .label { color: var(--text-secondary); margin-right: 4px; }
nav.topics a { padding: 1px 10px; border-radius: 999px; background: var(--link-tint); }
nav.topics a:hover { text-decoration: none; background: var(--link-tint-strong); }
nav.topics a.current { background: var(--link); color: var(--bg); }
nav.topics .n { color: var(--text-secondary); font-size: 13px; }
nav.topics a.current .n { color: inherit; opacity: 0.8; }
.status.bad, .note.bad, .tag.bad, .share-head .bad { color: var(--bad); }
.note.good { color: var(--good); }
.crumbs { margin: 0; color: var(--text-secondary); }
.crumbs a { color: var(--text-secondary); }

details { margin: 8px 0; }
summary { cursor: pointer; color: var(--text-secondary); }
.share-form form { max-width: 520px; margin: 6px 0 12px; }

.filter { display: flex; gap: 16px; align-items: center; margin: 16px 0 8px; flex-wrap: wrap; }
.filter input { width: 420px; max-width: 100%; }
.filter .count { color: var(--text-secondary); }
.filter .bib { margin-left: auto; }

table { border-collapse: collapse; width: 100%; }
table.entries { table-layout: fixed; }
table.entries th {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-strong);
  padding: 2px 8px;
}
table.entries th a { color: inherit; }
table.entries td.t a { font-weight: 400; }
table.entries th .added { font-weight: 400; margin-left: 8px; }
ul.tree li.current > a { font-weight: 600; color: var(--navy); }
table.entries td {
  padding: 0 8px;
  height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.entries .y { width: 64px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
table.entries .a { width: 20%; color: var(--text-secondary); }
table.entries .v { width: 14%; color: var(--text-secondary); }
table.entries .c { width: 96px; text-align: right; color: var(--text-secondary); }
table.entries tr.row:nth-child(4n+3) td { background: var(--zebra); }
table.entries tr.row.cur td { background: var(--bg-raised); }
table.entries tr.row.cur td:first-child { box-shadow: inset 2px 0 0 var(--link); }
table.entries tr.row:hover td { background: var(--bg-raised); }
table.entries tr.more td { white-space: normal; height: auto; padding-bottom: 10px; background: var(--link-tint); }
.actions { display: flex; gap: 18px; margin-top: 4px; }
.pager { display: flex; gap: 14px; }
.keys { font-size: 13px; margin-top: 16px; }

.entry h1 { max-width: 960px; }
.entry .authors { color: var(--text-secondary); max-width: 960px; }
table.fields { width: auto; margin: 8px 0; }
table.fields th { text-align: left; font-weight: 500; color: var(--text-secondary); padding: 0 16px 0 0; vertical-align: top; white-space: nowrap; }
table.fields td { padding: 0; overflow-wrap: anywhere; }
.abstract { max-width: 820px; line-height: 1.6; }
pre.bibtex {
  font: 13px/20px var(--mono);
  background: var(--bg-raised);
  padding: 8px 10px;
  border-radius: 4px;
  overflow-x: auto;
  max-width: 960px;
}

#comments { max-width: 820px; }
.post { padding: 6px 0; }
.post .by { font-weight: 600; margin-right: 6px; }
.post.suggestion { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.post .state { margin-left: auto; color: var(--text-secondary); }
.post .state.added { color: var(--good); font-weight: 600; }
.line-form { display: flex; gap: 8px; align-items: stretch; margin: 10px 0 0; max-width: 820px; }
.line-form textarea { flex: 2; resize: vertical; min-height: 34px; }
.line-form input { flex: 1; }
.post a, table.fields td a, .inbox .what a { text-decoration: underline; text-decoration-color: var(--border-strong); }
.post .meta { color: var(--text-secondary); font-size: 13px; }
.post .ref, .inbox .ref { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.post-form { margin: 8px 0 16px; }

table.inbox td { padding: 6px 8px; vertical-align: top; border-bottom: 1px solid var(--border); }
table.inbox td:first-child { width: 24px; }
table.inbox .what { width: 100%; }
table.inbox .when { white-space: nowrap; color: var(--text-secondary); width: 140px; }
table.inbox .who { white-space: nowrap; width: 120px; }
table.inbox tr.unread .what { font-weight: 600; }
table.inbox tr.unread .what .muted { font-weight: 400; }

.shares-page { max-width: 880px; }
section.share { border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin: 16px 0; }
section.share.created { border-color: var(--text-secondary); }
.share-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.share-head h2 { margin: 0; font-size: 20px; }
.share-head .badge { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--bg-raised); color: var(--text-secondary); }
.share-head .share-topics { color: var(--text-secondary); }
.share-head .share-topics a { color: var(--text-secondary); }
table.links { width: 100%; border-collapse: collapse; }
table.links td { padding: 4px 12px 4px 0; vertical-align: middle; }
table.links .name { width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
table.links .acts { width: 1%; white-space: nowrap; padding-right: 0; }
table.links .acts form { margin-left: 12px; }
table.links tr.revoked .name { color: var(--text-secondary); text-decoration: line-through; }
.link-field { width: 100%; font: 13px var(--mono); color: var(--text-secondary); background: var(--bg-raised); border-color: transparent; }
.add-members { display: flex; gap: 8px; margin: 10px 0 0; }
.add-members input { flex: 1; max-width: 360px; }
details.settings { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
details.settings summary { cursor: pointer; color: var(--text-secondary); font-size: 14px; }
.share-edit { display: grid; gap: 10px; max-width: 480px; margin-top: 10px; }
.share-edit label:not(.check) { display: grid; gap: 4px; }
.share-edit fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.share-edit legend { color: var(--text-secondary); margin-bottom: 4px; }
.share-edit p { margin: 0; }

@media (max-width: 640px) {
  table.entries .a, table.entries .v, table.entries .c,
  table.entries th.a, table.entries th.v, table.entries th.c { display: none; }
  .keys { display: none; }
  header.site { flex-wrap: wrap; }
}

/* Three panes. Each scrolls on its own. */
/* Three panes, as in bobook: the list is the page and scrolls with the
   window, so macOS elastic scrolling bounces only the list. The topics and
   the selected entry are fixed to the window and scroll on their own. */
.app { --side: var(--side-w, 240px); --pane: var(--pane-w, 380px); }
.app > .side, .app > .pane, .app > .grip { position: fixed; top: var(--hdr, 53px); bottom: 0; overflow-y: auto; }
.app > .side { left: 0; width: var(--side); }
.app > .grip[data-grip=side] { left: var(--side); width: 5px; }
.app > .grip[data-grip=pane] { right: var(--pane); width: 5px; }
.app > .pane { right: 0; width: var(--pane); }
.app > .list { margin: 0 calc(var(--pane) + 5px) 0 calc(var(--side) + 5px); min-width: 0; }
.grip { cursor: col-resize; background: var(--border); background-clip: content-box; padding: 0 2px; touch-action: none; }
.grip:hover, .grip.drag { background: var(--text-secondary); padding: 0 1px; }
.app.resizing { user-select: none; cursor: col-resize; }
.app.no-pane > .list { margin-right: 0; }
/* The list scrolls with the window, whose scrollbar sits at the window's
   edge, over the right pane. On a wide screen it is hidden, and library.js
   draws an overlay bar at the list's right edge instead. */
@media (min-width: 901px) {
  html:has(.app) { scrollbar-width: none; }
  html:has(.app)::-webkit-scrollbar { display: none; }
}
.vbar { position: fixed; top: var(--hdr, 53px); bottom: 0; right: calc(var(--pane) + 5px); width: 12px; z-index: 10; opacity: 0; transition: opacity .3s; }
.app.no-pane > .vbar { right: 0; }
.vbar.on, .vbar:hover, .vbar.drag { opacity: 1; transition: opacity .1s; }
.vbar > i { position: absolute; right: 2px; width: 7px; border-radius: 4px; background: var(--text-secondary); opacity: .55; }
.vbar:hover > i, .vbar.drag > i { width: 9px; opacity: .7; }
@media (max-width: 900px) { .vbar { display: none; } }
.app.no-pane > .pane, .app.no-pane > .grip[data-grip=pane] { display: none; }
.pane .close { float: right; margin: 10px 0 0 12px; font-size: 20px; line-height: 20px; color: var(--text-secondary); }
.head .actions-line { display: flex; gap: 16px; margin: 4px 0 0; }
.head .actions-line a { color: var(--link); }
.side { background: var(--bg-raised); padding: 12px 8px 24px; font-size: 14px; }
.side .side-box > summary { display: none; }
.side details { margin: 0; }
.list { padding: 0 20px 32px; }
.list .head h1 { margin-top: 18px; }
.pane { padding: 4px 20px 32px; }
.pane .empty { margin-top: 24px; }
.pane h1 { font-size: 19px; line-height: 26px; margin: 6px 0 4px; }
.pane h2 { font-size: 15px; margin: 22px 0 6px; }
.pane .abstract { font-size: 14px; line-height: 1.55; }
.pane pre.bibtex { font-size: 12px; line-height: 18px; }
.pane table.fields { font-size: 14px; }
.pane .line-form { flex-direction: column; }
.pane .line-form textarea { min-height: 60px; }
.pane .line-form button, .stack-form button { align-self: flex-start; }
.stack-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pane .post.suggestion { display: block; }
.pane .post.suggestion .state { float: right; }
.kind .open { margin-left: auto; font-size: 14px; }
.kind { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--text-secondary); font-size: 13px; }

ul.tree, .side ul { list-style: none; margin: 0; padding: 0; columns: auto; }
.side ul ul { padding-left: 14px; }
.side li { break-inside: avoid; }
.side summary { list-style: none; cursor: pointer; display: block; color: inherit; }
.side summary::-webkit-details-marker { display: none; }
.side a.node { display: block; padding: 2px 8px 2px 20px; border-radius: 5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.side summary > a.node::before { content: '›'; position: absolute; left: 7px; color: var(--text-secondary); transition: transform .1s; }
.side details[open] > summary > a.node::before { transform: rotate(90deg); }
.side a.node:hover { background: var(--border); text-decoration: none; }
.side a.node.current { background: var(--sel); font-weight: 600; }
.side a.node .n { color: var(--text-secondary); font-size: 12px; margin-left: 2px; }
.side a.node.current .n { color: inherit; opacity: .8; }

table.entries .i { width: 30px; padding: 0 0 0 8px; }
svg.ti { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; flex: none; }
.ti-article { color: #2a5bd7; }
.ti-conf { color: #7a4ad0; }
.ti-preprint { color: #c2622a; }
.ti-report { color: #4c6a85; }
.ti-book, .ti-chapter { color: #9a6b2f; }
.ti-thesis { color: #b23b3b; }
.ti-web { color: #1d8a8a; }
.ti-code { color: #555; }
.ti-data { color: #2f8a46; }
.ti-slides, .ti-media { color: #b0408a; }
.ti-doc { color: var(--text-secondary); }
[data-theme="dark"] .ti-article { color: #8cb0ff; }
[data-theme="dark"] .ti-conf { color: #b79bff; }
[data-theme="dark"] .ti-preprint { color: #f0a070; }
[data-theme="dark"] .ti-report { color: #9db8d0; }
[data-theme="dark"] .ti-book, [data-theme="dark"] .ti-chapter { color: #d8ab6e; }
[data-theme="dark"] .ti-thesis { color: #f08a8a; }
[data-theme="dark"] .ti-web { color: #6fd0d0; }
[data-theme="dark"] .ti-code { color: #bbb; }
[data-theme="dark"] .ti-data { color: #7fd395; }
[data-theme="dark"] .ti-slides, [data-theme="dark"] .ti-media { color: #f08ace; }
table.entries tr.row { cursor: default; }
table.entries tr.row.sel td { background: var(--sel); }
table.entries tr.row.sel td a { text-decoration: none; }

@media (max-width: 1600px) {
  table.entries .v, table.entries th.v { display: none; }
}

@media (max-width: 900px) {
  .app > .side, .app > .pane { position: static; width: auto; overflow: visible; }
  .app > .list { margin: 0; }
  .grip { display: none; }
  .side { border: 0; border-bottom: 1px solid var(--border); padding: 8px; }
  .side .side-box > summary { display: block; color: var(--text-secondary); padding: 0 8px 4px; }
  .pane { border: 0; border-top: 1px solid var(--border); }
  .pane .empty { display: none; }
}