.fav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 6px; cursor: pointer;
    background: transparent;
    border: 1px solid var(--border-color, #d8e0e6);
    color: var(--text-muted, #7a8b95);
    font-size: var(--fs-sm); font-weight: 600; font-family: inherit;
    line-height: 1.2;
}
.fav-btn:hover { background: var(--hover-bg, rgba(0,0,0,.05)); color: var(--text-color, #12303f); }
.fav-btn.is-fav { color: #d9a406; border-color: #e9cd7a; background: rgba(233, 205, 122, .12); }
.fav-btn .fav-n { font-size: var(--fs-2xs); opacity: .75; }

/* ── The page-header bookmark star (UserActions::favoriteStar) ───────────── */
.fav-btn.fav-star {
    padding: 0;
    width: 1.35em;
    height: 1.35em;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #9aa8b1);
    opacity: .45;
    font-size: var(--fs-lg);
    line-height: 1;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    transition: opacity .15s ease, color .15s ease, transform .15s ease;
}
.fav-btn.fav-star:hover,
.fav-btn.fav-star:focus-visible {
    background: transparent;
    color: #d9a406;
    opacity: .8;
    transform: scale(1.12);
}
.fav-btn.fav-star.is-fav {
    color: #e8b306;
    border: 0;
    background: transparent;
    opacity: 1;
    text-shadow: 0 1px 1px rgba(120, 85, 0, .25);
}
.fav-btn.fav-star.is-fav:hover { color: #c9950a; opacity: 1; }
.fav-btn.fav-star i { font-size: inherit; }

/* Keyboard focus still needs to be visible once the border is gone. */
.fav-btn.fav-star:focus-visible {
    outline: 2px solid var(--accent-color, #2e5d78);
    outline-offset: 2px;
}

.fav-researchers:empty { display: none; }
.fav-researchers {
    margin: 14px 0; padding: 12px 14px;
    border: 1px solid var(--border-color, #d8e0e6);
    border-left: 3px solid var(--accent-color, #2e5d78);
    border-radius: 6px;
    background: var(--card-bg, #fbfcfd);
}
.fav-res-head {
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--accent-color, #2e5d78); margin-bottom: 8px;
}
.fav-res-list { list-style: none; margin: 0; padding: 0; }
.fav-res-list li { padding: 5px 0; border-top: 1px solid var(--border-color, #eef2f4); }
.fav-res-list li:first-child { border-top: 0; }
.fav-res-name { font-weight: 600; color: var(--text-color, #12303f); }
.fav-res-int  { font-size: var(--fs-xs); color: var(--text-muted, #7a8b95); margin-top: 2px; }

.fb-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 5px; cursor: pointer;
    background: transparent; border: 1px solid transparent;
    color: var(--text-muted, #9aa8b1);
    font-size: var(--fs-2xs); font-weight: 600; font-family: inherit;
}
/* Hover goes to --primary-color, NOT --accent-color. Both are "the accent", but
   in light mode --accent-color is #2e5d78, a slate barely a step from the muted
   grey this button rests at, so the hover read as nothing happening. --primary
   is the bright blue every other icon button on the site moves to on hover
   (toolIcons.css §2, ".toolBtn:hover"), so this now matches them. The resting
   .is-mine state keeps --accent-color, which is the point: quietly-marked and
   actively-hovered stay two distinguishable colours. */
.fb-btn:hover {
    color: var(--primary-color, #3b82f6);
    border-color: var(--border-color, #d8e0e6);
    background: var(--hover-bg, rgba(0,0,0,.04));
}
.fb-btn:focus-visible {
    outline: 2px solid var(--accent-color, #2e5d78);
    outline-offset: 1px;
}
/* The GLYPH does not ride the button's label size.
   .fb-btn sets font-size: --fs-2xs for the word "Feedback"; because .toolIcon is
   sized in em, that used to shrink the icon to ~0.72rem — half the size of every
   other tool icon on the page, and unreadable in the card corner where the button
   is icon-only. Resetting font-size on the icon itself puts it back on the site's
   default icon size (--toolIcon-size, 1.25em of 1rem) without touching the label.
   Same rule covers the Font Awesome fallback, which sizes by font-size alone. */
.fb-btn .toolIcon,
.fb-btn i { font-size: var(--fs-base); flex: 0 0 auto; }

/* ── State 1: this reader has already written about this section ──────────
   Their OWN history only. This state is not governed by the feedback.public
   config flag and never implies anyone else said anything. */
.fb-btn.is-mine {
    color: var(--accent-color, #2e5d78);
    border-color: var(--border-color, #d8e0e6);
}
.fb-btn.is-mine:hover { background: var(--hover-bg, rgba(0,0,0,.06)); }

/* ── The icon-only variant, in a row rather than a card corner ────────────
   The topics header: one button per topic, sitting in the title band beside
   the bookmark star. It is NOT .fb-btn--corner — that one is absolutely
   positioned inside a card and hides itself until the card is hovered, both
   wrong for a control that is the page's only feedback affordance.

   No border and no fill at rest, so it reads as an icon in a title row and not
   as a button someone left there; the colour move alone carries the hover,
   which is also the half that survives forced-colours mode. */
.fb-btn--icon {
    gap: 0;
    padding: 4px;
    border-radius: 6px;
}
.fb-btn--icon:hover {
    color: var(--primary-color, #3b82f6);
    border-color: transparent;
    background: var(--hover-bg, rgba(0,0,0,.05));
}

/* ── State 2: admin count badge ───────────────────────────────────────────
   Integers, admin only, also independent of feedback.public — curating is not
   publishing. Hidden by [hidden] until fa-user.js fills it. */
.fb-n[hidden] { display: none; }
.fb-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.35em; height: 1.35em; padding: 0 .35em;
    border-radius: 999px;
    font-size: var(--fs-3xs, .65rem); font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--accent-color, #2e5d78); color: #fff;
    text-decoration: none;
}
a.fb-n:hover { filter: brightness(1.15); }

/* ── The corner variant ─────────────────────────────────────────────────── */
.fb-corner {
    position: absolute;
    top: .45rem;
    right: .55rem;
    z-index: 2;
}
.fap-section:has(> .fb-corner),
.card:has(> .fb-corner) { position: relative; }

@supports not (selector(:has(*))) {
    .fb-corner { position: static; text-align: right; }
}

.fb-btn--corner {
    padding: 4px;
    border-radius: 6px;
    opacity: .35;
    transition: opacity 120ms, color 120ms, background 120ms;
}
.fap-section:hover .fb-btn--corner,
.fb-btn--corner:focus-visible,
.fb-btn--corner.is-mine,
.fb-btn--corner.is-admin-seen { opacity: 1; }

/* No hover on a touch screen — a control that only appears on hover does not
   exist there. Show it outright and let it be quiet instead. */
@media (hover: none) {
    .fb-btn--corner { opacity: .6; }
}

/* The paper a critique is about, shown instead of the tab strip when the modal
   was opened from a reference row. It replaces the identifier fields, so it has
   to carry enough for the writer to be sure they have the right paper. */
.fa-modal-pub {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-left: 3px solid var(--accent-color, #2e5d78);
    border-radius: 0 4px 4px 0;
    background: var(--hover-bg, rgba(0,0,0,.04));
    font-size: var(--fs-sm); line-height: 1.35;
    color: var(--text-color, #12303f);
}

.fa-modal-back {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(10, 25, 35, .45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 16px; overflow-y: auto;
}
.fa-modal {
    width: 100%; max-width: 520px;
    background: var(--card-bg, #fff);
    color: var(--text-color, #12303f);
    border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
    overflow: hidden;
}
.fa-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color, #e6ecf0);
    font-size: var(--fs-md);
}
.fa-modal-x {
    background: none; border: 0; cursor: pointer; font-size: var(--fs-2xl); line-height: 1;
    color: var(--text-muted, #9aa8b1); padding: 0 4px;
}
.fa-modal-x:hover { color: var(--text-color, #12303f); }
.fa-modal-body { padding: 16px; }
.fa-modal-lead { margin: 0 0 14px; font-size: var(--fs-sm); color: var(--text-muted, #6d7d87); line-height: 1.5; }

.fa-modal-actions {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--border-color, #eef2f4);
}
.fa-btn2 {
    padding: 8px 16px; border-radius: 6px; border: 0; cursor: pointer;
    background: var(--accent-color, #2e5d78); color: #fff;
    font-size: var(--fs-sm); font-weight: 600; font-family: inherit;
}
.fa-btn2:hover { filter: brightness(1.1); }
.fa-btn2--ghost {
    background: transparent; color: var(--text-muted, #6d7d87);
    border: 1px solid var(--border-color, #d8e0e6);
}
.fa-btn2--ghost:hover { background: var(--hover-bg, rgba(0,0,0,.05)); filter: none; }

.fa-lbl {
    display: block; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--text-muted, #7a8b95); margin: 12px 0 5px;
}
.fa-in, .fa-ta {
    width: 100%; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid var(--border-color, #c7d0d6); border-radius: 6px;
    font-size: var(--fs-sm); font-family: inherit;
    background: var(--input-bg, #fff); color: var(--text-color, #12303f);
}
.fa-ta { resize: vertical; }
.fa-in:focus, .fa-ta:focus {
    outline: 2px solid rgba(46, 93, 120, .22);
    border-color: var(--accent-color, #2e5d78);
}
.fa-row { display: flex; gap: 10px; }
.fa-row > div { flex: 1; }

/* ── Radio group: one visible row per choice ──────────────────────────────
   A <select> hides every option but one, which is exactly wrong for a short,
   mutually exclusive list the writer has to weigh — "am I critiquing this, or
   asking for it to be pulled?" is a decision, not a lookup. Three labelled rows
   cost one extra line of height and make the whole choice readable at a glance. */
.fa-radios { display: grid; gap: 6px; margin-top: 2px; }
.fa-radio {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px; cursor: pointer; line-height: 1.35;
    border: 1px solid var(--border-color, #d8e0e6); border-radius: 6px;
    font-size: var(--fs-sm);
    background: var(--input-bg, #fff);
    transition: border-color .12s ease, background .12s ease;
}
.fa-radio:hover { background: var(--hover-bg, rgba(0,0,0,.03)); }
.fa-radio input { margin: 0; accent-color: var(--accent-color, #2e5d78); cursor: pointer; }
/* The selected row is outlined, not just dotted — the radio itself is small and
   the tint alone disappears in forced-colours mode. */
.fa-radio:has(input:checked) {
    border-color: var(--accent-color, #2e5d78);
    background: var(--hover-bg, rgba(46, 93, 120, .06));
}
.fa-radio:focus-within { outline: 2px solid rgba(46, 93, 120, .22); outline-offset: 1px; }

/* The reasoning box is the whole point of this modal — a critique is a paragraph
   or three, not a line. Give it room to hold one without scrolling. */
.fa-ta--lg { min-height: 11em; }
.fa-check {
    display: flex; align-items: flex-start; gap: 8px; margin: 10px 0;
    font-size: var(--fs-sm); cursor: pointer; line-height: 1.4;
}
.fa-check input { margin: 2px 0 0; accent-color: var(--accent-color, #2e5d78); cursor: pointer; }
.fa-dim { color: var(--text-muted, #9aa8b1); font-weight: 400; }

.fa-tabs { display: flex; gap: 4px; margin-bottom: 4px;
           border-bottom: 1px solid var(--border-color, #e6ecf0); }
.fa-tab {
    padding: 8px 12px; border: 0; background: none; cursor: pointer;
    font-size: var(--fs-sm); font-weight: 600; font-family: inherit;
    color: var(--text-muted, #9aa8b1);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.fa-tab:hover { color: var(--text-color, #12303f); }
.fa-tab.is-on {
    color: var(--accent-color, #2e5d78);
    border-bottom-color: var(--accent-color, #2e5d78);
}

.fa-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
    z-index: 4000; opacity: 0; transition: opacity .25s ease, transform .25s ease;
    background: #12303f; color: #fff;
    padding: 10px 18px; border-radius: 24px;
    font-size: var(--fs-sm); font-weight: 500;
    box-shadow: 0 8px 26px rgba(0,0,0,.28);
    max-width: 88vw;
}
.fa-toast--in  { opacity: 1; transform: translate(-50%, 0); }
.fa-toast--err { background: #a33; }

.ua-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }