/* =============================================================
   RXiv Hub - main.css
   A single comprehensive stylesheet for all pages.
   ============================================================= */

/* ─── 1. CSS Custom Properties ─────────────────────────────── */
:root {
    /* Colour palette */
    --clr-bg: #f8f9fa;
    --clr-surface: #ffffff;
    --clr-header: #0f1117;
    --clr-header-end: #1a1f2e;
    --clr-accent: #aa142d;
    --clr-accent-hover: #9a041d;
    --clr-accent-dim: rgba(175, 164, 151, 0.1);
    --clr-muted: #6b7280;
    --clr-border: #e5e7eb;
    --clr-border-dark: #d1d5db;
    --clr-text: #111827;
    --clr-text-light: #374151;
    --clr-success: #10b981;
    --clr-success-bg: #ecfdf5;
    --clr-success-dark: #065f46;
    --clr-error: #ef4444;
    --clr-error-bg: #fef2f2;
    --clr-error-dark: #991b1b;
    --clr-warning: #f59e0b;
    --clr-warning-bg: #fffbeb;
    --clr-warning-dark: #92400e;
    --clr-info: #3b82f6;
    --clr-info-bg: #eff6ff;
    --clr-info-dark: #1e40af;

    /* Spacing (4 px grid) */
    --sp-1: 0.25rem; /*  4px */
    --sp-2: 0.5rem; /*  8px */
    --sp-3: 0.75rem; /* 12px */
    --sp-4: 1rem; /* 16px */
    --sp-5: 1.25rem; /* 20px */
    --sp-6: 1.5rem; /* 24px */
    --sp-8: 2rem; /* 32px */
    --sp-10: 2.5rem; /* 40px */
    --sp-12: 3rem; /* 48px */
    --sp-16: 4rem; /* 64px */
    --sp-20: 5rem; /* 80px */
    --sp-24: 6rem; /* 96px */

    /* Typography */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --fz-2xs: 0.65rem;
    --fz-xs: 0.75rem;
    --fz-sm: 0.875rem;
    --fz-base: 1rem;
    --fz-lg: 1.125rem;
    --fz-xl: 1.25rem;
    --fz-2xl: 1.5rem;
    --fz-3xl: 1.875rem;
    --fz-4xl: 2.25rem;
    --fz-5xl: 3rem;
    --lh: 1.6;

    /* Borders & Shadows */
    --radius-sm: 0.25rem;
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);

    /* Layout */
    --max-w: 1250px;
    --header-h: 60px;
}

/* ─── 2. Reset & Base ───────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: var(--fz-base);
    line-height: var(--lh);
    color: var(--clr-text);
    background: var(--clr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--clr-accent);
    text-decoration: none;
    transition: color 0.15s;
}
a:hover {
    text-decoration: underline;
}

ul,
ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

input,
textarea,
select {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5 {
    line-height: 1.25;
    font-weight: 700;
}

p {
    line-height: var(--lh);
}

/* Visible focus ring for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) {
    outline: none;
}

/* ─── 3. Layout ─────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--sp-6);
}

.container-fluid {
    padding-inline: var(--sp-6);
}

.page-main {
    padding-top: 15px;
    flex: 1;
}

.page-title {
    font-size: var(--fz-2xl);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: var(--sp-2);
}

.page-subtitle {
    font-size: var(--fz-base);
    color: var(--clr-muted);
    margin-bottom: var(--sp-4);
}

/* ─── 4. Page Header & Navigation ───────────────────────────── */
.page-header {
    background: linear-gradient(
        135deg,
        var(--clr-header) 0%,
        var(--clr-header-end) 100%
    );
    height: var(--header-h);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.25);
}

.page-header > .container {
    padding-top: 8px;
}

.nav {
    display: flex;
    align-items: center;
    height: 100%;
    gap: var(--sp-4);
    position: relative;
}

/* Logo */
.nav-logo {
    font-size: var(--fz-xl);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    transition: opacity 0.15s;
}
.nav-logo:hover {
    text-decoration: none;
    opacity: 0.88;
}
.nav-logo:visited {
    color: #ffffff;
}

/* Logo icon mark */
.nav-logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(170, 20, 45, 0.45);
}
.nav-logo-mark img {
    display: block;
    width: 100%;
    height: 100%;
}

.nav-spacer {
    flex: 1;
}

/* Nav links list */
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--fz-sm);
    font-weight: 500;
    padding: 0 var(--sp-3);
    height: 44px;
    border-radius: var(--radius);
    transition:
        color 0.15s,
        background 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
    text-decoration: none;
}
.nav-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
}
.nav-link:visited {
    color: rgba(255, 255, 255, 0.78);
}
.nav-link:visited:hover {
    color: #ffffff;
}

/* ── Hamburger (CSS-only checkbox toggle) ── */
/* The checkbox itself is visually hidden */
.nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.nav-hamburger {
    display: none; /* hidden on desktop */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    border-radius: var(--radius);
    padding: var(--sp-2);
    transition: background 0.15s;
    margin-left: auto;
    flex-shrink: 0;
}
.nav-hamburger:hover {
    background: rgba(255, 255, 255, 0.09);
}

.nav-hamburger span {
    display: block;
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    transition:
        transform 0.22s ease,
        opacity 0.15s;
}

/* Animate hamburger → ✕ when open */
.nav-toggle:checked + .nav-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle:checked + .nav-hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-toggle:checked + .nav-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ─── 5. Flash Messages ─────────────────────────────────────── */
.flash-container {
    width: 100%;
}

.flash {
    padding: var(--sp-3) var(--sp-6);
    font-size: var(--fz-sm);
    font-weight: 500;
    border-left: 3px solid transparent;
}

.flash-success {
    background: var(--clr-success-bg);
    color: var(--clr-success-dark);
    border-color: var(--clr-success);
}
/* base.html renders flash(category) as flash-<category>, remapping the
   'danger' category to 'error'. */
.flash-error {
    background: var(--clr-error-bg);
    color: var(--clr-error-dark);
    border-color: var(--clr-error);
}
.flash-warning {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-dark);
    border-color: var(--clr-warning);
}
.flash-info {
    background: var(--clr-info-bg);
    color: var(--clr-info-dark);
    border-color: var(--clr-info);
}

/* Notices: standalone indication messages (not flash banners) */
.notice {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-6);
    font-size: var(--fz-sm);
    font-weight: 500;
    border: 1px solid;
    border-radius: var(--radius);
}

.notice svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.notice-info {
    background: var(--clr-info-bg);
    color: var(--clr-info-dark);
    border-color: var(--clr-info);
}

/* ─── 6. Forms ──────────────────────────────────────────────── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-5);
}

.form-label {
    font-size: var(--fz-sm);
    font-weight: 600;
    color: var(--clr-text-light);
}

.form-label .optional {
    font-weight: 400;
    color: var(--clr-muted);
    margin-left: var(--sp-1);
}

.form-input {
    width: 100%;
    padding: var(--sp-2) var(--sp-4);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius);
    font-size: var(--fz-base);
    color: var(--clr-text);
    background: var(--clr-surface);
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
    min-height: 30px;
    appearance: none;
}
.form-input:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px var(--clr-accent-dim);
}
.form-input::placeholder {
    color: var(--clr-muted);
}
.form-input.has-error {
    border-color: var(--clr-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

textarea.form-input {
    resize: vertical;
    min-height: 96px;
    line-height: var(--lh);
}

.form-hint {
    font-size: var(--fz-xs);
    color: var(--clr-muted);
    line-height: 1.5;
}

.form-error {
    font-size: var(--fz-xs);
    color: var(--clr-error);
    font-weight: 500;
    display: none; /* shown via JS or server */
}
.form-error.visible {
    display: block;
}

