/* MoA look — derived from the Matters of Activity brand assets:
   accent #9100FF sampled from the wordmark, paper-white surfaces, Schibsted
   Grotesk + IBM Plex Mono, ambient violet mesh (cf. radical-interdisciplinarity.com). */

:root {
  --bg: #fbfbfa;
  --panel: #ffffff;
  --ink: #111113;
  --muted: #5d5d62;
  --line: #e7e7e9;
  --accent: #9100ff;       /* MoA violet, sampled from the logo */
  --accent-2: #c77dff;
  --accent-soft: #9100ff10;
  --accent-line: #9100ff33;
  --accent-ink: #ffffff;
  --ok: #15803d;
  --err: #b91c1c;
  --warn: #b45309;
  --radius: 18px;
  --radius-s: 11px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 14px 40px -22px rgba(0, 0, 0, .15);
  font-family: "Schibsted Grotesk", -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-size: 16.5px; line-height: 1.55; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* ambient violet mesh — the quiet MoA signature behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vw at 82% -10%, #9100ff0d, transparent 60%),
    radial-gradient(50vw 46vw at 4% 14%, #c77dff0a, transparent 55%);
}
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* Topbar — the wordmark needs width, so the bar gets two visual zones */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding: .9rem 1.4rem; position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 1rem; min-width: 0; }
.brand-logo {
  width: clamp(200px, 23vw, 300px); height: auto; display: block;
  flex-shrink: 0; align-self: center;
}
.brand h1 {
  font-size: .82rem; margin: 0; font-weight: 600; color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .08em;
}
.subtitle { margin: .1rem 0 0; font-size: .78rem; color: var(--muted); letter-spacing: 0; }

