/* ═══════════════════════════════════════════════════
   aihaber — Papers Archive (mockup-12 birebir)
   ai_paper post type — Academic directory + vote rails
   ═══════════════════════════════════════════════════ */

/* ── HERO (paper-warm + asimetrik) ───────────────── */
.ph {
    background: var(--paper-warm);
    border-bottom: 1px solid var(--paper-line);
    padding: 48px 0 40px;
}
.ph__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: end;
}
.ph__crumbs {
    font: 700 11px/1 var(--font-mono);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 18px;
}
.ph__title {
    font: 900 clamp(48px, 8vw, 96px)/.9 var(--font-display);
    letter-spacing: -3.5px;
    margin: 0 0 16px;
    color: var(--text-ink);
}
.ph__title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--c-acc-orange);
}
.ph__sub {
    font: 400 18px/1.6 var(--font-serif);
    color: #444;
    margin: 0;
    max-width: 580px;
    text-wrap: pretty;
}
.ph__sub b {
    background: var(--c-acc-lime);
    padding: 1px 5px;
    font-weight: 700;
    color: var(--ink);
}
.ph-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--paper-line);
    background: var(--paper);
}
.ph-stats > div {
    padding: 16px 18px;
    border-right: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
}
.ph-stats > div:nth-child(2n) { border-right: none; }
.ph-stats > div:nth-last-child(-n+2) { border-bottom: none; }
.ph-stats b {
    display: block;
    font: 900 26px/1 var(--font-mono);
    letter-spacing: -1px;
    color: var(--text-ink);
}
.ph-stats span {
    font: 800 10px/1 var(--font-body);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-top: 6px;
    display: block;
}

/* ── SEARCH + SORT TABS ──────────────────────────── */
.psr {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 32px 0;
    display: flex;
    gap: 14px;
    flex-direction: column;
}
.psr__main { display: flex; gap: 14px; flex-wrap: wrap; }
.psr__in {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    border: 2px solid var(--ink);
    background: var(--paper);
    padding: 0 14px;
    height: 48px;
    gap: 10px;
    min-width: 0;
}
.psr__in .icon-glyph {
    background: transparent;
    font-size: 18px;
    color: var(--text-mute);
    flex-shrink: 0;
}
.psr__in input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font: 600 15px/1 var(--font-body);
    color: var(--text-ink);
    min-width: 0;
}
.psr__in .psr__count {
    font: 700 11px/1 var(--font-mono);
    background: var(--c-acc-lime);
    padding: 5px 7px;
    color: var(--ink);
    flex-shrink: 0;
}

.sort-tabs {
    display: flex;
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
    background: var(--paper);
    align-items: stretch;
    gap: 0;
    margin: 0 -32px;
    padding: 0 32px;
    flex-wrap: wrap;
}
.sort-tabs__lbl {
    padding: 13px 0;
    font: 800 10px/1 var(--font-body);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-mute);
    align-self: center;
    margin-right: 18px;
}
.sort-tabs a {
    background: transparent;
    border: none;
    border-right: 1px solid #eee;
    padding: 13px 16px;
    font: 800 11px/1 var(--font-body);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    color: #444;
    display: flex;
    align-items: center;
    gap: 7px;
    position: relative;
    text-decoration: none;
}
.sort-tabs a:hover { background: var(--paper-soft); }
.sort-tabs a.is-active,
.sort-tabs a.act {
    background: var(--ink);
    color: #fff;
    font-weight: 900;
}
.sort-tabs a.is-active::after,
.sort-tabs a.act::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--c-acc-lime);
}
.sort-tabs a i {
    font-style: normal;
    font: 900 11px/1 var(--font-mono);
    background: var(--c-acc-orange);
    color: #fff;
    padding: 3px 5px;
    letter-spacing: .5px;
}
.sort-tabs a.is-active i,
.sort-tabs a.act i { background: var(--c-acc-lime); color: var(--ink); }
.sort-tabs__sep { flex: 1; border-right: none !important; padding: 0 !important; }
.sort-tabs__time {
    padding: 13px 14px;
    font: 800 10px/1 var(--font-mono);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-mute);
    align-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sort-tabs__time select {
    font: 800 10px/1 var(--font-mono);
    background: transparent;
    border: 1px solid var(--paper-line);
    padding: 7px 9px;
    letter-spacing: 1.2px;
    color: var(--ink);
    cursor: pointer;
}