/* Checkbox row */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    min-height: 44px;
}
.form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--clr-accent);
    border: 1.5px solid var(--clr-border);
    border-radius: 4px;
}
.form-check-label {
    font-size: var(--fz-sm);
    color: var(--clr-text-light);
    cursor: pointer;
    line-height: 1.4;
}

#name-readonly-hint {
    margin: 1rem 0;
}

/* ─── 7. Buttons ────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-5);
    height: 36px;
    border-radius: var(--radius);
    font-size: var(--fz-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition:
        background 0.15s,
        box-shadow 0.15s,
        border-color 0.15s,
        color 0.15s,
        transform 0.1s;
    line-height: 1;
    letter-spacing: 0.01em;
}
.btn:hover {
    text-decoration: none;
}
.btn:active {
    transform: translateY(1px);
}
.btn:disabled,
.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: var(--clr-accent);
    color: #ffffff;
    border-color: var(--clr-accent);
}
.btn-primary:hover {
    background: var(--clr-accent-hover);
    border-color: var(--clr-accent-hover);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(170, 20, 45, 0.38);
}
.btn-primary:visited {
    color: #ffffff;
}

.btn-secondary {
    background: var(--clr-surface);
    color: var(--clr-text);
    border-color: var(--clr-border-dark);
}
.btn-secondary:hover {
    background: var(--clr-bg);
    border-color: #9ca3af;
    color: var(--clr-text);
}
.btn-secondary:visited {
    color: var(--clr-text);
}

.btn-danger {
    background: var(--clr-error);
    color: #ffffff;
    border-color: var(--clr-error);
}
.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.35);
}
.btn-danger:visited {
    color: #ffffff;
}

.btn-danger-outline {
    background: transparent;
    color: var(--clr-error);
    border-color: #fca5a5;
}
.btn-danger-outline:hover {
    background: var(--clr-error-bg);
    border-color: var(--clr-error);
    color: var(--clr-error);
}

.btn-sm {
    height: 36px;
    padding: 0 var(--sp-4);
    font-size: var(--fz-xs);
    border-radius: var(--radius-sm);
}

.btn-lg {
    height: 48px;
    padding: 0 var(--sp-8);
    font-size: var(--fz-base);
    border-radius: var(--radius-lg);
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* ─── 8. Cards ──────────────────────────────────────────────── */
.card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-6);
}

.section-title {
    font-size: var(--fz-lg);
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--clr-border);
    letter-spacing: -0.01em;
}

/* ─── 9. Feed: Week Navigation ─────────────────────────────── */
.week-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-6);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.week-nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    min-width: 36px;
    border-radius: var(--radius);
    color: var(--clr-muted);
    transition:
        background 0.15s,
        color 0.15s;
    flex-shrink: 0;
    text-decoration: none;
}
.week-nav-arrow:hover {
    background: var(--clr-accent-dim);
    color: var(--clr-accent);
    text-decoration: none;
}
.week-nav-arrow[aria-disabled="true"],
.week-nav-arrow.disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.week-nav-label {
    flex: 1;
    text-align: center;
    font-size: var(--fz-sm);
    color: var(--clr-text);
    white-space: nowrap;
}

/* ─── 10. Feed: Article Cards ──────────────────────────────── */
.feed-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.feed-header h1 {
    font-size: var(--fz-2xl);
    font-weight: 800;
}

.feed-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.feed-list .article-title {
    font-size: 1.2rem;
}

.article-card {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-6);
    transition:
        box-shadow 0.2s,
        border-color 0.2s;
}
.article-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--clr-border-dark);
}

/* Title */
.article-title {
    font-style: italic;
    margin-bottom: var(--sp-2);
}

/* Rank in the relevance-sorted feed ("#1", "#2", ...) */
.article-rank {
    font-style: normal;
    font-weight: 700;
    color: var(--clr-muted);
}

.article-link {
    color: var(--clr-text);
    text-decoration: none;
    transition: color 0.15s;
}
.article-link:hover {
    color: var(--clr-accent);
    text-decoration: none;
}
.article-link:visited {
    color: #5b21b6;
}
.article-link:visited:hover {
    color: var(--clr-accent);
}

/* Meta line */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-4);
    font-size: var(--fz-xs);
    color: var(--clr-muted);
    margin-bottom: var(--sp-3);
    clear: both;
}
.article-meta-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--clr-border-dark);
    vertical-align: middle;
}

/* "Revised version" indication: only on articles whose arXiv update date
   differs from their submission date */
.revised-badge {
    color: var(--clr-accent);
    font-weight: 600;
    font-style: normal;
    font-size: 1rem;
}

/* Authors */
.article-authors {
    font-size: var(--fz-sm);
    color: var(--clr-muted);
    line-height: 1.5;
    margin-bottom: var(--sp-4);
}

/* Abstract body (truncated by the truncated-text component) */
.article-summary {
    margin-top: var(--sp-3);
    margin-bottom: var(--sp-4);
    font-size: var(--fz-sm);
    font-style: italic;
    color: var(--clr-text-light);
    line-height: 1.5;
}

/* Truncated-text component (truncated_text() in _macros.html): the
   "Read more" link swaps in the full value carried by data-full. */
.truncated-text .read-more {
    white-space: nowrap;
}

/* ─── 11. Feedback ──────────────────────────────────── */

.article-actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--clr-border);
}

.btn-feedback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 var(--sp-2);
    height: 32px;
    border-radius: var(--radius);
    font-size: var(--fz-xs);
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--clr-border);
    background: var(--clr-surface);
    color: var(--clr-muted);
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s,
        box-shadow 0.15s;
    line-height: 1;
}
.btn-feedback svg {
    flex-shrink: 0;
}

/* Active state: thumbs UP */
.btn-feedback.relevant:hover,
.btn-feedback.relevant.active {
    background: var(--clr-success-bg);
    border-color: var(--clr-success);
    color: var(--clr-success-dark);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
/* Active state: thumbs DOWN */
.btn-feedback.not-relevant:hover,
.btn-feedback.not-relevant.active {
    background: var(--clr-error-bg);
    border-color: var(--clr-error);
    color: var(--clr-error-dark);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Inline comment widget (appears after rating) */
.article-actions textarea {
    flex-grow: 1;
    display: none;
    min-width: 300px;
    min-height: 60px;
    width: auto;
    padding: var(--sp-2) var(--sp-3);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius);
    font-size: var(--fz-sm);
    resize: none;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.article-actions textarea:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px var(--clr-accent-dim);
}
.article-actions .save-comment-btn {
    display: none;
    align-self: flex-end;
}

.active ~ textarea,
.active ~ .save-comment-btn {
    display: block;
}

/* Feed empty state */
.feed-empty {
    text-align: center;
    padding: var(--sp-20) var(--sp-8);
}
.feed-empty-icon {
    margin: 0 auto var(--sp-5);
    color: var(--clr-border-dark);
}
.feed-empty h3 {
    font-size: var(--fz-xl);
    color: var(--clr-text);
    margin-bottom: var(--sp-2);
}
.feed-empty p {
    font-size: var(--fz-sm);
    color: var(--clr-muted);
    max-width: 400px;
    margin-inline: auto;
}

/* ─── 12. Settings Page ─────────────────────────────────────── */
.settings-page {
    max-width: 680px;
}

.settings-section {
    margin-bottom: var(--sp-8);
}
.settings-section:last-child {
    margin-bottom: 0;
}

.settings-form {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-6);
}
.settings-form-actions {
    padding-top: var(--sp-5);
    border-top: 1px solid var(--clr-border);
    margin-top: var(--sp-2);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}

