/* Review Assignments (/reviewassignments): the reviewer's page and their form.
   The form wears the analysts' cf- classes from css/coveragecenter.css; what
   is here is the list page and the few things the form adds. See
   includes/memberreviewing.php. */

/* In by the .page-title's own 5px padding, so the two start together. */
.ra-lede {
    margin: 0 0 18px;
    padding: 0 5px;
    color: var(--text-soft, #6b6b6b);
}

.ra-h {
    margin: 26px 0 12px 7px;
    font-size: 18px;
    font-weight: 700;
    color: var(--logo-green, #2e7d5b);
}

.ra-none,
.ra-empty {
    padding: 18px 20px;
    color: var(--text-muted, #8a8a8a);
}

.ra-small {
    font-size: .92rem;
    color: var(--text-soft, #6b6b6b);
}

/* ---- the pledge ---- */

.ra-pledge {
    padding: 20px 24px;
}

/* The heading inside the card, not between cards: the page heading's 26px
   above it doubled up with the card's own padding. */
.ra-pledge .ra-h {
    margin: 0 0 12px;
}

.ra-pledge p {
    margin: 0 0 12px;
}

.ra-pledge-list {
    margin: 0 0 16px 22px;
    list-style: disc;
}

/* The small print, then room before I Agree. */
.ra-pledge .ra-small {
    margin-bottom: 18px;
}

.ra-pledge-list li {
    margin-bottom: 6px;
}

/* ---- an assignment ---- */

.ra-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 20px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.ra-card-main {
    flex: 1 1 320px;
    min-width: 0;
}

.ra-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.ra-flag {
    margin-left: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--danger, #e85347);
}

.ra-meta,
.ra-due {
    margin-top: 3px;
    font-size: .92rem;
    color: var(--text-soft, #6b6b6b);
}

.ra-due.is-soon {
    color: var(--danger, #e85347);
    font-weight: 600;
}

.ra-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ra-link {
    border: 0;
    background: none;
    padding: 4px;
    color: var(--text-soft, #6b6b6b);
    text-decoration: underline;
    cursor: pointer;
}

.ra-link:hover {
    color: var(--danger, #e85347);
}

/* Said where a button would be: read first, or when Give Back comes back. */
.ra-hint {
    font-size: .88rem;
    font-style: italic;
    color: var(--text-soft, #6b6b6b);
}

.ra-full {
    margin: 4px 0 0 7px;
}

/* ---- getting one ---- */

.ra-get {
    padding: 16px 20px;
}

.ra-get p {
    margin: 0 0 8px;
}

.ra-filter {
    margin: 12px 0;
}

.ra-filter-label {
    font-weight: 600;
    margin-bottom: 6px;
}

/* A grid, not a run of boxes: columns of a fixed width, as many as fit, so
   the 18 genres read as a table rather than a paragraph. The script types
   use it too, so the two lists line up. */
.ra-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px 16px;
}

.ra-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .95rem;
    cursor: pointer;
}

/* How many waiting scripts are behind the box. */
.ra-n {
    color: var(--text-muted, #8a8a8a);
    font-size: .85rem;
}

/* Nothing behind it: switched off. */
.ra-check.is-off {
    opacity: .45;
    cursor: default;
}

.ra-get-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    justify-content: space-between;
    margin-top: 14px;
}

.ra-count {
    color: var(--text-soft, #6b6b6b);
}

/* ---- the form ---- */

.ra-text {
    min-height: 220px;
}

.ra-words {
    margin-right: auto;
    font-weight: 600;
    color: var(--danger, #e85347);
}

.ra-words.is-enough {
    color: var(--logo-green, #2e7d5b);
}

.ra-submitted {
    padding: 18px 20px;
}