/* ═══════════════════════════════════════════════════════════════
   EXTRAS.CSS — Quick Library, fixes, upgrades, polish
═══════════════════════════════════════════════════════════════ */

/* ── cursor blink ─────────────────────────────────────────────── */
.t-cursor { display:inline-block; animation: tblink 1s step-end infinite; }
@keyframes tblink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── pub-body ─────────────────────────────────────────────────── */
.pub-body { min-width:0; }
.doi-link  { color:var(--accent); text-decoration:none; }
.doi-link:hover { text-decoration:underline; }
.oa-badge  { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:color-mix(in srgb,var(--green) 18%,transparent); color:var(--green); font-size:10px; letter-spacing:.1em; border:1px solid color-mix(in srgb,var(--green) 35%,transparent); }

/* ── bar chart labels ─────────────────────────────────────────── */
.pub-chart { display:flex; align-items:flex-end; gap:10px; min-height:200px; padding:20px; overflow-x:auto; scrollbar-width:thin; }
.pub-chart .bar { display:flex; flex-direction:column; align-items:center; gap:0; min-width:52px; cursor:pointer; }
.pub-chart .bar i { display:block; width:100%; border-radius:10px 10px 3px 3px; background:linear-gradient(to top,var(--accent3),var(--accent)); margin-bottom:6px; transition:.25s; }
.pub-chart .bar:hover i { filter:brightness(1.2); }
.pub-chart .bar-count { font-family:Syne,sans-serif; font-size:14px; font-weight:700; color:var(--text); line-height:1.2; }
.pub-chart .bar-year  { font-size:10px; color:var(--muted); letter-spacing:.06em; margin-top:2px; line-height:1.2; }

/* ── graph CSS animations ─────────────────────────────────────── */
#graphSvg .graph-link  { stroke:color-mix(in srgb,var(--accent) 28%,transparent); stroke-width:1; stroke-dasharray:4 3; opacity:0; transition:opacity .4s; }
#graphSvg .graph-node  { opacity:0; transition:opacity .4s, filter .25s; cursor:pointer; }
#graphSvg .graph-label { font-size:12px; fill:currentColor; pointer-events:none; opacity:.85; }
#graphSvg .graph-halo  { fill:color-mix(in srgb,var(--accent) 7%,transparent); stroke:none; }
#graphSvg.graph-ready .graph-link { opacity:1; }
#graphSvg.graph-ready .graph-node { opacity:1; }
#graphSvg .graph-node:hover, #graphSvg .graph-node:focus { filter:drop-shadow(0 0 10px var(--accent)) brightness(1.15); outline:none; }
.graph-tooltip { position:fixed; z-index:3000; pointer-events:none; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 14px; box-shadow:0 20px 60px rgba(0,0,0,.4); max-width:280px; color:var(--text); font-family:'Martian Mono',monospace; font-size:12px; display:none; }

/* ── QUICK LIBRARY ────────────────────────────────────────────── */
.quick-library-root { width:100%; }
.library-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.lib-filter { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:999px; cursor:pointer; font-family:'Martian Mono',monospace; font-size:11px; letter-spacing:.08em; transition:.2s; }
.lib-filter:hover { border-color:var(--accent); color:var(--accent); }
.lib-filter.active { background:color-mix(in srgb,var(--accent) 14%,transparent); border-color:var(--accent); color:var(--accent); }
.lib-count { background:color-mix(in srgb,var(--accent) 18%,transparent); border-radius:999px; padding:1px 7px; font-size:10px; }
.library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.lib-card { position:relative; border:1px solid var(--border); background:color-mix(in srgb,var(--surface) 88%,transparent); border-radius:20px; padding:22px 22px 18px; overflow:hidden; cursor:pointer; transition:all .3s; display:flex; flex-direction:column; gap:10px; }
.lib-card:hover { border-color:color-mix(in srgb,var(--accent) 50%,var(--border)); transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,.3); }
.lib-accent { position:absolute; top:0; left:0; right:0; height:3px; border-radius:20px 20px 0 0; }
.lib-theme { font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--accent); margin-top:4px; }
.lib-title { font-family:Syne,sans-serif; font-size:15px; line-height:1.35; color:var(--text); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.lib-source { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lib-footer { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); border-top:1px solid var(--border); padding-top:10px; margin-top:auto; }

/* ── social arrow ─────────────────────────────────────────────── */
.social-arrow { margin-left:auto; color:var(--accent); opacity:0; transition:.25s; }
.social-link:hover .social-arrow { opacity:1; transform:translateX(4px); }

/* ── toast ────────────────────────────────────────────────────── */
.toast { position:fixed; left:50%; bottom:36px; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:12px 22px; border-radius:999px; z-index:9999; box-shadow:0 8px 32px rgba(0,0,0,.35); font-size:13px; letter-spacing:.04em; transition:opacity .4s, transform .4s; pointer-events:none; white-space:nowrap; }

/* ── graph-ready animation ─────────────────────────────────────── */
#graphSvg:not(.graph-ready) circle,
#graphSvg:not(.graph-ready) line { opacity:0 !important; }

/* ── pub section quick-library section separation ─────────────── */
#quickLibrary.section-as-section { padding-top:80px; }

/* ── section id collision fix ─────────────────────────────────── */
section#quickLibrary > div#quickLibrary { padding:0 !important; border:none !important; background:transparent !important; box-shadow:none !important; }

/* ── light mode overrides for lib cards ───────────────────────── */
html.light-mode .lib-card { background:var(--surface); box-shadow:0 2px 16px rgba(0,0,0,.07); }
html.light-mode .lib-card:hover { box-shadow:0 20px 60px rgba(0,0,0,.12); }

/* ── graph SVG dark/light ─────────────────────────────────────── */
html.light-mode #graphSvg .graph-label { fill:var(--text); }
html.light-mode #graphSvg .graph-link  { stroke:color-mix(in srgb,var(--accent) 35%,transparent); }

/* ── responsive extras ─────────────────────────────────────────── */
@media (max-width:760px) {
  .library-grid { grid-template-columns:1fr 1fr; }
  .library-filters { gap:7px; }
  .lib-filter { font-size:10px; padding:7px 12px; }
}
@media (max-width:460px) {
  .library-grid { grid-template-columns:1fr; }
}