/* Danger zone */
.danger-zone {
    background: #fff5f5;
    border-radius: var(--radius-lg);
    border: 1.5px solid #fecaca;
    padding: var(--sp-6);
}
.danger-zone .section-title {
    color: #dc2626;
    border-color: #fecaca;
}
.danger-zone > p {
    font-size: var(--fz-sm);
    color: #7f1d1d;
    margin-bottom: var(--sp-5);
    line-height: var(--lh);
}
.danger-zone .settings-form {
    background: rgba(255, 255, 255, 0.7);
    border-color: #fecaca;
}

/* ─── 13. Auth Pages ────────────────────────────────────────── */
.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-12) var(--sp-4) var(--sp-16);
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--clr-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow);
    padding: var(--sp-8) var(--sp-8);
}

.auth-card-header {
    text-align: center;
    margin-bottom: var(--sp-8);
}
.auth-card-logo {
    width: 44px;
    height: 44px;
    color: #fff;
    background: var(--clr-accent);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-5);
    box-shadow: 0 4px 14px rgba(79, 110, 247, 0.35);
}
.auth-card-header h1 {
    font-size: var(--fz-2xl);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: var(--sp-2);
}
.auth-card-header p {
    font-size: var(--fz-sm);
    color: var(--clr-muted);
    line-height: 1.5;
}

.auth-footer {
    margin-top: var(--sp-6);
    text-align: center;
    font-size: var(--fz-sm);
    color: var(--clr-muted);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* ORCID tooltip / info box */
.info-box {
    display: flex;
    gap: var(--sp-3);
    background: var(--clr-info-bg);
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fz-xs);
    color: var(--clr-info-dark);
    line-height: 1.5;
    margin-top: var(--sp-1);
}
.info-box svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--clr-info);
}

/* ─── 14. Landing Page ──────────────────────────────────────── */
/* Hero */
.hero {
    text-align: center;
    padding: var(--sp-20) var(--sp-6) var(--sp-16);
}

.hero-title {
    font-size: clamp(var(--fz-3xl), 5vw, var(--fz-5xl));
    font-weight: 800;
    color: var(--clr-text);
    line-height: 1.12;
    letter-spacing: -0.035em;
    max-width: 820px;
    margin-inline: auto;
    margin-bottom: var(--sp-5);
}
.hero-title .accent {
    color: var(--clr-accent);
}

.hero-subtitle {
    font-size: var(--fz-lg);
    color: var(--clr-muted);
    max-width: 580px;
    margin-inline: auto;
    line-height: 1.7;
    margin-bottom: var(--sp-8);
}

