/* see CLAUDE_notes.md */

/* ── Show / hide (popup_manager toggles .p2-open) ──────────────────── */
#pub-refs-pop.prp-card { display: none; --prp-top: 64px; }
#pub-refs-pop.prp-card.p2-open { display: flex; }   /* p2-card is a flex column */

/* ── Card (shared) ─────────────────────────────────────────────────── */
#pub-refs-pop.prp-card {
    background: var(--bg-body, #f4f6f8);
    min-width: 460px;
    min-height: 360px;
    max-width: 96vw;
    max-height: 96vh;
    border-radius: 0;
}

/* ── Pinned (docked) — fixed to the right, under the header; never scrolls.
     Space is reserved by padding .coreInnerPage (see body.prp-docked below). ─ */
/* z-index 99: under header */
#pub-refs-pop.prp--pinned {
    position: fixed;
    top: var(--prp-top, 64px);
    right: 0;
    bottom: 0;
    left: auto;
    width: 460px;
    height: auto;           /* top + bottom define the height */
    max-height: none;
    border-radius: 0;
    border-top: 1px solid var(--border-color, #e2e8f0);
    border-left: 1px solid var(--border-color, #e2e8f0);
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.08);
    resize: none;
    z-index: 99;

    animation: prp-slide-in 160ms ease-out;
}



/* ── Floating (pop-up) — fixed, out of flow (content reclaims full width) ─ */
/* z-index 101: over header */
#pub-refs-pop.prp--floating {
    position: fixed;
    top: 20px;
    right: 20px;
    height: 90vh;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.18);
    resize: both;           /* native bottom-right resize grip */
    overflow: hidden;
    animation: prp-pop-in 140ms ease-out;
    z-index: 101;
}
/* When dragged we anchor by left instead of right (JS sets inline left). */
#pub-refs-pop.prp--floating.prp--moved {
    right: auto;
}

