/* ============ Base ============ */
:root{
  --bg: #f4f6fa;
  --ink: #1e293b;
  --ink-dim: #475569;
  --surface: #ffffff;
  --nav: #0f172a;
  --primary: #0284c7;
  --success: #22c55e;
  --link: #2563eb;
  --ring: #93c5fd;
  --shadow: 0 2px 6px rgba(0,0,0,0.06);
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0;
  color: var(--ink);
  background: --bg;
  background: var(--bg);
  line-height: 1.6;
}

.container {
  width: min(1120px, 100%);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Accessibility */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: 8px;
  background: var(--surface); color: var(--ink);
  padding: 0.5rem 0.75rem; border-radius: 6px;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--ring); }

/* ============ Nav/AppShell ============ */
.app-nav {
  position: sticky; top: 0; z-index: 1000;
  background: var(--nav);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}
.nav-inner {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 1rem;
  height: 88px;
}

.logo img {
  height: 90px;
  width: auto;
  display: block;
  transition: transform .2s ease;
}
.logo img:hover { transform: scale(1.03); }

.nav-center { display: flex; justify-content: center; }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }

.nav-link {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: .5rem .25rem;
  border-radius: 6px;
}
.nav-link:hover,
.nav-link:focus { color: #e5edff; outline: none; }
.nav-link.active { color: #93c5fd; }

/* ORCID button kept compact */
.btn-orcid {
  background: #16a34a;
  color: #fff;
  padding: .5rem .75rem;
  font-size: .9rem;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-height: 40px;         /* stays within header area */
  white-space: nowrap;
}
.btn-orcid:hover,
.btn-orcid:focus { background: #15803d; outline: 2px solid var(--ring); outline-offset: 2px; }
.orcid-icon { height: 20px; width: 20px; }

/* Buttons & Inputs */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .625rem 1rem;
  border-radius: 8px; border: 1px solid transparent;
  font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .02s ease, background .2s ease, border .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: #0369a1; outline: 2px solid var(--ring); outline-offset: 2px; }
.btn-secondary { background: var(--success); color: #fff; }
.btn-secondary:hover, .btn-secondary:focus { background: #16a34a; outline: 2px solid var(--ring); outline-offset: 2px; }
.btn-link { color: var(--link); text-decoration: underline; padding: 0; border: none; background: none; }
.btn-link:hover, .btn-link:focus { text-decoration: none; outline: 2px solid var(--ring); outline-offset: 2px; }

.input {
  width: 100%; max-width: 520px;
  padding: .75rem 1rem;
  border: 1px solid #cbd5e1; border-radius: 10px;
  background: #fff; color: var(--ink);
  font-size: 1rem;
}
.input:focus { outline: 3px solid var(--ring); outline-offset: 1px; }
.input-pill { border-radius: 9999px; }

/* ============ Hero ============ */
.hero {
  background: var(--surface);
  color: var(--ink);
  padding: 4rem 0 2rem;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
}
.hero-title {
  font-size: clamp(2.2rem, 4vw + 1rem, 3.5rem);
  margin: 0 0 1rem 0;
  font-weight: 700;
}
.hero-tagline {
  font-size: 1.125rem;
  max-width: 820px;
  margin: 0 auto 1.75rem;
}
.search-wrap {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
}
.cta-buttons { margin-top: 1.25rem; }

/* Brand wordmarks */
.text-science {
  color: var(--primary);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.text-ecosystem {
  color: var(--success);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* ============ Panels/Content ============ */
.panel {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 1.5rem;
  margin: 2rem 0;
}
.panel h2 { font-size: 1.75rem; margin: 0 0 1rem; color: #0f172a; }
.panel p { font-size: 1.05rem; margin: 0 0 1rem; }
.panel ul { padding-left: 1.25rem; margin: .5rem 0 0; }
.panel li { margin: .35rem 0; }

/* Features grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.feature {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.25rem;
}
.feature h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.feature p { margin: 0; color: var(--ink-dim); }

/* Page header */
.page-header { margin: 2rem 0 1rem; }
.page-header h1 {
  font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
  margin: 0;
}
.lead { color: var(--ink-dim); margin-top: .5rem; }

/* Footer */
.site-footer {
  background: #1e293b;
  color: #fff;
  margin-top: 3rem;
}
.site-footer .container { padding: 1.5rem 1rem; text-align: center; }
.footer-link { color: #dbeafe; }
.footer-link:hover, .footer-link:focus { text-decoration: underline; }

/* Responsive */
@media (max-width: 1024px) {
  .nav-inner { grid-template-columns: 1fr 1fr; gap: .75rem; height: auto; padding: .75rem 0; }
  .nav-center { order: 3; grid-column: 1 / -1; }
  .nav-right { justify-content: flex-start; flex-wrap: wrap; }
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .logo img { height: 72px; }
  .features-grid { grid-template-columns: 1fr; }
}

/* ===== Search layout & utilities ===== */
.layout-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1.5rem;
  align-items: start;
  margin: 1rem 0 2rem;
}
.main-col { min-width: 0; }
.side-col { min-width: 260px; }

.list-reset { list-style: none; margin: 0; padding: 0; }
.list-item { padding: .5rem .75rem; border-radius: 8px; cursor: pointer; }
.list-card { background: var(--surface); border: 1px solid #e5e7eb; }
.list-item + .list-item { margin-top: .5rem; }
.list-item:hover, .list-item:focus { outline: 2px solid var(--ring); outline-offset: 2px; }

.meta { color: var(--ink-dim); margin-top: .25rem; }
.muted { color: var(--ink-dim); }

.chips { margin-top: .5rem; }
.badge {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: .85rem;
  text-decoration: none;
  color: var(--ink);
}
.badge-oa { border-color: #86efac; background: #f0fdf4; }

@media (max-width: 1024px) {
  .layout-grid { grid-template-columns: 1fr; }
  .side-col { min-width: 0; }
}

/* ===== Profile layout ===== */
.profile-top { padding: 1.25rem; overflow: visible; }
.profile-top-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
  align-items: start;
}
.id-header { display: flex; gap: 1rem; align-items: center; margin-bottom: .5rem; }
.profile-top .profile-photo { width: 88px; height: 88px; border-radius: 9999px; object-fit: cover; border: 3px solid #e2e8f0; }

.metrics .stats-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: .75rem;
}
.stats-grid .stat {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: .75rem .9rem;
}
.stat-label { font-size: .85rem; color: var(--ink-dim); }
.stat-value { font-size: 1.4rem; font-weight: 700; margin-top: .15rem; }

/* Native tooltips via title=... already set; ensure no clipping */
.panel { overflow: visible; }

/* Topic cards */
.topics-wrap { margin-top: .25rem; }
.topics-title { margin: .25rem 0 .5rem; font-size: 1.05rem; }
.topics-cards { display: flex; flex-wrap: wrap; gap: .5rem; }
.topic-card {
  display: inline-flex;
  align-items: center;
  padding: .5rem .7rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  text-decoration: none;
}
.topic-card:hover, .topic-card:focus { outline: 2px solid var(--ring); outline-offset: 2px; }
.topic-name { color: #111827; font-size: .95rem; }

/* Publications header + list */
.pubs-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.5rem; }
#publicationsList .result-card { margin-bottom: 1rem; }

/* Sidebar charts and timeline */
.charts-wrap { overflow-x: auto; }
.chart-block { max-width: 100%; overflow-x: auto; margin-bottom: 1rem; }
.chart-block h4 { margin: 0 0 .25rem; }

.timeline { list-style: none; margin: 0; padding-left: 0.75rem; border-left: 2px solid #e5e7eb; }
.timeline li { position: relative; margin: 0 0 .75rem 0; padding-left: .75rem; }
.timeline li .dot {
  position: absolute; left: -9px; top: 4px;
  width: 10px; height: 10px; background: #2563eb; border-radius: 9999px; border: 2px solid #fff;
}
.timeline .title { font-weight: 600; }

/* Responsive tweaks */
@media (max-width: 1024px) {
  .profile-top-grid { grid-template-columns: 1fr; }
  .metrics .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .metrics .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.topics-cards { display:flex; flex-wrap:wrap; gap:.5rem; }
.topic-card {
  display:inline-flex; align-items:center; padding:.4rem .6rem;
  border:1px solid #e5e7eb; border-radius:.65rem; background:#fafafa;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.topic-card:hover { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06); transform:translateY(-1px); }
.topic-name { font-size:.9rem; font-weight:600; color:#111827; }

/* keep long text from spilling out of side panels */
.side-col .panel,
.side-col .panel * {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* small utility used in the header rows */
.meta-row { margin: .25rem 0; }
.meta-row .wrap-text { display: inline; }

/* Card look (shared) */
.result-card.paper-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* push save button to bottom */
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem 1rem 0.75rem 1rem;
  background: #fff;
  margin-bottom: 1rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

/* Card title spacing */
.result-card.paper-card .card-title {
  margin: 0 0 0.25rem 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Authors spacing */
.result-card.paper-card .authors {
  margin: 0.25rem 0;
}

/* Abstract handling (linter-friendly, with fallback) */
.result-card.paper-card .abstract {
  margin-top: 0.35rem;
}

/* Fallback for all browsers: single-line ellipsis */
.result-card.paper-card .abstract,
.abs-short {
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Expanded state shows full content */
.result-card.paper-card .abstract.expanded {
  white-space: normal;
}

/* Progressive enhancement: multi-line clamp where supported */
@supports (-webkit-line-clamp: 1) {
  .result-card.paper-card .abstract,
  .abs-short {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Provide both standard + prefixed */
    line-clamp: 1;          /* not supported yet, but avoids linter warning */
    -webkit-line-clamp: 1;  /* actual working property in Chrome/Safari */
    white-space: normal;    /* reset fallback nowrap */
  }
  /* Break the clamp when expanded by switching display */
  .result-card.paper-card .abstract.expanded {
    display: block; /* disables -webkit-box clamp */
  }
}

/* Keep your show/hide pieces */
.abs-full { display: none; }
.abstract.expanded .abs-short { display: none; }
.abstract.expanded .abs-full { display: inline; }


.abs-full {
  display: none;
}

.abstract.expanded .abs-short { display: none; }
.abstract.expanded .abs-full { display: inline; }

/* Show/hide link button */
.result-card.paper-card .link-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.35rem;
  font-weight: 600;
  cursor: pointer;
  color: #2563eb;
}

/* Save button bottom right */
.result-card.paper-card .btn-save {
  align-self: flex-end;
  margin-top: 1rem; /* spacing above button */
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
}

/* Chips badges */
.badge-oa {
  background: #e6ffed;
  border: 1px solid #b7f7c3;
  color: #047857;
}

/* Sidebar text handling */
.side-col .panel, .side-col .panel * {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Optional: make small cards tidy */
.result-card.small h4,
.result-card h3,
.paper-title {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ==== Search skeletons (visual polish) ==== */
.skel { background: #f2f4f7; border-radius: 8px; position: relative; overflow: hidden; }
.skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); animation:shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform:translateX(100%); } }
.skel-line{ height:12px; margin:8px 0; }
.skel-title{ height:18px; width:70%; margin-bottom:.5rem; }

/* ==== Facet chips ==== */
.chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; border:1px solid #e5e7eb; border-radius:9999px;
  background:#fff; cursor:pointer; font-weight:600; font-size:.85rem;
}
.chip.active { background:#eef2ff; border-color:#c7d2fe; }
.chip:focus { outline:2px solid var(--ring); outline-offset:2px; }

/* ==== Card action bar: align right + equal heights ==== */
.result-card.paper-card .card-actions{
  margin-top:.75rem;
  display:flex;
  gap:.5rem;
  justify-content:flex-end;   /* right side */
  align-items:center;
}

/* Normalize both buttons to same size */
.result-card.paper-card .btn-save,
.result-card.paper-card .btn-cite{
  font-size:.95rem;
  padding:.5rem .9rem;
  line-height:1;              /* equal height */
  border-radius:8px;          /* match .btn */
  align-self:auto;            /* no special self alignment */
  margin-top:0;               /* remove extra top margin from previous rule */
}

/* Keep pill look optional (remove if you prefer square) */
/* .result-card.paper-card .btn-save { border-radius:9999px; } */


/* ===== Paper header layout (content left, actions right) ===== */
.paper-header-grid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
}

.header-actions{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 220px;
}

/* Use the same component popover/behavior, but no card chrome in header */
.header-actions .paper-card.header-card{
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.header-actions-inner{
  position: relative;          /* anchor cite popover */
  display: flex;
  gap: .5rem;
}

/* Buttons visually match your shared .btn styles */
.header-actions .btn-save,
.header-actions .btn-cite{
  font-size: .95rem;
  padding: .5rem .9rem;
  line-height: 1;
  border-radius: 8px;
}

/* Stack on smaller screens */
@media (max-width: 1024px){
  .paper-header-grid{ grid-template-columns: 1fr; }
  .header-actions{ justify-content: flex-start; }
}

/* ===== Paper stats in sidebar use the existing profile metric cards ===== */
.side-col .metrics .stats-grid{
  display: grid;
  grid-template-columns: 1fr;   /* one per row in sidebar */
  gap: .75rem;
}

.side-col .metrics .stat{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: .75rem .9rem;
}

.side-col .metrics .stat-value{
  font-size: 1.35rem;
  font-weight: 700;
}

.side-col .metrics .stat-label{
  font-size: .85rem;
  color: var(--ink-dim);
}

/* ===== Paper header: left content + right actions & stat boxes ===== */
.paper-header-grid{
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: 1rem;
  align-items: start;
}

/* Right column container */
.header-side{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: stretch;
}

/* Actions bar (right-aligned) */
.header-actions{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.header-actions .paper-card.header-card{
  border: 0; background: transparent; padding: 0; box-shadow: none;
}
.header-actions-inner{ position: relative; display: flex; gap: .5rem; }
.header-actions .btn-save,
.header-actions .btn-cite{
  font-size: .95rem;
  padding: .5rem .9rem;
  line-height: 1;
  border-radius: 8px;
}

/* Stat boxes inside the header (match profile look) */
.header-stats.stats-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
.header-stats .stat{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: .75rem .9rem;
}
.header-stats .stat-value{
  font-size: 1.35rem;
  font-weight: 700;
}
.header-stats .stat-label{
  font-size: .85rem;
  color: var(--ink-dim);
}

/* Responsive: on narrow screens the right column stacks below; show stats in 3 columns */
@media (max-width: 1024px){
  .paper-header-grid{ grid-template-columns: 1fr; }
  .header-actions{ justify-content: flex-start; }
  .header-stats.stats-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* Small helper for warning badge used in Journal box (if retracted) */
.badge-warn{
  border-color: #fecaca;
  background: #fff1f2;
  color: #b91c1c;
}

/* (Optional) simple key-value list */
.kv-list{ list-style: none; padding: 0; margin: .5rem 0 0; }
.kv-list li{ display: flex; justify-content: space-between; padding: .25rem 0; }
.kv-list li span{ color: var(--ink-dim); }


/* ===== Compact stat boxes (paper header + profile) ===== */
/* Make boxes shorter and auto-flow into multiple columns as space allows */
.header-stats.stats-grid,
.metrics .stats-grid{
  /* Shorter, multi-column cards that auto-fit nicely */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: .6rem !important;
}

/* Tighter card */
.header-stats .stat,
.metrics .stat{
  padding: .6rem .7rem !important;
  border-radius: 9px;
}

/* Values: slightly smaller, no wrapping */
.header-stats .stat-value,
.metrics .stat-value{
  font-size: 1.15rem !important;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Labels: compact, single line with ellipsis if needed */
.header-stats .stat-label,
.metrics .stat-label{
  font-size: .8rem !important;
  line-height: 1.15;
  color: var(--ink-dim);
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Slightly denser layout on very small screens */
@media (max-width: 640px){
  .header-stats.stats-grid,
  .metrics .stats-grid{
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: .5rem !important;
  }
  .header-stats .stat-value,
  .metrics .stat-value{ font-size: 1.05rem !important; }
  .header-stats .stat-label,
  .metrics .stat-label{ font-size: .78rem !important; }
}

/* Trend charts: ensure visible height and crisp grid */
.chart-block h4 { margin: 0 0 .35rem; }
.chart-svg { width: 100%; height: 180px; display: block; }
.chart-svg .grid { shape-rendering: crispEdges; }
.chart-svg .xlabel { fill: #475569; }

/* Force compact stat boxes to always stack in one column on the right */
.header-stats.stats-grid { grid-template-columns: 1fr !important; }
@media (max-width: 1024px){
  .header-stats.stats-grid { grid-template-columns: 1fr !important; }
}

/* Keep profile metrics one column too (right-side column) */
.metrics .stats-grid { grid-template-columns: 1fr !important; }


/* === Compact single-column stat boxes (paper header + profile) === */
.header-stats.stats-grid,
.metrics .stats-grid{
  grid-template-columns: 1fr !important;  /* one column */
  justify-items: start;                    /* don't stretch items to full width */
  align-items: start;
  gap: .5rem !important;
}

/* Make each box shrink to its content (short & tidy) */
.header-stats .stat,
.metrics .stat{
  width: auto;                 /* shrink to fit content */
  max-width: 220px;            /* cap width so it never looks wide */
  min-width: 140px;            /* keeps a neat, consistent card width */
  padding: .55rem .7rem !important;
  border-radius: 9px;
}

/* Compact typography inside boxes */
.header-stats .stat-value,
.metrics .stat-value{
  font-size: 1.1rem !important;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-stats .stat-label,
.metrics .stat-label{
  font-size: .8rem !important;
  line-height: 1.15;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tiny screens: allow boxes to relax so they don't overflow */
@media (max-width: 480px){
  .header-stats .stat,
  .metrics .stat{
    min-width: 0;
    max-width: 100%;
  }
}

/* Trend charts: larger, clearer labels */
.chart-block h4 { margin: 0 0 .4rem; font-size: 1rem; }
.chart-svg { width: 100%; height: 220px; display: block; }
.chart-svg .grid { shape-rendering: crispEdges; }
.chart-svg .xlabel,
.chart-svg .ylabel { font-size: 12px; fill: #1e293b; }
.chart-svg .ylabel.strong { font-weight: 700; fill: #0f172a; }

/* === Right-align compact stat boxes (paper header + profile) === */
/* Keep one column, but push each card to the far right edge */
.header-stats.stats-grid,
.metrics .stats-grid{
  grid-template-columns: 1fr !important; /* single column */
  justify-items: end !important;         /* align the column to the right */
  align-items: start;
  gap: .5rem !important;
}

/* Keep the cards short/compact and make sure they sit at the right edge */
.header-stats .stat,
.metrics .stat{
  width: auto;                 /* shrink to content */
  max-width: 220px;
  min-width: 140px;
  padding: .55rem .7rem !important;
  border-radius: 9px;
  justify-self: end;           /* right within the grid cell */
  margin-left: auto;           /* extra safety for some browsers */
}

/* Compact text inside */
.header-stats .stat-value,
.metrics .stat-value{
  font-size: 1.1rem !important;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-stats .stat-label,
.metrics .stat-label{
  font-size: .8rem !important;
  line-height: 1.15;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional: on very small screens you can left-align again if you prefer */
/*
@media (max-width: 480px){
  .header-stats.stats-grid,
  .metrics .stats-grid{ justify-items: start !important; }
}
*/

.btn-success { background:#16a34a; color:#fff; border-color:#16a34a; }
.btn-success:disabled { opacity:.9; cursor:default; }

/* Library layout */
.lib-grid {
  display: grid;
  grid-template-columns: 260px 1fr 360px;
  gap: 0;
  min-height: 70vh;
}
.lib-left, .lib-center, .lib-right { padding: 1rem; }
.lib-left { border-right: 1px solid #e5e7eb; }
.lib-right { border-left: 1px solid #e5e7eb; }

.lib-heading { font-size: 1rem; margin: .25rem 0 .75rem; }

.tree, .tree ul { list-style: none; padding-left: 0; margin: 0; }
.tree li { padding: .25rem .25rem .25rem .75rem; border-radius: 6px; cursor: default; }
.tree li.active { background: #eef2ff; }
.tree .row { display:flex; gap:.5rem; align-items:center; }
.tree .row button { visibility: hidden; }
.tree li:hover .row button { visibility: visible; }

.lib-toolbar {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.5rem; border-bottom:1px solid #e5e7eb;
}
.cols-menu label { margin-right:.5rem; }
.lib-table { width:100%; border-collapse: collapse; }
.lib-table thead th {
  text-align:left; font-weight:600; padding:.5rem; border-bottom:1px solid #e5e7eb;
}
.lib-table tbody td { padding:.5rem; border-bottom:1px solid #f3f4f6; }
.lib-table tbody tr:hover { background:#fafafa; cursor: pointer; }

.notes { list-style:none; padding-left:0; margin:0; }
.notes li { border:1px solid #e5e7eb; border-radius:8px; padding:.5rem; margin:.5rem 0; position:relative; }
.notes li .del { position:absolute; right:.5rem; top:.5rem; font-size:.85rem; color:#6b7280; background:none; border:none; cursor:pointer; }
.note-editor textarea { min-height: 100px; }

/* Saved button (used elsewhere too) */
.btn-success { background:#16a34a; color:#fff; border-color:#15803d; }
.btn-success:disabled { opacity:.9; cursor:default; }


.site-footer .footer-socials {
  margin-top: .5rem;
  display: flex;
  gap: .75rem;
}

.site-footer .footer-socials .social-icon {
  display: inline-flex;
  line-height: 0;
  color: inherit;       /* makes SVGs match text color */
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}

.site-footer .footer-socials .social-icon:hover,
.site-footer .footer-socials .social-icon:focus {
  opacity: 1;
  transform: translateY(-1px);
}