/*
 * The moderation surfaces a person meets as a reporter, a subject or a reader of their own case (§11,
 * Phase 5): the report form, the report history, the case page — and the two small report links that
 * live inside other components (a comment's meta row, the profile menu).
 *
 * ### The report form is quiet on purpose
 *
 * Filing a report is often done by somebody who is upset, and an upset person needs a page with one
 * question at a time, not one that performs urgency. The reasons are a column of radios — every
 * option readable at once, the same argument the privacy settings make for their visibility levels —
 * and the free-text field is optional, because a structured reason alone is already a complete report.
 *
 * ### The case page is two pages wearing one markup
 *
 * The subject sees the decision in full and the reporter sees the outcome only; the service omits what
 * each is not owed rather than hiding it. The styling therefore draws no distinction between the two:
 * whatever arrives is arranged the same way, and absence reads as a calm page, not as a locked door.
 */

.report-page,
.case-page,
.report-history {
    max-width: 42rem;
    margin-inline: auto;
}

.report-page__header,
.case-page__header,
.report-history__header {
    margin-bottom: var(--space-5);
}

.report-page__title,
.case-page__title,
.report-history__title {
    margin-top: 0;
}

.report-page__intro,
.report-history__intro {
    color: var(--colour-ink-quiet);
    max-width: var(--measure);
}

/* ---- The report form ----------------------------------------------------------------------------- */

.report-form {
    display: block;
}

/* A fieldset with no frame: the legend carries the question, the browser's default border would draw
   a box around the boxes. */
.report-form__reasons {
    margin: 0;
    padding: 0;
    border: 0;
}

.report-form__category {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.report-form__category + .report-form__category {
    margin-top: var(--space-2);
}

.report-form__category:has(.report-form__category-input:checked) {
    border-color: var(--colour-border-focus);
    background: var(--colour-primary-surface);
}

.report-form__category-input {
    margin-top: var(--space-1);
    accent-color: var(--colour-primary);
}

.report-form__category-text {
    line-height: var(--leading-body);
}

.report-form__details {
    width: 100%;
}

/* The promise line: who can read what was written. It sits between the fields and the buttons because
   it is the sentence a reporter reads right before committing. */
.report-form__promise {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    max-width: var(--measure);
}

.report-form__buttons {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* ---- The report history -------------------------------------------------------------------------- */

.report-history__count {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

.report-history__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.report-history__item {
    padding: var(--space-4) 0;
    border-bottom: var(--border-width) solid var(--colour-border);
}

.report-history__item:first-child {
    border-top: var(--border-width) solid var(--colour-border);
}

.report-history__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.report-history__category {
    font-weight: var(--weight-medium);
}

.report-history__meta {
    margin: var(--space-1) 0 0;
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

.report-history__case-link {
    display: inline-block;
    margin-top: var(--space-2);
}

/* ---- Pagination (the social side) ---------------------------------------------------------------- */

/* The admin panel has its own `admin-pagination`; this is the matching control for member pages. */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.pagination__info {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

/* ---- The case page ------------------------------------------------------------------------------- */

.case-page__meta {
    color: var(--colour-ink-quiet);
}

.case-page__section-title {
    margin-top: 0;
    font-size: var(--text-lg);
}

.case-page__decision,
.case-page__history,
.case-page__appeals,
.case-page__appeal-form,
.case-page__outcome {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--colour-border);
}

.case-page__decision-action {
    font-weight: var(--weight-medium);
}

.case-page__decision-explanation {
    max-width: var(--measure);
}

.case-page__decision-date {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
}

.case-page__history-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.case-page__history-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: var(--border-width) solid var(--colour-border);
}

.case-page__history-date {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.case-page__appeal-intro {
    color: var(--colour-ink-quiet);
    max-width: var(--measure);
}

.case-page__pending {
    color: var(--colour-ink-quiet);
}

/* ---- The two small report links in other components ---------------------------------------------- */

/* A comment's report link sits in its meta row beside delete: the same quiet-button treatment, so the
   row reads as controls of one kind rather than one action shouting louder than the others. */
.comment__report {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    text-decoration: none;
}

.comment__report:hover {
    color: var(--colour-ink);
    text-decoration: underline;
}

/* The profile menu's report entry, styled as the menu's other items read. */
.profile-menu__report {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    color: var(--colour-error-ink);
    text-decoration: none;
}

.profile-menu__report:hover {
    background: var(--colour-error-surface);
}