@keyframes prp-slide-in {
    from { transform: translateX(28px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes prp-pop-in {
    from { transform: translateY(8px) scale(0.99); opacity: 0; }
    to   { transform: translateY(0) scale(1);      opacity: 1; }
}

/* ── Frame parts never scroll — only the list does ─────────────────── */
.prp-header, .prp-tabs, .prp-types { flex: 0 0 auto; }
.prp-body {
    flex: 1 1 auto;
    min-height: 0;          /* allow the body to shrink so its list scrolls */
    overflow-y: auto;       /* scrollbar appears when there are many refs */
    overflow-x: hidden;
    border-top: 1px solid var(--border-color, #e2e8f0);
    /* The one --bg-card surface in the panel. See the .prp-card note in CLAUDE_notes.md. */
    background: var(--bg-card, #fff);
}

/* ── Header (doubles as the drag handle when floating) ─────────────── */
/* Controls (pin + ×) sit on a top row, title on the line beneath them. */
.prp-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.25rem 0.7rem 0.6rem;   /* tight top → buttons near the edge */
    /* popup_manager's .p2-header paints --table-header-bg. Cleared, so the
       header is part of the card's one ground like the rest of the chrome. */
    background: none;
}
.prp-header-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.1rem;
    min-height: 1.4rem;
}
.prp-header .p2-header-title {
    flex: none;
    margin: 0;
    padding: 0 0.2rem;
    line-height: 1.25;
}
/* Title icon. Matches --primary-hover. */
.prp-title-icon { color: var(--primary-hover); }
.prp-card.prp--floating .prp-header {
    cursor: move;
    user-select: none;
}
.prp-card.prp--dragging { transition: none; }
.prp-card.prp--dragging .prp-body { pointer-events: none; }

/* Compact icon buttons, snug to the top */
.prp-header .p2-close { min-height: 1.4rem; min-width: 1.6rem; font-size: var(--fs-xl); padding: 0 0.25rem; }

.prp-export-btn { font-size: var(--fs-xs); }

/* Pin toggle button. The pressed look is .p2-close[aria-pressed="true"]. */
.prp-pin { font-size: var(--fs-xs); }
.prp-pin i { transition: transform 120ms; }
.prp-pin[aria-pressed="true"] i { transform: rotate(-30deg); }

/* ── For / Against tabs ────────────────────────────────────────────── */
/* Transparent, like the rest of the chrome — the card's --bg-body shows
   through. The ACTIVE tab still paints --bg-card, which is what visually
   joins it to the list surface directly below. */
.prp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: none;
    flex: 0 0 auto;
}
.prp-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 120ms, border-color 120ms, background 120ms;
}
.prp-tab:hover { background: rgba(37, 99, 235, 0.06); }
.prp-tab.is-active {
    color: var(--primary-color, #2563eb);
    border-bottom-color: var(--primary-color, #2563eb);
    background: var(--bg-card, #fff);
}
.prp-tab[data-stance="against"].is-active {
    color: #b91c1c;
    border-bottom-color: #b91c1c;
}
.prp-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35em;
    height: 1.35em;
    padding: 0 0.3em;
    font-size: var(--fs-2xs);
    line-height: 1;
    border-radius: 999px;
    background: var(--border-color, #e2e8f0);
    color: var(--text-main, #1e293b);
}
.prp-tab.is-active .prp-tab-count { background: var(--primary-color, #2563eb); color: #fff; }
.prp-tab[data-stance="against"].is-active .prp-tab-count { background: #b91c1c; }
.prp-tabs.prp-tabs--single { display: none; }

/* ── Study-type filter — segmented control ─────────────────────────── */
.prp-types {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin: 0.6rem 0.9rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    background: var(--table-header-bg, #f1f5f9);
    overflow-x: auto;
    flex: 0 0 auto;
    scrollbar-width: thin;
    align-self: flex-start;
    width: fit-content;
    max-width: calc(100% - 1.8rem);   /* panel width minus the side margins */
}
.prp-type-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;         /* keep labels intact; the strip scrolls instead */
    gap: 0.3rem;
    padding: 0.32rem 0.7rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted, #64748b);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-color, #e2e8f0);
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms, color 120ms;
}
.prp-type-chip:last-child { border-right: none; }
.prp-type-chip:hover { background: rgba(37, 99, 235, 0.08); color: var(--text-main, #1e293b); }
.prp-type-chip.is-active {
    background: var(--primary-color, #2563eb);
    color: #fff;
}
.prp-type-count {
    font-size: var(--fs-2xs);
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

/* ── Body / list ───────────────────────────────────────────────────── */
/* The rows themselves come from PubRefs.css (shared with the Latest Research
   card). The panel only adds its own horizontal padding, so a row's hover
   highlight still runs edge to edge. */
.prp-body { padding: 0; }
.prp-card .prp-ref { padding-left: 0.9rem; padding-right: 0.9rem; }

/* ── Against-stance note — panel-only (the research card has no stances) ── */
.prp-ref-note {
    font-size: var(--fs-xs);
    line-height: 1.35;
    color: #b91c1c;
    background: #fef2f2;
    border-left: 3px solid #fecaca;
    padding: 0.3rem 0.5rem;
    border-radius: 0 4px 4px 0;
    margin-bottom: 0.4rem;
}
.prp-ref-strength {
    font-size: var(--fs-3xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.prp-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted, #6b7280);
    font-style: italic;
    font-size: var(--fs-sm);
}

/* ══ Export pop-up (#prp-export) ═══════════════════════════════════════ */
#prp-export.p2-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 9100;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
#prp-export.p2-overlay.p2-open,
#prp-export.p2-overlay[aria-hidden="false"] { display: flex; }

#prp-export .p2-card { max-width: 820px; width: 100%; }
.prp-x-body { padding: 18px; }

/* Option rows: label · control · count */
.prp-x-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.prp-x-label {
    flex: 0 0 auto;
    min-width: 4.5rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted, #64748b);
}
.prp-x-select {
    padding: 0.3rem 0.5rem;
    font-size: var(--fs-sm);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    color: var(--text-main, #1e293b);
}
.prp-x-count {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

/* Format picker — same segmented look as the study-type chips */
.prp-x-formats {
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    background: var(--table-header-bg, #f1f5f9);
    overflow: hidden;
}
.prp-x-fmt {
    flex: 0 0 auto;
    padding: 0.32rem 0.85rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted, #64748b);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-color, #e2e8f0);
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms, color 120ms;
}
.prp-x-fmt:last-child { border-right: none; }
.prp-x-fmt:hover { background: rgba(37, 99, 235, 0.08); color: var(--text-main, #1e293b); }
.prp-x-fmt.is-active { background: var(--primary-color, #2563eb); color: #fff; }

/* Live preview */
.prp-x-out {
    display: block;
    width: 100%;
    box-sizing: border-box;    /* padding must not push the body into overflow */
    min-height: 260px;
    max-height: 46vh;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-xs);
    line-height: 1.45;
    white-space: pre;          /* JSON / CSV keep their column shape */
    overflow: auto;
    resize: vertical;
    background: var(--table-header-bg, #f8fafc);
    color: var(--text-main, #1e293b);
}
/* Prose formats (text / bullets) wrap instead of scrolling sideways. */
.prp-x-out--wrap { white-space: pre-wrap; }

/* Copy + Download — identical buttons, top-right above the preview */
.prp-x-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0.2rem 0 0.35rem;
}
.prp-x-status { margin-right: auto; color: #16a34a; font-size: var(--fs-sm); }

/* ── Trigger button (rendered inside data cards by FAD_Base::refsButton) ── */
.prp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--primary-color, #2563eb);
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.prp-btn:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: var(--primary-color, #2563eb);
}
.prp-btn:focus-visible { outline: 2px solid var(--primary-color, #2563eb); outline-offset: 1px; }
.prp-btn i { opacity: 0.8; }
.prp-btn-count { font-variant-numeric: tabular-nums; }
.prp-btn-against {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3em;
    height: 1.3em;
    padding: 0 0.28em;
    margin-left: 0.15rem;
    font-size: var(--fs-3xs);
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
}

/* ── Mobile: full-width fixed drawer for both states (no side-by-side) ── */
@media (max-width: 560px) {
    #pub-refs-pop.prp-card { min-width: 0; }
    #pub-refs-pop.prp--pinned,
    #pub-refs-pop.prp--floating {
        position: fixed;
        top: var(--prp-top, 64px);
        left: 0; right: 0; bottom: 0;
        width: auto;
        height: auto;
        max-width: 100vw;
        flex: none;
        resize: none;
    }
    body.prp-docked { --rail-right: 0px; }

    #prp-pin { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   r02 ADDITIONS
   Year-range filter · sort row · full-page surface · abstract pane.
   ══════════════════════════════════════════════════════════════════ */

/* ── Year range ───────────────────────────────────────────────────── */
.prp-year {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.5rem 0.9rem 0;
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    color: var(--text-muted, #64748b);
}
.prp-year[hidden] { display: none; }

.prp-year-label { font-weight: 600; flex: 0 0 auto; }

.prp-year {
    --prp-bar-h:   14px;   /* the histogram strip */
    --prp-thumb-h: 18px;   /* taller, so the grips read as grips */
    --prp-thumb-w: 9px;
}

/* Kept close to the text height of the row it sits in — this is a filter
   control, not a chart. The handles are taller than the track (below), which
   is what makes them read as grabbable at this size. */
.prp-year-track {
    position: relative;
    flex: 0 0 200px;
    width: 200px;
    /* Close to the text beside it — this is a filter control in a row of
       filters, not a chart. The HANDLES are what overhang it (see below), so
       the bar can stay short without the grips becoming hard to grab. */
    height: var(--prp-bar-h, 14px);
    display: flex;
    align-items: center;
}

/* Histogram — one <i> per year, growing from the BOTTOM of a grey well.
   No padding: a bar has to start at the floor of the bar, or a one-paper year
   looks like it is hovering. */
.prp-year-hist {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    z-index: 1;
    border: 1px solid var(--border-color, #c5c5c5);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.prp-year-hist::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    backdrop-filter: grayscale(100%);
    -webkit-backdrop-filter: grayscale(100%);
    mask-image: linear-gradient(to right, #000 0, transparent 90%);
    -webkit-mask-image: linear-gradient(to right, #000 0, transparent 90%);
}

.prp-year-bar {
    flex: 1 1 0;
    min-width: 1px;
    background: #29aaff;
    opacity: 0.75;
    border-radius: 2px 2px 0 0;
    transition: opacity 120ms;
}
/* Outside the selected range — dimmed, never removed: the shape of the
   literature has to stay readable while you narrow the window. */
.prp-year-bar.is-out { opacity: 0.15; }

/* The selected band, measured in BARS (see paintYear) so it lines up with
   the histogram exactly rather than approximately. */
.prp-year-sel {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 2;
    background: rgba(37, 99, 235, 0.10);
    border-left: 1px solid rgba(37, 99, 235, 0.45);
    border-right: 1px solid rgba(37, 99, 235, 0.45);
    pointer-events: none;
}

.prp-year-input {
    position: absolute;
    left: calc(var(--prp-thumb-w, 9px) / -2);
    right: auto;
    width: calc(100% + var(--prp-thumb-w, 9px));
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    height: var(--prp-thumb-h, 18px);
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;   /* the TRACK must not swallow clicks */
    z-index: 3;
}
.prp-year-input:focus { outline: none; }
.prp-year-input::-webkit-slider-runnable-track { background: transparent; height: var(--prp-thumb-h, 18px); }
.prp-year-input::-moz-range-track  { background: transparent; height: var(--prp-thumb-h, 18px); }

.prp-year-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;   /* …but the THUMB must */
    width: var(--prp-thumb-w, 9px);
    height: var(--prp-thumb-h, 18px);
    border-radius: 3px;
    border: 1px solid var(--primary-color, #2563eb);
    background: var(--bg-card, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    opacity: 0.5;
    cursor: ew-resize;
}
.prp-year-input::-moz-range-thumb {
    pointer-events: auto;
    width: var(--prp-thumb-w, 9px);
    height: var(--prp-thumb-h, 18px);
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid var(--primary-color, #2563eb);
    background: var(--bg-card, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    opacity: 0.5;
    cursor: ew-resize;
}
.prp-year-input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--primary-color, #2563eb); outline-offset: 1px; }
.prp-year-input:focus-visible::-moz-range-thumb     { outline: 2px solid var(--primary-color, #2563eb); outline-offset: 1px; }

/* A handle that is actually constraining the list is coloured, so "this
   filter is on" is legible without reading the numbers. */
.prp-year.is-min-active .prp-year-lo-in::-webkit-slider-thumb,
.prp-year.is-max-active .prp-year-hi-in::-webkit-slider-thumb { border-color: #b91c1c; background: #fee2e2; }
.prp-year.is-min-active .prp-year-lo-in::-moz-range-thumb,
.prp-year.is-max-active .prp-year-hi-in::-moz-range-thumb     { border-color: #b91c1c; background: #fee2e2; }
.prp-year.is-min-active .prp-year-lo,
.prp-year.is-max-active .prp-year-hi { color: #b91c1c; font-weight: 700; }

.prp-year-val {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-main, #1e293b);
}
.prp-year-dash { opacity: 0.6; padding: 0 0.15em; }

.prp-year-reset {
    flex: 0 0 auto;
    padding: 0.15rem 0.45rem;
    font-size: var(--fs-3xs);
    font-weight: 600;
    color: var(--text-muted, #64748b);
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 4px;
    cursor: pointer;
}
.prp-year-reset:hover { background: rgba(37, 99, 235, 0.08); color: var(--primary-color, #2563eb); }
.prp-year-reset[hidden] { display: none; }

/* ── Sort row ───────────────────────────────────────────────────────
   Shares the segmented look of the type chips without being one — a
   <select> beats four chips when the options are orderings, not filters. */
.prp-sort {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.45rem 0.9rem 0.15rem;
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    color: var(--text-muted, #64748b);
}
.prp-sort[hidden] { display: none; }
.prp-sort-label { font-weight: 600; }
.prp-sort-select {
    padding: 0.22rem 0.45rem;
    font-size: var(--fs-xs);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    color: var(--text-main, #1e293b);
    cursor: pointer;
}
/* "12 of 40" — the honest count when a filter is narrowing the list. */
.prp-shown {
    margin-left: auto;
    font-size: var(--fs-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #94a3b8);
}

/* ── Full page ────────────────────────────────────────────────────── */
body.prp-fullpage { overflow: hidden; }

#pub-refs-pop.prp--fp {
    position: fixed;
    inset: 0;
    z-index: var(--fadb-fp-z, 900);
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    resize: none;
    display: none;                    /* still gated by popup_manager */
    flex-direction: column;
    animation: prp-fp-in 140ms ease-out;
}
#pub-refs-pop.prp--fp.p2-open { display: flex; }

@keyframes prp-fp-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#pub-refs-pop.prp--fp .prp-export-btn { order: 1; }
#pub-refs-pop.prp--fp .prp-fp-btn     { order: 2; }
#pub-refs-pop.prp--fp .prp-pin,
#pub-refs-pop.prp--fp .prp-header-controls > [data-p2-close] { display: none; }

#pub-refs-pop.prp--fp .prp-header { padding: 0.35rem 1.1rem 0.7rem; }
#pub-refs-pop.prp--fp .prp-header .p2-close { min-height: 1.8rem; min-width: 2rem; }
#pub-refs-pop.prp--fp .prp-header .p2-header-title { font-size: var(--fs-lg); }
/* Full page is not draggable — the header stops pretending to be a handle. */
#pub-refs-pop.prp--fp .prp-header { cursor: default; }

/* Filter furniture gets the wider gutter too — and is confined to the LEFT
   column, because the abstract pane now starts at the bottom of the header
   (see "Abstract pane" below), not below the filter rows. */
#pub-refs-pop.prp--fp .prp-types,
#pub-refs-pop.prp--fp .prp-year,
#pub-refs-pop.prp--fp .prp-sort { margin-left: 1.1rem; margin-right: 1.1rem; }

#pub-refs-pop.prp--fp .prp-tabs,
#pub-refs-pop.prp--fp .prp-body { width: var(--prp-fp-left, 44%); }
#pub-refs-pop.prp--fp .prp-year,
#pub-refs-pop.prp--fp .prp-sort { width: calc(var(--prp-fp-left, 44%) - 2.2rem); }
#pub-refs-pop.prp--fp .prp-types { max-width: calc(var(--prp-fp-left, 44%) - 2.2rem); }
/* The count ("12 of 40") is panel furniture — full page has the room to show
   the list itself, so the number is noise there. */
#pub-refs-pop.prp--fp .prp-shown { display: none; }

/* ── The split ────────────────────────────────────────────────────── */
.prp-split { display: block; }

#pub-refs-pop.prp--fp .prp-body { overflow: hidden; padding: 0; }
#pub-refs-pop.prp--fp .prp-split {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    min-height: 0;
}
/* The 44% lives on .prp-body (above); the wrap just fills it. The column
   divider is .prp-abs's left border, so it runs the FULL height of the
   split, from the header down. */
#pub-refs-pop.prp--fp .prp-list-wrap {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
}
#pub-refs-pop.prp--fp .prp-ref { padding-left: 1.1rem; padding-right: 1.1rem; }

/* Rows are only clickable where clicking does something. */
#pub-refs-pop.prp--fp .prp-ref[data-id] { cursor: pointer; }
#pub-refs-pop.prp--fp .prp-ref[data-id]:hover .prp-ref-title { color: var(--primary-hover, #1d4ed8); }
#pub-refs-pop.prp--fp .prp-ref.is-selected {
    background: rgba(37, 99, 235, 0.07);
    box-shadow: inset 3px 0 0 var(--primary-color, #2563eb);
}

/* ── Abstract pane ──────────────────────────────────────────────────
   Hidden entirely outside full page: there is no room for it in a 460px
   rail, and a hidden-but-present column would still take part in layout. */
.prp-abs { display: none; }
#pub-refs-pop.prp--fp .prp-abs {
    display: block;
    position: absolute;
    top: var(--prp-fp-head, 0px);
    right: 0;
    bottom: 0;
    width: calc(100% - var(--prp-fp-left, 44%));
    min-width: 0;
    overflow-y: auto;
    border-left: 1px solid var(--border-color, #e2e8f0);
    /* Deliberately NOT --bg-card: only .prp-body is the paper surface, so the
       reading pane sits on the panel's ground and the split reads as one sheet
       of references beside it, rather than two competing white columns. */
    background: none;
}
.prp-abs-inner { padding: 1.1rem 1.3rem 2rem; max-width: 68ch; }

.prp-abs-head {
    padding-bottom: 0.6rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.prp-abs-title {
    margin: 0.35rem 0 0;
    font-size: var(--fs-lg);
    line-height: 1.3;
    color: var(--text-main, #1e293b);
}
.prp-abs-sec {
    margin: 1rem 0 0.25rem;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}
.prp-abs-sec:first-child { margin-top: 0; }
.prp-abs-text p {
    margin: 0 0 0.7rem;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-main, #1e293b);
}

.prp-abs-idle,
.prp-abs-loading,
.prp-abs-none {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 1.4rem 0;
    font-size: var(--fs-sm);
    font-style: italic;
    color: var(--text-muted, #6b7280);
}
.prp-abs-none { font-style: normal; }

/* ── Full page on a phone ─────────────────────────────────────────── */
@media (max-width: 760px) {
    #pub-refs-pop.prp--fp .prp-split { flex-direction: column; }
    #pub-refs-pop.prp--fp .prp-list-wrap {
        flex: 1 1 auto;
        min-width: 0;
        border-right: none;
    }
    #pub-refs-pop.prp--fp .prp-abs { display: none; }
    /* No right pane → the left column is the whole page again. */
    #pub-refs-pop.prp--fp .prp-tabs,
    #pub-refs-pop.prp--fp .prp-body,
    #pub-refs-pop.prp--fp .prp-year,
    #pub-refs-pop.prp--fp .prp-sort { width: auto; }
    #pub-refs-pop.prp--fp .prp-types { max-width: calc(100% - 2.2rem); }
}

/* ── Per-row critique button ──────────────────────────────────────────── */
.prp-ref { position: relative; }

.prp-ref-fb {
    position: absolute;
    top: 0.45rem;
    right: 0.2rem;
    z-index: 1;
    padding: 3px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 120ms;
}
.prp-ref:hover .prp-ref-fb,
.prp-ref-fb:focus-visible,
.prp-ref-fb.is-mine,
.prp-ref-fb.is-admin-seen { opacity: 1; }

/* The meta line must not run under the button. Widened with the icon: the glyph
   now renders at the site's default tool-icon size, not the button's label size. */
.prp-ref-fb + .prp-ref-meta { padding-right: 2.5rem; }

@media (hover: none) {
    .prp-ref-fb { opacity: .55; }
}

/* In full page the rows are wider and the click target is bigger, so give the
   button the same breathing room the rows got. */
#pub-refs-pop.prp--fp .prp-ref-fb { right: 0.4rem; }

/* ══ Suggest publications (#prp-suggest) ═══════════════════════════════ */
#prp-suggest.p2-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 9100;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
#prp-suggest.p2-overlay.p2-open,
#prp-suggest.p2-overlay[aria-hidden="false"] { display: flex; }

#prp-suggest .p2-card { max-width: 780px; width: 100%; }
.prp-sg-body { padding: 18px; max-height: 78vh; overflow-y: auto; }

.prp-sg-lead {
    margin: 0 0 0.7rem;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text-muted, #64748b);
}
.prp-sg-lbl {
    display: block;
    margin: 0.2rem 0 0.25rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted, #64748b);
}
.prp-sg-dim { font-weight: 400; opacity: 0.85; }

.prp-sg-in,
.prp-sg-shared {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 6px;
    background: var(--table-header-bg, #f8fafc);
    color: var(--text-main, #1e293b);
    font-size: var(--fs-sm);
    line-height: 1.5;
    resize: vertical;
}
/* The paste box holds identifiers, which are strings to be compared by eye —
   a monospace face makes a transposed digit visible. */
.prp-sg-in { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); }
.prp-sg-shared { margin-bottom: 0.7rem; }

.prp-sg-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0.7rem;
}
.prp-sg-status { margin-right: auto; font-size: var(--fs-xs); color: var(--text-muted, #64748b); }
.prp-sg-status.is-err { color: #b91c1c; }

/* ── A review row ─────────────────────────────────────────────────── */
.prp-sg-list { border-top: 1px solid var(--border-color, #e2e8f0); }
.prp-sg-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.2rem;
}
.prp-sg-row:hover { background: none; }   /* not a clickable list */
.prp-sg-main { flex: 1 1 auto; min-width: 0; }
.prp-sg-pick { flex: 0 0 auto; padding-top: 0.15rem; cursor: pointer; }
.prp-sg-cb { width: 15px; height: 15px; cursor: pointer; }
.prp-sg-cb:disabled { cursor: default; }

/* Already cited: shown so the reader can see we have it, faded so it does
   not read as something they still have to act on. */
.prp-sg-row.is-cited { opacity: 0.55; }

.prp-sg-ids {
    margin-top: 0.25rem;
    font-size: var(--fs-2xs);
    color: var(--text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}
.prp-sg-raw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.prp-sg-title {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0.15rem 0 0;
    padding: 5px 8px;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 5px;
    font-size: var(--fs-sm);
    font-family: inherit;
    color: var(--text-main, #1e293b);
    background: var(--bg-card, #fff);
}
.prp-sg-note {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.35rem;
    padding: 5px 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 5px;
    font-size: var(--fs-xs);
    font-family: inherit;
    line-height: 1.4;
    color: var(--text-main, #1e293b);
    background: var(--bg-card, #fff);
    resize: none;
    overflow: hidden;
}

/* ── State chips ──────────────────────────────────────────────────────
   Five states, five different suggestions. They wear the same shape as
   the study-type badge beside them, in colours that say what to expect:
   green = new to us, blue = we have it, grey = nothing resolved. */
.prp-sg-state {
    font-size: var(--fs-2xs);
    font-weight: 700;
    padding: 0.08rem 0.4rem;
    border-radius: 4px;
    background: #e2e8f0;
    color: #1e293b;
    white-space: nowrap;
}
.prp-sg-state.is-found    { background: #dcfce7; color: #166534; }
.prp-sg-state.is-catalog  { background: #dbeafe; color: #1e40af; }
.prp-sg-state.is-cited    { background: #e2e8f0; color: #475569; }
.prp-sg-state.is-unknown,
.prp-sg-state.is-unparsed { background: #fef3c7; color: #92400e; }

/* ── The header trigger ───────────────────────────────────────────── */
.prp-suggest-btn { font-size: var(--fs-xs); }
.prp-suggest-btn:hover {
    color: var(--primary-color, #2563eb);
    background: rgba(37, 99, 235, 0.12);
}

@media (max-width: 560px) {
    .prp-sg-body { max-height: 84vh; }
    #prp-suggest.p2-overlay { padding: 10px; }
}