.hero-cta {
    display: flex;
    gap: var(--sp-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Features section */
.features-section {
    padding: var(--sp-16) 0;
    background: var(--clr-surface);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.section-heading {
    text-align: center;
    margin-bottom: var(--sp-10);
}
.section-heading h2 {
    font-size: var(--fz-2xl);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: var(--sp-3);
}
.section-heading p {
    color: var(--clr-muted);
    font-size: var(--fz-lg);
    max-width: 540px;
    margin-inline: auto;
    line-height: 1.6;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature-card {
    background: var(--clr-bg);
    border-radius: var(--radius-xl);
    border: 1px solid var(--clr-border);
    padding: var(--sp-6);
    transition:
        box-shadow 0.2s,
        transform 0.2s,
        border-color 0.2s;
}
.feature-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);
    border-color: var(--clr-border-dark);
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--clr-accent-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-4);
    color: var(--clr-accent);
    transition: background 0.2s;
}
.feature-card:hover .feature-icon {
    background: var(--clr-accent-dim);
}

.feature-card h3 {
    font-size: var(--fz-lg);
    font-weight: 700;
    margin-bottom: var(--sp-2);
    letter-spacing: -0.01em;
}
.feature-card p {
    font-size: var(--fz-sm);
    color: var(--clr-muted);
    line-height: 1.65;
}

/* CTA strip */
.cta-strip {
    padding: var(--sp-16) var(--sp-6);
    text-align: center;
}
.cta-strip h2 {
    font-size: var(--fz-2xl);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: var(--sp-3);
}
.cta-strip p {
    font-size: var(--fz-base);
    color: var(--clr-muted);
    margin-bottom: var(--sp-6);
    max-width: 480px;
    margin-inline: auto;
}

/* Homepage footer */
.site-footer {
    background: linear-gradient(
        135deg,
        var(--clr-header) 0%,
        var(--clr-header-end) 100%
    );
    padding: var(--sp-10) var(--sp-6);
    text-align: center;
}
.footer-tagline {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fz-sm);
    margin-bottom: var(--sp-6);
}
.footer-partners {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-8);
    list-style: none;
    margin: 0;
    padding: 0;
}
.partner-logo {
    font-size: var(--fz-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    opacity: 0.55;
}

/* ─── 15. Spinner / Loading ─────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--clr-border-dark);
    border-top-color: var(--clr-accent);
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
    flex-shrink: 0;
}
.spinner-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ─── 16. Utilities ─────────────────────────────────────────── */
.text-muted {
    color: var(--clr-muted);
}
.text-accent {
    color: var(--clr-accent);
}
.text-error {
    color: var(--clr-error);
}
.text-sm {
    font-size: var(--fz-sm);
}
.text-xs {
    font-size: var(--fz-xs);
}
.text-center {
    text-align: center;
}
.font-bold {
    font-weight: 700;
}
.font-mono {
    font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
}
.truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mt-6 {
    margin-top: var(--sp-6);
}
.mt-8 {
    margin-top: var(--sp-8);
}
.mb-2 {
    margin-bottom: var(--sp-2);
}
.mb-6 {
    margin-bottom: var(--sp-6);
}
.mb-0 {
    margin-bottom: 0;
}
.font-regular {
    font-weight: 400;
}

/* ─── 16b. Shared component helpers ─────────────────────────── */

/* Read-only value displayed where an input would sit (e.g. current email) */
.form-static {
    font-size: var(--fz-sm);
    color: var(--clr-text-light);
    padding: var(--sp-2) 0;
}

/* Label line with a trailing link (e.g. "Forgot password?") */
.label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.label-row a {
    font-weight: 600;
    text-decoration: none;
}

.auth-footer a {
    font-weight: 600;
}

/* Icon + text inside a section or table title */
.title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Link that inherits the surrounding text colour (article meta badges) */
.link-plain {
    color: inherit;
    text-decoration: none;
}

/* ─── 17. Responsive: Tablet ───────────────────────────────── */
@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ─── 18. Responsive: Mobile ───────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --header-h: 56px;
    }

    .container {
        padding-inline: var(--sp-4);
    }

    /* ── Nav hamburger ── */
    .nav-hamburger {
        display: flex;
    }
    .nav-spacer {
        display: none;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--clr-header-end);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: var(--sp-3);
        gap: var(--sp-1);
        z-index: 99;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }
    .nav-toggle:checked ~ .nav-links {
        display: flex;
    }

    .nav-link {
        min-height: 48px;
        padding: 0 var(--sp-4);
        width: 100%;
        border-radius: var(--radius);
    }
    .nav-btn-link {
        min-height: 48px;
        padding: 0 var(--sp-4);
        width: 100%;
    }

    /* ── Features grid ── */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* ── Settings ── */
    .settings-page {
        max-width: 100%;
    }

    /* ── Auth card ── */
    .auth-card {
        padding: var(--sp-6) var(--sp-5);
    }

    /* ── Feed ── */
    .feed-header {
        flex-direction: column;
    }

    /* ── Hero ── */
    .hero {
        padding: var(--sp-12) var(--sp-4) var(--sp-10);
    }
}