.tabs { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.tab {
  border: none; background: transparent; color: var(--muted);
  padding: .5rem 1rem; border-radius: var(--radius-s); cursor: pointer;
  font-size: .92rem; font-weight: 600; font-family: inherit;
  text-decoration: none; letter-spacing: -.005em; transition: .18s;
}
.tab:hover { background: var(--accent-soft); color: var(--accent); }
.tab.active { background: var(--accent); color: var(--accent-ink); }

main { padding: 1.4rem 1.4rem 3rem; max-width: 1200px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }

/* Toolbar */
.toolbar { display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
input, select, button, textarea { font: inherit; }
input[type="search"], input[type="password"], input[type="number"], input[type="email"],
input[type="text"], input:not([type]), select {
  padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: #fff; color: var(--ink); outline: none; transition: border-color .18s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
#pub-search { flex: 1; min-width: 220px; }

/* Buttons */
.btn {
  padding: .5rem .95rem; border: 1px solid var(--line); background: #fff;
  border-radius: var(--radius-s); cursor: pointer; font-weight: 600; color: var(--ink);
  letter-spacing: -.005em; transition: .18s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: #7a00d6; border-color: #7a00d6; color: #fff; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Table */
.table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead th {
  text-align: left; padding: .7rem .8rem; background: #fafafa;
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  font-weight: 600;
}
tbody td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:hover { background: var(--accent-soft); }
td.title { font-weight: 600; max-width: 360px; letter-spacing: -.01em; }
td.person { white-space: nowrap; }
/* keep the authors column from pushing license/link out of the viewport */
#pub-table td:nth-child(2) { max-width: 200px; font-size: .82rem; color: var(--muted); }
.type-badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 600;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
a.doi { color: var(--accent); text-decoration: none; font-weight: 600; }
a.doi:hover { text-decoration: underline; }
.src-badge {
  display: inline-block; vertical-align: middle; margin-left: .4rem;
  padding: .05rem .4rem; border-radius: 999px; font-size: .62rem; font-weight: 600;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
  text-transform: uppercase; letter-spacing: .03em;
}
.lic-badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  background: #ecfdf5; color: #047857; font-size: .68rem; font-weight: 600;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
/* Stufenmodell tiers: 1 open, 2 restricted-open, 3 protected, 0 excluded.
   These stay semantic (legal meaning) — only the type is branded. */
.tier-badge {
  display: inline-block; padding: .12rem .45rem; border-radius: 999px;
  font-size: .66rem; font-weight: 600; white-space: nowrap; cursor: help;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.tier-badge.tier-1 { background: #ecfdf5; color: #047857; }
.tier-badge.tier-2 { background: #fffbeb; color: #b45309; }
.tier-badge.tier-3 { background: #f1f5f9; color: #475569; }
.tier-badge.tier-0 { background: #fef2f2; color: #b91c1c; }
/* member-list mail maintenance button */
.mail-edit {
  border: none; background: none; cursor: pointer; font-size: .9rem;
  color: #cbd5e1; padding: 0 .2rem; line-height: 1; transition: .15s;
}
.mail-edit.has-mail { color: var(--accent); }
.mail-edit:hover { transform: scale(1.15); }
textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: var(--radius-s); font: inherit; resize: vertical; background: #fff;
  outline: none; transition: border-color .18s;
}

/* Panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.15rem 1.25rem; margin-bottom: 1.1rem; }
.panel.narrow { max-width: 560px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; gap: .75rem; }
.panel-head h2, .panel h2 { font-size: 1.02rem; margin: 0 0 .2rem; font-weight: 700; letter-spacing: -.015em; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; flex-wrap: wrap; gap: .6rem; }
.row { display: flex; align-items: center; }
.row.gap { gap: .5rem; }
.muted { color: var(--muted); font-size: .85rem; }
.hidden { display: none !important; }
body.modal-open { overflow: hidden; } /* lock background scroll behind the PDF modal */

/* Member list */
#member-filter { width: 100%; margin: .5rem 0; }
.member-list { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-s); }
.member-row { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.member-row:last-child { border-bottom: none; }
.member-row:hover { background: var(--accent-soft); }
.member-row .pubinfo {
  margin-left: auto; font-size: .7rem; color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #d6d6da; display: inline-block; }
.dot.scraped { background: var(--ok); }
.check { display: flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--muted); }

/* Progress */
.progress-bar { height: 6px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; margin-bottom: .6rem; }
#progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .25s ease; }
#progress-summary { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .74rem; }
#pub-count { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .74rem; }
.progress-log { max-height: 360px; overflow: auto; font-size: .85rem; }
.log-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .2rem; border-bottom: 1px dashed var(--line); }
.log-row .name { flex: 1; }
.badge {
  font-size: .68rem; font-weight: 600; padding: .1rem .45rem; border-radius: 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.badge.fetching, .badge.hunting, .badge.searching, .badge.enriching { background: #fef3c7; color: var(--warn); }
.badge.done { background: #dcfce7; color: var(--ok); }
.badge.error { background: #fee2e2; color: var(--err); }
.badge.skip { background: #eef0f2; color: var(--muted); }

/* Fields */
.field { display: block; margin: .9rem 0; }
.field > span { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9rem; letter-spacing: -.01em; }
.field small { display: block; margin-top: .3rem; }
.status { font-size: .85rem; min-height: 1.1em; }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }
.empty { padding: 2rem; text-align: center; color: var(--muted); }

/* PDF cell — pinned to the right so its button is never cut off when the
   table is wider than the viewport (the column stays visible while the rest
   of the row scrolls horizontally underneath it). */
td.pdf-cell { white-space: nowrap; }
#pub-table th:last-child,
#pub-table td.pdf-cell {
  position: sticky; right: 0;
  background: var(--panel);
  box-shadow: -6px 0 6px -6px rgba(0, 0, 0, .12);
}
#pub-table thead th:last-child { background: #fafafa; }
#pub-table tbody tr:hover td.pdf-cell { background: #f7f0ff; }

/* PDF modal viewer */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 17, 19, .55); padding: 2vh;
}
.modal-panel {
  position: relative; width: 90vw; height: 90vh;
  background: var(--panel); border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35); overflow: hidden;
}
.modal-close {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 34px; height: 34px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); border-radius: 50%;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { border-color: var(--accent); color: var(--accent); }
#pdf-frame { width: 100%; height: 100%; border: 0; display: block; }

/* Responsive: the wordmark yields before the nav does */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; }
  .brand-logo { width: clamp(170px, 40vw, 240px); }
  .brand h1 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Researcher dashboard: scraped profile text + additional generation sources */
.scraped-text { white-space: pre-line; border-left: 3px solid var(--border, #ddd); padding-left: .75rem; margin: .5rem 0 1rem; }
.source-list { list-style: none; padding: 0; margin: 0 0 .75rem; }
.source-list li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.source-list li span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }