/* =============================================================
   Community review — the nomination modal and the form atoms
   inside it.

   Shared, and deliberately in its own file: the modal is opened
   from two places — the review hub (proposals.php) and the
   "Ask for community review" button on a dictionary entry
   (index.php) — and the entry page must not have to load the
   whole hub stylesheet for it.

   proposals.css keeps everything that is hub- or ballot-only and
   links this file alongside itself.
   ============================================================= */

/* Honeypot — visually gone, still fillable by a naive bot. */
.rv-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ---------- Forms ---------- */
.rv-form { display: grid; gap: 16px; }
/* `display: grid` outranks the UA rule behind the hidden attribute, so both
   panes need this or they would show at once — the form under the sign-in
   gate, and the gate under the form. */
.rv-form[hidden] { display: none; }
.rv-form-compact { gap: 12px; padding-bottom: 16px; }

.rv-field { display: grid; gap: 6px; }

.rv-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.rv-label { font-size: 0.85rem; font-weight: 700; color: #202124; }
.rv-help { font-size: 0.8rem; color: #707781; line-height: 1.5; }

.rv-field input,
.rv-field select,
.rv-field textarea,
.rv-input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #dadce0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    color: #202124;
    background: #ffffff;
    resize: vertical;
}

.rv-field textarea, .rv-input { min-height: 0; }

.rv-field input:focus,
.rv-field select:focus,
.rv-field textarea:focus,
.rv-input:focus {
    outline: none;
    border-color: #808000;
    box-shadow: 0 0 0 3px rgba(128, 128, 0, 0.14);
}

.rv-inline-edit { display: grid; gap: 9px; }

/* Action rows sit on the same edge everywhere on the page: the dialog's
   .rv-form-actions, the Discussion composer below the ballot, and these two.
   A lone submit is a bare grid child, so without justify-self it stretched
   the full column and read as a banner rather than a control. */
.rv-inline-actions { display: flex; justify-content: flex-end; gap: 9px; }
.rv-form-compact > .site-button { justify-self: end; }

.rv-radio-cards { display: grid; gap: 10px; border: none; margin: 0; padding: 0; }

.rv-radio-cards legend {
    font-size: 0.85rem;
    font-weight: 700;
    color: #202124;
    margin-bottom: 9px;
    padding: 0;
}

.rv-radio-card {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    align-items: start;
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.rv-radio-card:hover { border-color: #808000; background: #fbfbf6; }

.rv-radio-card:has(input:checked) {
    border-color: #808000;
    background: #f6f7ed;
}

.rv-radio-card input { margin-top: 3px; accent-color: #808000; }
.rv-radio-body { display: grid; gap: 4px; }
.rv-radio-body strong { font-size: 0.95rem; color: #202124; }
.rv-radio-body span { font-size: 0.86rem; color: #4d5560; line-height: 1.5; }

.rv-form-intro { margin: 0; font-size: 0.9rem; color: #4d5560; }

.rv-optional {
    border: 1px solid #e0e3e7;
    border-radius: 8px;
    padding: 4px 16px;
}

.rv-optional summary {
    cursor: pointer;
    padding: 12px 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #4d5560;
}

.rv-optional[open] { padding-bottom: 14px; }
.rv-optional[open] summary { margin-bottom: 10px; }
.rv-optional .rv-field { margin-bottom: 10px; }

.rv-form-msg {
    padding: 11px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
}

.rv-form-msg a { color: inherit; font-weight: 700; }

.rv-form-msg.error { background: #fbe6e4; color: #8c1d18; }
.rv-form-msg.success { background: #e4efe2; color: #1e5c30; }

/* The action row is a plain <div>: as a <footer> it inherited the site
   footer's background, border and padding from style.css. Same reason
   .rv-modal-head is not a <header>. */
.rv-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}

.rv-form-actions .rv-form-note {
    margin: 0 auto 0 0;
    font-size: 0.82rem;
    color: #707781;
}

/* ---------- Modal ---------- */
.rv-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rv-modal[hidden] { display: none; }

.rv-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 33, 36, 0.55);
}

.rv-modal-box {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    width: min(620px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: 24px 26px 26px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
}

.rv-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    /* Explicit: style.css has a generic `header { text-align: center;
       max-width: 1135px; padding-right: 280px }` for the site masthead,
       and this row used to be a <header>, which parked the × 280px
       short of the right edge. */
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    text-align: left;
}

.rv-modal-head h2 { margin: 0; font-size: 1.3rem; font-weight: 800; color: #202124; }

.rv-modal-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: #8a9099;
    cursor: pointer;
    padding: 0 4px;
    flex: 0 0 auto;
}

.rv-modal-close:hover { color: #202124; }

body.rv-modal-open { overflow: hidden; }

/* Sign-in gate: shown in place of the form when an anonymous visitor
   opens the modal, so nobody types a nomination they cannot submit. */
.rv-modal-gate {
    display: grid;
    gap: 14px;
    justify-items: start;
}

.rv-modal-gate[hidden] { display: none; }

.rv-modal-gate p { margin: 0; font-size: 0.95rem; color: #4d5560; line-height: 1.6; }

/* Confirmation, shown in place of the form after a successful submission.
   The reader picks the next step from here — back to what they were reading,
   or straight into the review — instead of being redirected. */
.rv-modal-done {
    display: grid;
    gap: 12px;
    padding: 6px 0 2px;
}

.rv-modal-done[hidden] { display: none; }

.rv-done-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
    background: #eef0e0;
    color: #5f6b00;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
}

.rv-modal-done p[data-role="nominate-done-msg"] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4d5560;
}

.rv-modal-done .rv-form-actions { padding-top: 8px; }
.rv-modal-done .site-button[hidden] { display: none; }

@media (max-width: 600px) {
    /* A sheet on the bottom edge rather than a box floating in the middle.
       Centred, the dialog sat with dead margin on all four sides while its
       own content scrolled inside it, and its buttons landed wherever the
       content happened to end — usually out of thumb reach near the top.
       Anchored to the bottom, the form gets the full width back, the
       controls are where the hand already is, and the page stays visible
       above it so it is obvious what the sheet is covering. */
    .rv-modal { padding: 0; align-items: flex-end; }

    .rv-modal-box {
        width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        /* env() keeps the last control clear of the iOS home indicator. */
        padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        /* Scrolling the form must not rubber-band out onto the page behind. */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    @supports (height: 100dvh) {
        .rv-modal-box { max-height: 92dvh; }
    }

    .rv-form-actions { flex-wrap: wrap; }
    /* Full width is the right touch target once the column is this narrow. */
    .rv-form-compact > .site-button { justify-self: stretch; }
}

/* =============================================================
   DARK MODE
   ============================================================= */
body.dark-mode .rv-radio-body span,
body.dark-mode .rv-form-intro,
body.dark-mode .rv-modal-gate p { color: #c4c7c5; }

body.dark-mode .rv-modal-head h2,
body.dark-mode .rv-radio-body strong,
body.dark-mode .rv-label { color: #e8eaed; }

body.dark-mode .rv-help,
body.dark-mode .rv-form-actions .rv-form-note { color: #9aa0a6; }

body.dark-mode .rv-modal-box {
    background: #1f232b;
    border-color: #3a3f48;
    box-shadow: none;
}

body.dark-mode .rv-field input,
body.dark-mode .rv-field select,
body.dark-mode .rv-field textarea,
body.dark-mode .rv-input {
    background: #262b33;
    border-color: #454c58;
    color: #e8eaed;
}

body.dark-mode .rv-field input:focus,
body.dark-mode .rv-field select:focus,
body.dark-mode .rv-field textarea:focus,
body.dark-mode .rv-input:focus {
    border-color: #a0a000;
    box-shadow: 0 0 0 3px rgba(160, 160, 0, 0.2);
}

body.dark-mode .rv-radio-card { border-color: #454c58; }
body.dark-mode .rv-radio-card:hover { border-color: #a0a000; background: #262b33; }
body.dark-mode .rv-radio-card:has(input:checked) { border-color: #a0a000; background: #2d3213; }
body.dark-mode .rv-optional { border-color: #3a3f48; }
body.dark-mode .rv-optional summary { color: #c4c7c5; }

body.dark-mode .rv-form-msg.success { background: #1f3325; color: #a9dcb5; }
body.dark-mode .rv-form-msg.error { background: #3a1f1e; color: #f2b8b5; }

body.dark-mode .rv-modal-close { color: #9aa0a6; }
body.dark-mode .rv-modal-close:hover { color: #e8eaed; }

body.dark-mode .rv-done-mark { background: #2d3213; color: #e0e4a8; }
body.dark-mode .rv-modal-done p[data-role="nominate-done-msg"] { color: #c4c7c5; }