/* ─── 19. Responsive: Small Mobile ────────────────────────── */
@media (max-width: 480px) {
    .hero-cta {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-cta .btn {
        text-align: center;
        justify-content: center;
    }

    .auth-card {
        padding: var(--sp-5) var(--sp-4);
    }

    .article-actions {
        gap: var(--sp-2);
    }
    .article-card {
        padding: var(--sp-4) var(--sp-4);
    }

    .week-nav {
        gap: var(--sp-2);
    }
    .week-nav-label {
        font-size: var(--fz-xs);
    }
}

/* ─── 20. Error Pages ──────────────────────────────────────── */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-24) var(--sp-4);
    min-height: 50vh;
}

.error-code {
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--clr-accent);
    opacity: 0.18;
    letter-spacing: -0.04em;
    display: block;
    margin-bottom: var(--sp-4);
}

.error-title {
    font-size: var(--fz-3xl);
    font-weight: 700;
    color: var(--clr-text);
    margin: 0 0 var(--sp-4);
}

.error-message {
    font-size: var(--fz-lg);
    color: var(--clr-muted);
    max-width: 40ch;
    margin: 0 auto var(--sp-8);
}

/* ─── 21. Skip Link ─────────────────────────────────────────── */
.skip-link {
    position: fixed;
    top: var(--sp-4);
    left: var(--sp-4);
    z-index: 9999;
    background: var(--clr-accent);
    color: #fff;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius);
    font-size: var(--fz-sm);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* ─── 22. Research profile ──────────────────────────────────── */

/* The hidden attribute must always win, even over classes that set an
   explicit display (e.g. the flash banners reused as page hints). */
[hidden] {
    display: none !important;
}

/* Icon-only navigation links */
.nav-link-icon {
    position: relative;
    padding: 0 var(--sp-3);
}
.nav-link-icon svg {
    display: block;
}

/* Suggested-articles notification badge on the research-profile icon */
.nav-badge {
    position: absolute;
    top: 4px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--clr-error);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* Add-article form: a bordered panel, same shape as the notices */
.add-article-form {
    padding: var(--sp-4);
    margin-bottom: var(--sp-6);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
}
/* Labels on their own grid row, so the controls row (input, "or", input,
   button) can be vertically centered on itself. */
.add-article-fields {
    display: grid;
    grid-template-areas:
        'arxiv-label .  bibcode-label .'
        'arxiv       or bibcode       submit';
    grid-template-columns: 1fr auto 1fr auto;
    column-gap: var(--sp-3);
    row-gap: var(--sp-1);
    align-items: center;
}
.add-article-fields label[for='add-arxiv-id'] { grid-area: arxiv-label; }
.add-article-fields label[for='add-bibcode'] { grid-area: bibcode-label; }
.add-article-fields #add-arxiv-id { grid-area: arxiv; }
.add-article-fields #add-bibcode { grid-area: bibcode; }
.add-article-fields #add-article-btn { grid-area: submit; }
.add-article-fields .form-input {
    min-width: 220px;
}
.add-article-or {
    grid-area: or;
    color: var(--clr-muted);
    font-size: var(--fz-sm);
}
@media (max-width: 768px) {
    .add-article-fields {
        grid-template-areas:
            'arxiv-label'
            'arxiv'
            'or'
            'bibcode-label'
            'bibcode'
            'submit';
        grid-template-columns: 1fr;
    }
    .add-article-fields .form-input {
        min-width: 0;
    }
}
.add-article-error {
    color: var(--clr-error-dark);
    font-size: var(--fz-sm);
    margin: var(--sp-2) 0 0;
}
/* Confirmation of a successful addition: same spot as the error (only
   rendered when there is one, so no visibility toggling). */
.add-article-success {
    color: var(--clr-success-dark);
    font-size: var(--fz-sm);
    font-weight: 500;
    margin: var(--sp-2) 0 0;
}
/* In-flight message, same spot again; the explicit display would defeat
   the [hidden] attribute the JS toggles, hence the override. */
.add-article-pending {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--clr-muted);
    font-size: var(--fz-sm);
    margin: var(--sp-2) 0 0;
}
.add-article-pending[hidden] {
    display: none;
}
.add-article-pending svg {
    animation: spin 0.9s linear infinite;
}

/* Three status columns: one bordered box per list, flat rows inside
   separated by clear dividers (no per-card boxes eating space) */
.profile-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
    align-items: start;
}
.profile-panel {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
}
.profile-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    background: var(--clr-accent-dim);
    padding: var(--sp-2) var(--sp-3);
}
.profile-panel-title {
    font-size: var(--fz-md);
    margin: 0 0 2px;
}
.profile-panel-title .panel-count {
    color: var(--clr-muted);
    font-weight: 500;
}
.profile-panel-hint {
    color: var(--clr-muted);
    font-size: var(--fz-xs);
    margin: 0;
}
.panel-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #ffffff;
    flex-shrink: 0;
}
.profile-panel[data-status='included'] .panel-status-icon {
    background: var(--clr-success);
}
.profile-panel[data-status='suggested'] .panel-status-icon {
    background: var(--clr-warning);
}
.profile-panel[data-status='excluded'] .panel-status-icon {
    background: var(--clr-error);
}
.profile-panel-list {
    display: flex;
    flex-direction: column;
}

/* Profile article rows: reset the feed's .article-card box (background,
   rounded border, shadow, large padding) down to a flat divider-separated
   row, to stop wasting horizontal space. */
.profile-card,
.profile-card:hover {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.profile-card {
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid rgba(107, 114, 128, 0.45);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.profile-card:hover {
    background: rgba(79, 110, 247, 0.04);
    box-shadow: inset 3px 0 0 var(--clr-accent);
    border-top: 1px solid rgba(107, 114, 128, 0.45);
}
.profile-card .article-title {
    font-style: italic;
    font-size: var(--fz-sm);
    margin-bottom: 2px;
}
.profile-card .article-meta {
    margin-bottom: 2px;
    gap: var(--sp-1) var(--sp-2);
}
.profile-card .article-authors {
    color: var(--clr-muted);
    font-size: var(--fz-2xs);
    margin: 0;
}
/* The user's own name in the author list: bold alone is faint on the
   muted xs line, so it also takes the regular text color. */
.article-authors strong {
    color: var(--clr-text-light);
}
.profile-card .article-abstract {
    font-size: var(--fz-xs);
    color: var(--clr-text-light);
    margin: var(--sp-2) 0 0;
}

/* Card footer: panel-appropriate actions (no border: the rows already
   have their own dividers) */
.profile-card-footer {
    margin-top: var(--sp-1);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--clr-muted);
    cursor: pointer;
}
.btn-icon:hover {
    color: var(--clr-accent);
    background: var(--clr-accent-dim);
}
.card-error {
    color: var(--clr-error-dark);
    font-size: var(--fz-xs);
    margin: 0;
}
.profile-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    justify-content: center;
    margin-top: var(--sp-1);
    margin-bottom: var(--sp-1);
}

/* Panel-appropriate actions: the card markup is identical everywhere,
   the surrounding panel decides which actions make sense. */
.profile-card .btn-include {
    background: var(--clr-success);
    border-color: var(--clr-success);
}
.profile-card .btn-include:hover {
    background: #0da271;
    border-color: #0da271;
}
.profile-panel[data-status='included'] .btn-include {
    display: none;
}

/* Excluded cards: the include button, nothing else. */
.profile-panel[data-status='excluded'] .btn-exclude {
    display: none;
}

/* Suggested cards: both action buttons share one line. */
.profile-panel[data-status='suggested'] .profile-card-actions {
    flex-wrap: nowrap;
}
.profile-panel[data-status='suggested'] .profile-card-actions .btn {
    flex: 1;
    padding-inline: var(--sp-1);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }
    .profile-panel-list {
        max-height: none;
    }
}