/* Preprints.ai redesign — component styles.
   Reads CSS custom properties from tokens.css.
   Always load tokens.css BEFORE this file. */

/* ── Reset + base ────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ── Eyebrow (small uppercase label) ────────────────────────────────── */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
  line-height: 1;
}

/* ── Mono numerals ──────────────────────────────────────────────────── */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 500 13px/1 var(--font-sans);
  padding: 10px 16px;
  min-height: 36px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--ink-900);
  color: var(--paper);
}
.btn-primary:hover { background: var(--ink-700); }

.btn-accent {
  background: var(--clay-500);
  color: #fff;
}
.btn-accent:hover { background: var(--clay-600); }

.btn-ghost {
  background: transparent;
  border-color: var(--ink-100);
  color: var(--ink-700);
}
.btn-ghost:hover { background: var(--surface-2); }

.btn-link {
  background: transparent;
  color: var(--clay-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  min-height: 0;
  border: 0;
  font-weight: 500;
}
.btn-link:hover { color: var(--clay-500); }

/* ── Card ───────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

/* ── Input ──────────────────────────────────────────────────────────── */
.input {
  display: block;
  width: 100%;
  font: 400 15px/1.4 var(--font-sans);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  padding: 10px 12px;
  min-height: 40px;
  color: var(--ink-900);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus {
  outline: none;
  border-color: var(--clay-500);
  box-shadow: var(--shadow-focus);
}
.input::placeholder { color: var(--ink-300); }

/* ── Tags / chips ───────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  background: var(--ink-50);
  color: var(--ink-700);
  border: 1px solid var(--ink-100);
  line-height: 1.4;
}
.tag-pass { background: var(--teal-50); color: var(--teal-700); border-color: #cfe0d7; }
.tag-warn { background: #faf3e4; color: var(--state-warn); border-color: #e8d9b3; }
.tag-fail { background: var(--clay-100); color: var(--clay-700); border-color: var(--clay-200); }
.tag-info { background: #e9f0f6; color: var(--state-info); border-color: #c9d6e2; }

/* ── Grade badges ───────────────────────────────────────────────────── */
.grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1;
}
.grade-A { color: var(--grade-a); background: var(--grade-a-bg); }
.grade-B { color: var(--grade-b); background: var(--grade-b-bg); }
.grade-C { color: var(--grade-c); background: var(--grade-c-bg); }
.grade-D { color: var(--grade-d); background: var(--grade-d-bg); }
.grade-E { color: var(--grade-e); background: var(--grade-e-bg); }

.grade-sm { font-size: 13px; padding: 3px 7px; border-radius: var(--r-sm); }
.grade-md { font-size: 22px; padding: 6px 12px; border-radius: var(--r-md); }
.grade-lg { font-size: 56px; padding: 0; background: transparent; }

/* Section titles + subtitles (used in page rows) */
.section-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
  color: var(--ink-900);
}
.section-sub {
  font-size: 13px;
  color: var(--ink-500);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* ── Shared page header (navbar) ────────────────────────────────────── */
.pp-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(250, 246, 240, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ink-100);
}
.pp-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-900);
}
.pp-brand img { height: 32px; width: auto; }
.pp-brand span { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.pp-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.pp-nav-item {
  font-size: 13px;
  color: var(--ink-500);
  font-weight: 400;
}
.pp-nav-item.active {
  color: var(--ink-900);
  font-weight: 500;
}
.pp-nav-item:hover { color: var(--ink-900); }

/* Live pulse indicator */
.pp-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--clay-600);
}
.pp-live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--clay-500);
  animation: ppPulse 2.2s ease-in-out infinite;
}
@keyframes ppPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ── Layout helpers ─────────────────────────────────────────────────── */
.pp-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 48px 48px;
}

.pp-grid-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-100);
}

/* Subtle paper-tint radials used on the homepage */
.pp-paper-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 500px at 90% -5%, rgba(184, 85, 58, 0.05), transparent 60%),
    radial-gradient(700px 400px at -5% 110%, rgba(74, 117, 102, 0.035), transparent 60%);
}

/* Recent-table rows */
.pp-row {
  display: grid;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ink-100);
  align-items: center;
  transition: background 120ms ease;
  color: var(--ink-900);
  text-decoration: none;
}
.pp-row:hover { background: var(--surface-2); }
.pp-row:last-child { border-bottom: 0; }
.pp-row .title {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-row .doi {
  font-size: 11px;
  color: var(--ink-400);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Footer */
.pp-footer {
  border-top: 1px solid var(--ink-100);
  padding: 32px 48px 48px;
  margin-top: 80px;
  background: var(--paper-2);
}
.pp-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-500);
}
.pp-footer a { color: var(--clay-600); }

/* Focus ring utility */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}