/* Pending complete-chapter proposal review — reuses ChapterReader manuscript chrome. */

#screen-pending-chapter-proposal {
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
    background: #fff;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
}

#screen-pending-chapter-proposal > .chapter-reader {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

#screen-pending-chapter-proposal > .brand-bar {
    width: 100%;
    box-sizing: border-box;
    padding: var(--st-page-pad-y) var(--st-page-pad-x) 8px;
    background: var(--st-bg);
}

/* Note control: square hit target (width was reading narrower than height). */
#screen-pending-chapter-proposal > .brand-bar .brand-note {
    width: var(--st-touch, 44px);
    min-width: var(--st-touch, 44px);
    height: var(--st-touch, 44px);
    min-height: var(--st-touch, 44px);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

.pending-chapter-proposal .chapter-reader-proposal-kicker {
    margin: 8px 0 0;
    font-family: var(--reader-sans, var(--st-font-sans));
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--reader-muted, #8a8a8a);
}

.pending-chapter-proposal .chapter-reader-proposal-note {
    margin: 12px 0 0;
    font-family: var(--reader-sans, var(--st-font-sans));
    font-size: 15px;
    line-height: 1.45;
    color: var(--reader-muted, #5c5c5c);
    font-style: italic;
    text-decoration: none;
}

/*
 * Single underline only. The masthead .chapter-reader-rule (48px centred hairline)
 * sits immediately under this note and visually doubles the accept underline —
 * hide it while the note is showing. Do not add border-bottom / ::after.
 */
.pending-chapter-proposal:has(.chapter-reader-proposal-note:not([hidden]))
    .chapter-reader-rule {
    display: none;
}

.pending-chapter-proposal .chapter-reader-proposal-note .pending-proposal-note-accept {
    font: inherit;
    font-style: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    border-bottom: none;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: auto;
}

.pending-chapter-proposal .chapter-reader-proposal-note .pending-proposal-note-accept::before,
.pending-chapter-proposal .chapter-reader-proposal-note .pending-proposal-note-accept::after {
    content: none;
    display: none;
    border: none;
    text-decoration: none;
}

.pending-chapter-proposal .chapter-reader-proposal-note[hidden] {
    display: none;
}

.pending-chapter-proposal .chapter-reader-title[hidden] {
    display: none;
}

.pending-chapter-proposal .chapter-reader-chrome-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pending-proposal-compare {
    margin-top: 8px;
}

.pending-proposal-compare[hidden] {
    display: none;
}

/* Compare is a sibling of .chapter-reader-page (mirrors Version History).
 * Drop the page’s bottom pad so masthead → columns spacing stays tight. */
.pending-chapter-proposal:has(.pending-proposal-compare:not([hidden]))
    .chapter-reader-page {
    padding-bottom: 0;
}

.pending-proposal-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

.pending-proposal-compare-pane h3 {
    margin: 0 0 10px;
    font-family: var(--reader-sans, var(--st-font-sans));
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--reader-muted, #8a8a8a);
    font-weight: 500;
}

.pending-proposal-compare-body {
    font-family: inherit;
    /* Inherited .screen { text-align: center } — match VH manuscript body. */
    text-align: left;
}

.pending-proposal-compare-pane[hidden] {
    display: none;
}

/*
 * Below desktop: compare is a scroll sibling (like VH) but must keep the
 * same horizontal inset it had when nested inside .chapter-reader-page.
 */
@media (max-width: 1023px) {
    .pending-chapter-proposal .pending-proposal-compare {
        width: min(var(--reader-measure), 100%);
        max-width: var(--reader-measure);
        margin-left: auto;
        margin-right: auto;
        padding-left: 48px;
        padding-right: 48px;
        padding-bottom: 96px;
        box-sizing: border-box;
    }
}

@media (max-width: 720px) {
    .pending-proposal-compare-grid {
        grid-template-columns: 1fr;
    }

    .pending-chapter-proposal .pending-proposal-compare {
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 72px;
    }
}

/*
 * Desktop only — outer left edge matches Version History Side by Side.
 * Compare is a sibling of .chapter-reader-page (same as
 * .chapter-reader-compare-view), so it centers in the scroll viewport
 * rather than inside the narrower reader-measure masthead page.
 * Masthead / title stay on the page measure; toolbar unchanged.
 */
@media (min-width: 1024px) {
    /* Exact outer shell of .chapter-reader-compare-view */
    .pending-chapter-proposal .pending-proposal-compare {
        width: 100%;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        padding: 8px 28px 80px;
        box-sizing: border-box;
    }

    .pending-chapter-proposal .pending-proposal-compare-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        width: 100%;
        margin-top: 0;
        align-items: start;
        box-sizing: border-box;
    }

    .pending-chapter-proposal .pending-proposal-compare-pane {
        min-width: 0;
        width: 100%;
    }

    .pending-chapter-proposal .pending-proposal-compare-body,
    .pending-chapter-proposal .pending-proposal-compare-body .chapter-reader-body,
    .pending-chapter-proposal .pending-proposal-compare-body .chapter-reader-p {
        max-width: none;
        width: 100%;
        box-sizing: border-box;
        /* .screen sets text-align:center; VH resets via .chapter-reader-body.
         * Compare panes inject .chapter-reader-p without that wrapper. */
        text-align: left;
    }
}

.chapter-reader-body[hidden] {
    display: none;
}

.pending-chapter-proposal .chapter-reader-chrome-left {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.pending-chapter-proposal .pending-pass-chapter-nav[hidden] {
    display: none !important;
}

.pending-pass-processing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 28vh;
    padding: 24px;
    box-sizing: border-box;
}

.pending-pass-processing[hidden] {
    display: none;
}

.pending-pass-processing-copy {
    margin: 0;
    font-family: var(--reader-sans, var(--st-font-sans));
    font-size: 16px;
    color: var(--reader-muted, #5c5c5c);
}