/* ── LAYOUT ──────────────────────────────────────── */
.pw {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: start;
}

.pf {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.pf__b { border: 1px solid var(--paper-line); background: var(--paper); }
.pf__h {
    padding: 11px 14px;
    background: var(--paper-soft);
    border-bottom: 1px solid var(--paper-line);
    font: 800 11px/1 var(--font-body);
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    color: var(--text-ink);
}
.pf__h em {
    font-style: normal;
    font: 700 10px/1 var(--font-mono);
    color: var(--text-mute);
}
.pf__l { display: flex; flex-direction: column; }
.pf__l a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    font: 600 13px/1 var(--font-body);
    cursor: pointer;
    border-bottom: 1px solid #f3f3f3;
    color: var(--text-ink);
    text-decoration: none;
}
.pf__l a:last-child { border-bottom: none; }
.pf__l a:hover { background: var(--paper-soft); }
.pf__l a.is-checked,
.pf__l a.ck { background: var(--c-acc-lime); font-weight: 800; }
.pf__l a > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.pf__l a input { margin: 0; pointer-events: none; }
.pf__l a .ct {
    font: 700 10px/1 var(--font-mono);
    background: #fff;
    border: 1px solid #ddd;
    padding: 2px 5px;
    color: var(--text-mute);
    flex-shrink: 0;
}
.pf__l a.is-checked .ct,
.pf__l a.ck .ct { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── HOT THIS WEEK (3-card top section) ──────────── */
.hot {
    margin-bottom: 36px;
    border: 1px solid var(--paper-line);
}
.hot__head {
    padding: 14px 18px;
    background: var(--ink);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.hot__head h3 {
    font: 900 18px/1 var(--font-display);
    margin: 0;
    letter-spacing: -.4px;
    color: #fff;
}
.hot__head h3 em {
    font-style: normal;
    color: var(--c-acc-lime);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 1px;
    margin-left: 8px;
}
.hot__head em {
    font-style: normal;
    font: 700 11px/1 var(--font-mono);
    color: #888;
}
.hot__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.hot__card {
    padding: 16px 18px;
    border-right: 1px solid var(--paper-line);
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 14px;
    align-items: start;
    background: var(--paper);
    text-decoration: none;
    color: inherit;
    transition: background .12s var(--ease);
}
.hot__card:last-child { border-right: none; }
.hot__card:hover { background: var(--paper-soft); }
.hot__vote {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--paper-line);
    background: #fafaf7;
    flex-shrink: 0;
}
.hot__vote .up {
    background: var(--c-acc-orange);
    color: #fff;
    font: 900 13px/1 var(--font-mono);
    padding: 5px 0;
    text-align: center;
    letter-spacing: .5px;
}
.hot__vote .n {
    padding: 6px 0;
    text-align: center;
    font: 900 17px/1 var(--font-mono);
    letter-spacing: -.5px;
    color: var(--ink);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #eee;
}
.hot__vote .delta {
    padding: 4px 0;
    text-align: center;
    font: 800 9px/1 var(--font-mono);
    color: var(--c-acc-orange);
    background: #fff;
    letter-spacing: .3px;
}
.hot__rank {
    font: 900 14px/1 var(--font-mono);
    color: var(--text-mute);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.hot__card h4 {
    font: 900 17px/1.25 var(--font-display);
    margin: 0 0 6px;
    letter-spacing: -.3px;
    text-wrap: balance;
    color: var(--text-ink);
}
.hot__card .meta {
    font: 700 10px/1.4 var(--font-mono);
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.hot__card .ct {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    font: 700 11px/1 var(--font-mono);
    color: var(--text-mute);
}
.hot__card .ct b { color: var(--ink); }

/* ── PAPER LIST (academic rows w/ vote rail) ─────── */
.pl {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--paper-line);
}
.pl__row {
    padding: 18px 22px;
    border-bottom: 1px solid var(--paper-line);
    display: grid;
    grid-template-columns: 56px 1fr 280px;
    gap: 18px;
    background: var(--paper);
    align-items: start;
    transition: background .12s var(--ease);
}
.pl__row:last-child { border-bottom: none; }
.pl__row:hover { background: var(--paper-soft); }

.pl__vote {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--paper-line);
    background: #fafaf7;
}
.pl__vote button {
    background: transparent;
    border: none;
    padding: 7px 0;
    cursor: pointer;
    font: 900 13px/1 var(--font-mono);
    color: var(--text-mute);
    transition: background .12s, color .12s;
}
.pl__vote button:hover { background: var(--paper-soft); }
.pl__vote button.up:hover,
.pl__vote button.up.is-active {
    background: var(--c-acc-orange);
    color: #fff;
}
.pl__vote button.dn:hover,
.pl__vote button.dn.is-active {
    background: var(--c-acc-purple);
    color: #fff;
}
.pl__vote .n {
    padding: 6px 0;
    text-align: center;
    font: 900 16px/1 var(--font-mono);
    letter-spacing: -.5px;
    color: var(--ink);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background: #fff;
}
.pl__vote .delta {
    padding: 5px 2px;
    text-align: center;
    font: 900 9px/1 var(--font-mono);
    color: var(--c-acc-orange);
    background: #fff;
    border-top: 1px solid #f0f0f0;
    letter-spacing: .3px;
}
.pl__vote .delta em {
    display: block;
    font-style: normal;
    font-size: 7px;
    color: var(--text-mute);
    margin-top: 2px;
    letter-spacing: 1px;
    font-weight: 700;
}
.pl__vote .delta.dn { color: #888; }
.pl__vote .rk {
    padding: 5px 0;
    text-align: center;
    font: 900 11px/1 var(--font-mono);
    background: var(--ink);
    color: #fff;
    letter-spacing: .5px;
}

.pl__body { min-width: 0; }
.pl__body h4 {
    font: 900 22px/1.25 var(--font-serif);
    margin: 0 0 6px;
    letter-spacing: -.5px;
    text-wrap: balance;
    color: var(--ink);
}
.pl__body h4 a { color: inherit; text-decoration: none; }
.pl__body h4 a:hover { color: var(--c-acc-orange); }
.pl__body h4 em { font-style: italic; color: var(--c-acc-orange); }

.pl__authors {
    font: 600 12.5px/1.4 var(--font-body);
    color: #444;
    margin: 0 0 8px;
}
.pl__authors b { font-weight: 800; color: var(--text-ink); }
.pl__abstract {
    font: 400 14px/1.55 var(--font-serif);
    color: #222;
    margin: 0 0 10px;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pl__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.pl__chips span,
.pl__chips a {
    font: 800 9px/1 var(--font-body);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 7px;
    background: var(--paper-soft);
    border: 1px solid #ccc;
    color: var(--text-ink);
    text-decoration: none;
}
.pl__chips a:hover { background: var(--c-acc-lime); border-color: var(--ink); }
.pl__chips span.lime,
.pl__chips a.lime { background: var(--c-acc-lime); font-weight: 900; }
.pl__chips span.org,
.pl__chips a.org {
    background: var(--c-acc-orange);
    color: #fff;
    border-color: var(--c-acc-orange);
    font-weight: 900;
}
.pl__chips span.hot,
.pl__chips a.hot {
    background: var(--ink);
    color: var(--c-acc-lime);
    border-color: var(--ink);
    font-weight: 900;
}

.pl__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 700 11px/1 var(--font-mono);
    color: var(--text-mute);
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
}
.pl__meta .arxiv {
    font: 800 12px/1 var(--font-mono);
    color: var(--ink);
    text-decoration: none;
}
.pl__meta .arxiv:hover { color: var(--c-acc-orange); }
.pl__meta .stats {
    display: flex;
    gap: 12px;
    font: 700 11px/1.4 var(--font-mono);
    color: var(--text-mute);
}
.pl__meta .stats b {
    display: block;
    font: 900 18px/1 var(--font-mono);
    color: var(--ink);
    margin-bottom: 3px;
}
.pl__meta .stats .up b { color: var(--c-acc-orange); }
.pl__meta .stats > span {
    text-align: right;
}

.pl__cta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: auto;
}
.pl__cta a {
    padding: 8px 11px;
    font: 900 10px/1 var(--font-body);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid var(--paper-line);
    color: var(--text-ink);
    text-decoration: none;
    background: var(--paper);
}
.pl__cta a:hover { background: var(--c-acc-lime); }
.pl__cta a.pri { background: var(--ink); color: #fff; border-color: var(--ink); }
.pl__cta a.pri:hover { background: var(--c-acc-lime); color: var(--ink); }

/* ── PAGER ──────────────────────────────────────── */
.pl-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding: 14px 18px;
    border: 1px solid var(--paper-line);
    background: var(--paper-soft);
    flex-wrap: wrap;
    gap: 12px;
}
.pl-pager__info {
    font: 700 12px/1 var(--font-mono);
    color: var(--text-mute);
}
.pl-pager nav { display: flex; gap: 4px; flex-wrap: wrap; }
.pl-pager nav a,
.pl-pager nav span {
    padding: 8px 12px;
    background: var(--paper);
    border: 1px solid var(--paper-line);
    font: 800 11px/1 var(--font-body);
    color: var(--text-ink);
    text-decoration: none;
}
.pl-pager nav a:hover { background: var(--c-acc-lime); }
.pl-pager nav .is-active,
.pl-pager nav .current { background: var(--ink); color: #fff; }

/* ── EMPTY STATE ─────────────────────────────────── */
.pl-empty {
    text-align: center;
    padding: 64px 24px;
    background: var(--paper-soft);
    border: 1px solid var(--paper-line);
}
.pl-empty h3 {
    font: 900 24px/1 var(--font-display);
    letter-spacing: -.8px;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.pl-empty p { font-size: 14px; color: var(--text-mute); margin: 0; }

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1199px) {
    .pl__row { grid-template-columns: 56px 1fr; }
    .pl__meta { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid #f3f3f3; }
    .hot__grid { grid-template-columns: 1fr 1fr; }
    .hot__card:nth-child(2n) { border-right: none; }
    .hot__card:nth-child(-n+2) { border-bottom: 1px solid var(--paper-line); }
    .hot__card:last-child { border-bottom: none; }
}

@media (max-width: 1023px) {
    .ph { padding: 32px 0 28px; }
    .ph__inner { grid-template-columns: 1fr; gap: 24px; }
    .ph__title { font-size: 56px; letter-spacing: -2px; }
    .ph-stats { grid-template-columns: repeat(4, 1fr); }
    .ph-stats > div { border-right: 1px solid var(--paper-line); border-bottom: none; }
    .ph-stats > div:last-child { border-right: none; }
    .ph-stats > div:nth-last-child(-n+2) { border-bottom: none; }
    .psr { padding: 16px 20px 0; }
    .sort-tabs { margin: 0 -20px; padding: 0 20px; overflow-x: auto; flex-wrap: nowrap; }
    .pw { grid-template-columns: 1fr; padding: 20px; }
    .pf { position: static; top: auto; }
    .hot__grid { grid-template-columns: 1fr; }
    .hot__card { border-right: none !important; border-bottom: 1px solid var(--paper-line); }
    .hot__card:last-child { border-bottom: none; }
}

@media (max-width: 640px) {
    .ph__title { font-size: 40px; letter-spacing: -1.5px; }
    .ph__sub { font-size: 16px; }
    .ph-stats { grid-template-columns: 1fr 1fr; }
    .ph-stats > div { border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
    .ph-stats > div:nth-child(2n) { border-right: none; }
    .ph-stats > div:nth-last-child(-n+2):not(:last-child) { border-bottom: 1px solid var(--paper-line); }
    .ph-stats > div:last-child { border-bottom: none; }
    .pl__row { padding: 14px 16px; gap: 12px; grid-template-columns: 44px 1fr; }
    .pl__body h4 { font-size: 18px; }
    .pl__abstract { font-size: 13px; }
    .pl-pager { padding: 12px; }
}