/* =============================================================
   Community definition voting — proposals.php

   The page shell (width, hero, sections, cards, bands, steps,
   buttons) comes from the shared .site-* system in style.css, the
   same one about.php / services.php / how-it-works.php use. This
   file styles only the components that are genuinely new — the
   ballot, poll cards, chips, and the nomination panel — and it
   borrows the shared design tokens so they sit inside that shell
   without looking bolted on:

     radius      8px (surfaces) / 6px (controls)
     borders     #e0e3e7            dark  #3a3f48
     body text   #4d5560            dark  #c4c7c5
     headings    #202124            dark  #e8eaed
     accent      #808000 / #707400  dark  #a0a000 / #e0e4a8
     card bg     #ffffff            dark  #1f232b
     band bg     #f6f7ed            dark  #2d3213
   ============================================================= */

/* Layout
   -------
   The hub is a full-width browsing page. A single review runs the site's
   two-column article layout (.definition-layout / .definition-main /
   .definition-sidebar from style.css) — the same one the dictionary entry
   uses — so its reading column stays comfortable and the standard sidebar
   sits beside it. */
.rv-page .definition-main {
    max-width: none;
}

/* .definition-layout sets `align-items: flex-start`, which is what keeps the
   sidebar from stretching to the main column's height. Once the layout turns
   into a column at 1024px that same rule shrink-wraps both children to their
   content width, leaving the main column narrower than the sidebar stacked
   beneath it. Scoped here so the dictionary entry keeps its own behaviour. */
@media (max-width: 1024px) {
    .rv-page .definition-main,
    .rv-page .definition-sidebar {
        align-self: stretch;
        width: 100%;
    }
}

/* The hub's hero right column is a text callout, not artwork, so it top-aligns
   rather than centring the way an image does. */
.rv-page .site-page-hero {
    align-items: start;
}

/* style.css has a generic `header { text-align: center }` that every
   .site-page-hero inherits — right for the hero's heading and lede (it is what
   about.php / services.php look like) but wrong for a checklist whose ✓/✕
   markers hang off the left edge. */
.rv-scope {
    align-self: start;
    text-align: left;
}

.rv-scope h3 {
    margin: 0 0 14px;
}

.rv-scope-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rv-scope-list li {
    position: relative;
    padding-left: 26px;
    color: #4d5560;
    font-size: 0.94rem;
    line-height: 1.6;
}

.rv-scope-list li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.6;
}

.rv-scope-yes::before { content: "✓"; color: #4f7a3f; }
.rv-scope-no::before { content: "✕"; color: #b3261e; }
.rv-scope-list strong { color: #202124; font-weight: 700; }
.rv-scope-list a { color: #707400; font-weight: 700; }

/* The steps section reuses .site-steps but lays it out as a horizontal row.
   The shell's default is a vertical stack (number left, text right), right for
   a long procedure; these four are one short glance-able sequence, so they read
   better side by side with the number above each label.

   Scoped to .rv-how so every other page keeps the stacked version. */
.rv-how .site-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.rv-how .site-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    /* In a row every column needs the rule above it, so undo the shell's
       first-child reset — otherwise the first one loses its border. */
    border-top: 1px solid #e0e3e7;
    padding-top: 18px;
}

.rv-how .site-step h3 { margin: 0 0 6px; }
.rv-how .site-step p { margin: 0; font-size: 0.95rem; }

/* ---------- Sidebar panel (single review only) ---------- */
.rv-side-how p {
    margin: 0;
    color: #4d5560;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ---------- Small shared atoms ---------- */
.rv-btn-sm {
    min-height: 36px;
    padding: 6px 13px;
    font-size: 0.88rem;
}

.rv-link-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: #707400;
    cursor: pointer;
}

.rv-link-btn:hover { text-decoration: underline; }
.rv-link-danger { color: #8c1d18; }

/* Review list header
   ------------------
   review_list.php's one line of chrome: the title and count on the left, the
   call to action on the right.

   The four resets are not decoration. style.css has a generic

       header { text-align: center; max-width: 1135px; margin: auto;
                padding-right: 280px }

   for the site masthead — the padding is the dictionary sidebar's offset — and
   it applies to every <header> on the site. Without cancelling it this block
   was centred, 25px narrower than the section under it, and shoved 280px off
   its own right edge. review_modal.css hit the same rule and answered it by
   not using <header>; here the element really is the page's header, so it
   states its own values instead. Anything else that inherits from that rule is
   its own problem, not one to solve by weakening it. */
.rv-list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 24px;
    flex-wrap: wrap;
    /* against the global `header` */
    max-width: none;
    margin: 0;
    padding: 34px 0 20px;
    text-align: left;
    border-bottom: 1px solid #e0e3e7;
}

.rv-list-head > div:first-child {
    /* Lets the title block shrink and wrap rather than shoving the button off
       the row: `min-width: auto` on a flex item is the default that stops long
       Georgian headings from ever giving way. */
    min-width: 0;
    flex: 1 1 320px;
}

.rv-list-head .site-actions {
    margin: 0;
    flex: 0 0 auto;
}

.rv-list-title {
    margin: 0 0 6px;
    color: #202124;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.15;
}

.rv-list-meta {
    margin: 0;
    color: #707781;
    font-size: 0.9rem;
    line-height: 1.5;
}

.rv-list-meta a { color: #707400; text-decoration: none; }
.rv-list-meta a:hover { text-decoration: underline; }

body.dark-mode .rv-list-head { border-bottom-color: #3a3f48; }
body.dark-mode .rv-list-title { color: #e8eaed; }
body.dark-mode .rv-list-meta { color: #9aa0a6; }
body.dark-mode .rv-list-meta a { color: #e0e4a8; }

/* One column, and the button spans it. A 44px-high control that only occupies
   half a phone's width reads as secondary, which this one is not — it is the
   way in. */
@media (max-width: 600px) {
    .rv-list-head {
        align-items: stretch;
        gap: 14px;
        padding: 22px 0 16px;
    }

    .rv-list-head .site-actions {
        flex: 1 1 100%;
    }

    .rv-list-head .site-actions > * {
        display: flex;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }
}

.rv-dot { color: #b8bcc2; margin: 0 3px; }

.rv-chip {
    display: inline-flex;
    align-items: center;
    background: #f1f3ee;
    color: #4d5560;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Georgian has no letter case, so `text-transform` does nothing here while the
   tracking still pays for it — roughly 10px of dead width on a 17-character
   label, which is what pushed each chip onto its own line at 375px. */
html[lang="ka"] .rv-chip,
html[lang="ka"] .rv-current-context-label,
html[lang="ka"] .rv-badge { letter-spacing: normal; text-transform: none; }

.rv-chip-new { background: #e4efe2; color: #2f5f31; }
.rv-chip-disputed { background: #faeacd; color: #7d4d10; }
.rv-chip-quiet { background: transparent; color: #707781; padding-left: 0; }
.rv-chip-status { background: #eef0e0; color: #5f6b00; }
.rv-status-resolved { background: #e4efe2; color: #2f5f31; }
.rv-status-rejected,
.rv-status-locked { background: #f1f3f4; color: #707781; }

/* =============================================================
   HUB — tabs, filters, cards
   ============================================================= */
.rv-browse {
    gap: 0;
}

.rv-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #e0e3e7;
    overflow-x: auto;
    scrollbar-width: none;
}

.rv-tabs::-webkit-scrollbar { display: none; }

.rv-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #4d5560;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.rv-tab:hover { color: #202124; }
.rv-tab.active { color: #707400; border-bottom-color: #808000; }

.rv-tab-count {
    background: #f1f3ee;
    color: #4d5560;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 20px;
}

.rv-tab.active .rv-tab-count { background: #eef0e0; color: #5f6b00; }

.rv-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin: 20px 0 22px;
}

.rv-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 260px;
}

.rv-search svg {
    position: absolute;
    left: 12px;
    color: #8a9099;
    pointer-events: none;
}

.rv-search input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px 9px 36px;
    border: 1px solid #dadce0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    color: #202124;
    background: #ffffff;
}

.rv-filters select {
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #dadce0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.92rem;
    color: #4d5560;
    background: #ffffff;
    max-width: 200px;
}

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

.rv-clear { font-size: 0.9rem; color: #707400; font-weight: 700; text-decoration: none; }
.rv-clear:hover { text-decoration: underline; }

.rv-grid {
    display: grid;
    /* Container-driven rather than viewport-driven: the sidebar makes the main
       column narrower than the page, so a fixed column count would squeeze the
       cards. auto-fill lets the grid pick what actually fits. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

/* Poll cards are .site-card with the same border, radius, padding and
   shadow as every other card on the site — only the inner layout differs. */
.rv-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #e0e3e7;
    border-radius: 8px;
    background: #ffffff;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.06);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rv-card:hover {
    border-color: #c8cfae;
    box-shadow: 0 2px 10px rgba(60, 64, 67, 0.1);
}

.rv-card-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.rv-card-word {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #202124;
    line-height: 1.3;
    word-break: break-word;
}

.rv-card-reason {
    margin: 0;
    font-size: 0.92rem;
    color: #4d5560;
    line-height: 1.6;
}

.rv-card-leader {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    background: #f6f7ed;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: auto;
}

.rv-card-leader-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #707400;
}

.rv-card-leader-text { font-size: 0.92rem; color: #202124; word-break: break-word; }

.rv-card-leader-empty {
    font-size: 0.88rem;
    color: #707781;
    font-style: italic;
    background: transparent;
    padding: 0;
}

.rv-spec-dot { color: #a9761a; font-size: 0.82rem; }

.rv-card-foot {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: #707781;
}

.rv-card-deadline { color: #7d4d10; font-weight: 700; }

.rv-empty {
    text-align: center;
    padding: 52px 24px;
    color: #4d5560;
    background: #ffffff;
    border: 1px dashed #dadce0;
    border-radius: 8px;
    display: grid;
    justify-items: center;
    gap: 14px;
}

.rv-empty p { margin: 0; }

.rv-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
    font-size: 0.92rem;
}

.rv-pagination a { color: #707400; font-weight: 700; text-decoration: none; }
.rv-pagination a:hover { text-decoration: underline; }
.rv-page-of { color: #707781; }

.rv-empty-state {
    text-align: center;
    padding: 84px 20px;
    display: grid;
    justify-items: center;
    gap: 14px;
}

.rv-empty-state h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); color: #202124; }
.rv-empty-state p { margin: 0; color: #4d5560; max-width: 46ch; line-height: 1.7; }

/* =============================================================
   ONE REVIEW

   Layout: a full-width record header, then a two-column body
   (ballot + discussion beside the standard sidebar). The header
   deliberately sits OUTSIDE .definition-layout — with it inside,
   the sticky sidebar started level with the headword, which read
   as a floating panel rather than a companion to the content.
   ============================================================= */
/* Back link and chips share the header's top row. */
.rv-head-top {
    display: flex;
    align-items: center;
    gap: 9px 20px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.rv-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: 0.88rem;
    font-weight: 700;
    color: #4d5560;
    text-decoration: none;
    white-space: nowrap;
}

.rv-back:hover { color: #707400; }

/* Separated by a wider gap rather than a rule: a border-left would survive
   when the chips wrap onto their own line, leaving a stray vertical stroke.
   The chips are pills against plain link text, so the grouping still reads. */
.rv-head-top .rv-chips {
    margin-bottom: 0;
}

/* ---------- Record header ---------- */
.rv-head {
    /* The site's generic `header { text-align: center; max-width: 1135px }`
       would centre a record header and cap its width; both are wrong here. */
    text-align: left;
    max-width: none;
    margin: 0;
    padding: 20px 0 18px;
    border-bottom: 1px solid #e0e3e7;
}

.rv-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.rv-headword {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.15;
    color: #202124;
    word-break: break-word;
}

.rv-headword-link { color: #8a9099; display: inline-flex; }
.rv-headword-link:hover { color: #707400; }

.rv-reason {
    margin: 10px 0 0;
    max-width: 74ch;
    font-size: 0.98rem;
    line-height: 1.65;
    color: #4d5560;
}

/* Inline expander for a long reason. The three dots are part of the button,
   so the ellipsis itself is the click target the reader reaches for. */
.rv-reason-toggle {
    display: inline;
    margin-left: 3px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #707400;
    font-weight: 700;
    cursor: pointer;
}

.rv-reason-toggle:hover { text-decoration: underline; }
.rv-reason-toggle:focus-visible { outline: 2px solid #808000; outline-offset: 2px; }

/* One meta line instead of a separate stats panel. */
.rv-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.84rem;
    color: #707781;
}

.rv-meta li { display: flex; align-items: center; gap: 4px; }

.rv-meta li + li::before {
    content: "·";
    margin-right: 8px;
    color: #b8bcc2;
}

.rv-meta strong { color: #202124; font-weight: 800; }
.rv-meta-deadline { color: #7d4d10; font-weight: 700; }
.rv-meta-deadline strong { color: inherit; }

.rv-notice-warn { margin-top: 16px; }
.rv-notice-warn strong { display: block; margin-bottom: 3px; }

/* ---------- Body ---------- */
.rv-body {
    padding-top: 22px;
}

.rv-body .definition-main {
    display: grid;
    gap: 26px;
    align-content: start;
}

/* ---------- Current wording (disputed reviews) ---------- */
/* No top rule: the ballot panel's own bottom edge sits 26px above this, and a
   second horizontal line that close read as noise rather than as structure. */
.rv-current {
    display: grid;
    gap: 6px;
}

.rv-current-title {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #707781;
}

/* Neutral, not olive. This block used to be an olive-tinted card, which now
   rhymes with the ballot panel above it and splits the reader's attention
   between the two. Grey keeps it readable as reference material without
   competing for the eye. */
.rv-current-text {
    margin: 0;
    border-left: 3px solid #dadce0;
    background: #f1f3f4;
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    font-size: 0.97rem;
    color: #202124;
    line-height: 1.55;
}

/* ---------- Ballot ----------
   The ballot is the point of the page, so it is the only block in the main
   column that is a panel: a tinted surface with the brand olive along its top
   edge. The tint (not white) is deliberate — the option rows below are white,
   so they read as raised cards inside it, and the percentage fill still has a
   white backdrop to paint against. A white panel would have flattened both. */
.rv-ballot-section {
    display: grid;
    gap: 12px;
    background: #f4f5ec;
    border: 1px solid #e2e5d5;
    border-top: 3px solid #808000;
    border-radius: 12px;
    padding: 20px 20px 22px;
    box-shadow: 0 2px 10px rgba(32, 33, 36, 0.07);
}

.rv-ballot-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid #e4e7da;
}

.rv-ballot-head h2 {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 800;
    color: #202124;
    letter-spacing: -0.01em;
}

.rv-section-hint { margin: 0; font-size: 0.84rem; color: #707781; }

.rv-feedback {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
}

.rv-feedback.success { background: #e4efe2; color: #1e5c30; }
.rv-feedback.info { background: #fbf3da; color: #7a5c12; }
.rv-feedback.error { background: #fbe6e4; color: #8c1d18; }

.rv-ballot { display: grid; gap: 10px; }

.rv-loading, .rv-empty-line { margin: 0; padding: 14px 0; color: #707781; font-size: 0.93rem; }

.rv-ballot-empty {
    text-align: center;
    padding: 34px 22px;
    background: #ffffff;
    border: 1px dashed #dadce0;
    border-radius: 8px;
    color: #4d5560;
}

.rv-ballot-empty p { margin: 0; }
.rv-ballot-empty-sub { font-size: 0.87rem; margin-top: 5px !important; }

/* ---------- Ballot options ----------
   Each option is one numbered row. Its share of the weighted vote is painted
   as a fill behind the text, so scanning the ballot reads as a bar chart, and
   an explicit Vote button on the right carries the action. */
.rv-opt {
    border: 1px solid #e0e3e7;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(32, 33, 36, 0.05);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rv-opt:hover { border-color: #cfd4d9; box-shadow: 0 2px 8px rgba(32, 33, 36, 0.09); }
/* Just recolour the border. An outer `box-shadow: 0 0 0 1px` ring used to sit
   on top of it, but the ring and the border are drawn at different corner radii,
   so they read as two separate lines rather than one thicker stroke. The voted
   state is already carried by this border, the tinted fill, the filled number
   badge and the ✓ button. */
.rv-opt.is-voted { border-color: #808000; }
.rv-opt.is-adopted { border-color: #7aa87f; }
.rv-opt.is-pending { border-style: dashed; }

.rv-opt-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
}

.rv-opt-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #eef0e0;
    transition: width 0.35s ease;
    pointer-events: none;
}

.is-voted .rv-opt-fill { background: #e2e6c4; }
.is-adopted .rv-opt-fill { background: #e0efe2; }

.rv-opt-num,
.rv-opt-body,
.rv-opt-side { position: relative; }

.rv-opt-num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #d5dab8;
    color: #5f6b00;
    font-size: 0.72rem;
    font-weight: 800;
}

.is-voted .rv-opt-num { background: #808000; border-color: #808000; color: #ffffff; }

.rv-opt-body {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 3px;
}

/* Grid items default to `min-width: auto`, so a long unbroken run of Georgian
   would set the column's min-content width and push the whole ballot past the
   viewport on a narrow screen. */
.rv-opt-body > * { min-width: 0; }

.rv-opt-text {
    font-size: 1rem;
    line-height: 1.45;
    color: #202124;
    /* `anywhere` (not `break-word`) so the break also lowers min-content width. */
    overflow-wrap: anywhere;
}

.rv-opt-sub {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: #707781;
}

/* Only the dark-mode overrides for these existed; in light mode the badges fell
   back to unstyled text, which is why an incumbent marker took a whole line of
   the sub-row instead of sitting in it as a pill. */
.rv-badge {
    display: inline-flex;
    align-items: center;
    background: #f1f3f4;
    color: #4d5560;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    padding: 1px 8px;
    border-radius: 20px;
    /* Never wrap to a second line, but degrade to an ellipsis rather than
       being clipped by the row's `overflow: hidden` on a 320px screen.
       `min-width: 0` is what lets a flex item shrink past its min-content. */
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-badge-adopted { background: #e4efe2; color: #2f5f31; }
.rv-badge-incumbent { background: #eceef0; color: #4d5560; }
.rv-badge-mine { background: #eef0e0; color: #5f6b00; }
.rv-badge-spec,
.rv-badge-pending { background: #fbf3da; color: #7a5c12; }

.rv-opt-author { font-weight: 700; color: #4d5560; }

.rv-opt-source { color: #707400; font-weight: 700; text-decoration: none; }
.rv-opt-source:hover { text-decoration: underline; }

.rv-why {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: #707400;
    cursor: pointer;
}

.rv-why::after { content: " ▾"; }
.rv-why.open::after { content: " ▴"; }
.rv-why:hover { text-decoration: underline; }

.rv-opt-side {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rv-opt-pct {
    min-width: 38px;
    text-align: right;
    font-size: 0.92rem;
    font-weight: 800;
    color: #5f6b00;
}

/* The vote control. */
.rv-vote {
    min-width: 78px;
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid #808000;
    border-radius: 6px;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: #707400;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.rv-vote:hover:not(:disabled) { background: #808000; color: #ffffff; }

.rv-vote.is-voted {
    background: #808000;
    border-color: #808000;
    color: #ffffff;
}

.rv-vote.is-voted:hover { background: #6d6d00; }

.rv-vote:disabled {
    border-color: #dadce0;
    color: #9aa0a6;
    background: #ffffff;
    cursor: default;
}

.rv-opt-rationale {
    margin: 0;
    padding: 0 14px 12px 48px;
    font-size: 0.87rem;
    line-height: 1.6;
    color: #4d5560;
}

.rv-opt-rationale[hidden] { display: none; }
.rv-opt .rv-inline-edit { padding: 13px 14px; }

/* ---------- Discussion ---------- */
.rv-discussion .comments-section {
    margin: 0;
    padding-top: 0;
    border-top: 0;
}

/* ---------- Propose ---------- */
.rv-propose-box {
    border: 1px solid #e0e3e7;
    border-radius: 8px;
    background: #ffffff;
    padding: 4px 20px;
}

.rv-propose-box summary {
    cursor: pointer;
    padding: 14px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #707400;
    list-style: none;
}

.rv-propose-box summary::-webkit-details-marker { display: none; }
.rv-propose-box summary::before { content: "+ "; font-weight: 800; }
.rv-propose-box[open] summary::before { content: "− "; }
.rv-propose-box[open] summary { border-bottom: 1px solid #eceef0; margin-bottom: 14px; }

.rv-propose-note { font-size: 0.9rem; color: #707781; font-style: italic; margin: 0; }

/* What a proposed wording would replace. This is the one thing a contributor
   has to know before writing in the box below it, so it sits inside the form
   rather than in the prose above the ballot. */
.rv-scope-note {
    margin: 0 0 14px;
    padding: 9px 12px;
    border-left: 3px solid #b3b842;
    border-radius: 0 6px 6px 0;
    background: #fafbef;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #4a4d3f;
}

.rv-scope-note strong { font-weight: 600; }

/* The whole-entry case is the destructive one: a winning wording takes the
   place of every equivalent in the entry, so it is coloured as a caution. */
.rv-scope-note.rv-scope-warn {
    border-left-color: #d68f2b;
    background: #fdf6ec;
    color: #6b4c1c;
}

/* The equivalents this review is NOT deciding. */
.rv-current-context {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #5f6368;
}

.rv-current-context-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #80868b;
}

.rv-signin-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #dfe3d0;
    border-radius: 8px;
    padding: 16px 20px;
}

.rv-signin-prompt p { margin: 0; font-size: 0.95rem; color: #4d5560; }

/* =============================================================
   RESPONSIVE

   The shared shell already collapses at 600px (.site-page,
   .site-page-hero, .site-grid, .site-page-body in style.css), and
   everything built on those classes inherits it. The two extra
   breakpoints below exist only for components this page adds,
   where the shell's rule doesn't fit the content:
   ============================================================= */

/* Four columns of Georgian body copy get too narrow to read below this. */
@media (max-width: 900px) {
    .rv-how .site-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Below this the four tabs stop fitting on one line, and .rv-tabs is a
       horizontal scroller with its scrollbar hidden — so the ones that do
       not fit are simply not there, with nothing to say the row moves.
       Wrapping shows all four. Under 600px they become a 2x2 grid instead,
       which is tidier once each tab needs two lines anyway. */
    .rv-tabs { flex-wrap: wrap; overflow-x: visible; }
}

@media (max-width: 760px) {
    /* The hub hero's right column is a text callout, not the artwork the
       shell assumes, so it has to stack before the shell's 600px point. */
    .rv-page .site-page-hero {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .rv-filters select { max-width: none; flex: 1 1 145px; }
}

/* On a narrow screen the vote button (a whole Georgian phrase) would squeeze
   the wording it belongs to, so the tally and the control drop to their own
   line, indented to sit under the text rather than under the number. */
@media (max-width: 640px) {
    /* The tally is already on the row as a percentage, one flex item to the
       right. Printing it a second time as "19 votes" was the widest thing on
       the sub-line and pushed it to two rows. */
    .rv-opt-votes { display: none; }

    .rv-opt-sub { gap: 6px; font-size: 0.75rem; }
    .rv-badge { font-size: 0.68rem; padding: 1px 7px; }

    .rv-opt-row { flex-wrap: wrap; row-gap: 9px; }
    .rv-opt-body { flex: 1 1 calc(100% - 34px); }
    .rv-opt-side {
        flex: 1 1 100%;
        justify-content: space-between;
        padding-left: 34px;
    }
    .rv-opt-pct { min-width: 0; text-align: left; }
}

/* Below the shell's own breakpoint, match its tighter rhythm. */
@media (max-width: 600px) {
    /* ---- Header chips ----
       At 375px the four chips are 157 / 134 / 228 / 165px wide, so every one
       took its own line: 82px of pills above a headword that had not appeared
       yet. Three changes, in order of how much text they remove: */

    /* (a) The status chip, when open, says nothing the page is not already
           saying — the meta line carries the deadline and every option has a
           live Vote button. Any other status is genuinely news, so it stays. */
    .rv-chip-status.rv-status-open { display: none; }

    /* (b) Part of speech and subject field are reference metadata, not
           decision-relevant, so they yield first when space runs out. */
    .rv-chip-quiet {
        max-width: 45vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

    /* (c) Tighter pills across the board. */
    .rv-chip { font-size: 0.68rem; padding: 2px 8px; }
    .rv-chips { gap: 5px; }

    /* One column: revert to the shell's compact number-left row, which fits a
       narrow screen better than a stack of circles above text. */
    .rv-how .site-steps { grid-template-columns: 1fr; gap: 14px; }
    .rv-how .site-step {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
    }
    .rv-how .site-step:first-child { border-top: 0; padding-top: 0; }

    /* The four tabs are 786px of Georgian on a 360px screen. .rv-tabs is an
       overflow-x:auto strip with the scrollbar hidden, which on a desktop is
       tidy and on a phone means two of the four tabs — Recently adopted and
       Archive — simply are not there: no bar, no cut-off glyph, nothing to
       suggest the row moves. A 2x2 grid shows all four at once, and nothing
       here needs to stay on one line. */
    .rv-tabs {
        display: grid;
        /* minmax(0, …): a grid item's default minimum is its min-content
           width, and a tab's label plus its count badge is wider than half a
           320px screen, so plain 1fr would push the row back out past the
           page and reintroduce the sideways scroll this replaced. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0;
        overflow-x: visible;
    }

    .rv-tab {
        padding: 11px 13px;
        font-size: 0.88rem;
        /* Centred in its cell, and wrapping rather than clipping when a
           translation is longer than half the screen. */
        justify-content: center;
        text-align: center;
        white-space: normal;
    }
    .rv-filters { margin: 16px 0 18px; }
    .rv-card { padding: 18px; }
    .rv-ballot-section { padding: 15px 14px 17px; border-radius: 10px; }
    .rv-ballot-head h2 { font-size: 1.18rem; }
    .rv-opt-row { padding: 11px 13px; gap: 10px; }
    .rv-opt-sub { padding: 0 13px 10px; }
    .rv-opt-rationale { padding: 0 13px 11px 47px; }
    .rv-empty-state { padding: 56px 16px; }
    .rv-back { margin-top: 18px; }
}

/* =============================================================
   DARK MODE — uses the shared .site-* dark tokens
   ============================================================= */
body.dark-mode .rv-scope-list li,
body.dark-mode .rv-card-reason,
body.dark-mode .rv-reason,
body.dark-mode .rv-empty-state p,
body.dark-mode .rv-opt-rationale,
body.dark-mode .rv-side-how p,
body.dark-mode .rv-signin-prompt p,
body.dark-mode .rv-opt-author { color: #c4c7c5; }

body.dark-mode .rv-scope-list strong,
body.dark-mode .rv-card-word,
body.dark-mode .rv-headword,
body.dark-mode .rv-empty-state h1,
body.dark-mode .rv-card-leader-text,
body.dark-mode .rv-ballot-head h2,
body.dark-mode .rv-meta strong,
body.dark-mode .rv-opt-text { color: #e8eaed; }

body.dark-mode .rv-section-hint,
body.dark-mode .rv-propose-note,
body.dark-mode .rv-ballot-empty-sub,
body.dark-mode .rv-empty-line { color: #9aa0a6; }

body.dark-mode .rv-scope-list a,
body.dark-mode .rv-clear,
body.dark-mode .rv-link-btn,
body.dark-mode .rv-opt-source,
body.dark-mode .rv-pagination a,
body.dark-mode .rv-card-leader-label,
body.dark-mode .rv-reason-toggle,
body.dark-mode .rv-propose-box summary { color: #e0e4a8; }

body.dark-mode .rv-scope-yes::before { color: #8fce9b; }
body.dark-mode .rv-scope-no::before { color: #f2b8b5; }
body.dark-mode .rv-link-danger { color: #f2b8b5; }

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

body.dark-mode .rv-card:hover { border-color: #5b6340; }
body.dark-mode .rv-opt:hover { border-color: #4a505c; }
body.dark-mode .rv-opt.is-voted { border-color: #a0a000; }
body.dark-mode .rv-opt.is-adopted { border-color: #4f8b5c; }

/* The ballot panel inverts in dark mode: it is a well cut *below* the page
   surface (#222831) so the option rows keep their existing #1f232b and still
   sit above it. Repainting the rows instead would have knocked the number
   badge, the fill bar and the voted state out of the palette they were tuned
   against. */
body.dark-mode .rv-ballot-section {
    background: #191d24;
    border-color: #343a44;
    border-top-color: #a0a000;
    box-shadow: none;
}

body.dark-mode .rv-ballot-head { border-bottom-color: #333945; }

body.dark-mode .rv-card-leader {
    background: #2d3213;
    border-color: #4c511d;
}

/* Sits inside the ballot panel, so it takes the same raised surface as the
   option rows rather than the olive it used to share with .rv-card-leader. */
body.dark-mode .rv-signin-prompt {
    background: #1f232b;
    border-color: #4c511d;
}

/* The published wording is the one panel here that pins its own text colour
   (#202124, for the light card). Dark mode repaints the background from under
   it and would leave near-black type on it, so the colour has to be
   overridden with the surface — not just the borders. */
body.dark-mode .rv-scope-note {
    background: #23261c;
    border-left-color: #7d8232;
    color: #d7dac6;
}

body.dark-mode .rv-scope-note.rv-scope-warn {
    background: #2b2318;
    border-left-color: #b47a2a;
    color: #e6cea8;
}

body.dark-mode .rv-current-context { color: #9aa0a6; }
body.dark-mode .rv-current-context-label { color: #80868b; }

body.dark-mode .rv-current-text {
    background: #262b33;
    border-color: #454c58;
    border-left-color: #565d6a;
    color: #e8eaed;
}
body.dark-mode .rv-card-leader-empty { background: transparent; }

body.dark-mode .rv-chip { background: #2b3038; color: #c4c7c5; }
body.dark-mode .rv-chip-new { background: #1f3325; color: #a9dcb5; }
body.dark-mode .rv-chip-disputed { background: #3a3416; color: #e6d38a; }
body.dark-mode .rv-chip-quiet { background: transparent; color: #9aa0a6; }
body.dark-mode .rv-chip-status { background: #2d3213; color: #e0e4a8; }
body.dark-mode .rv-status-resolved { background: #1f3325; color: #a9dcb5; }
body.dark-mode .rv-status-rejected,
body.dark-mode .rv-status-locked { background: #2b3038; color: #9aa0a6; }

body.dark-mode .rv-badge { background: #2b3038; color: #c4c7c5; }
body.dark-mode .rv-badge-adopted { background: #1f3325; color: #a9dcb5; }
body.dark-mode .rv-badge-incumbent { background: #33383f; color: #c4c7c5; }
body.dark-mode .rv-badge-mine { background: #2d3213; color: #e0e4a8; }
body.dark-mode .rv-badge-spec,
body.dark-mode .rv-badge-pending { background: #3a3416; color: #e6d38a; }

body.dark-mode .rv-tabs { border-bottom-color: #3a3f48; }
body.dark-mode .rv-tab { color: #9aa0a6; }
body.dark-mode .rv-tab:hover { color: #e8eaed; }
body.dark-mode .rv-tab.active { color: #e0e4a8; border-bottom-color: #a0a000; }
body.dark-mode .rv-tab-count { background: #2b3038; color: #c4c7c5; }
body.dark-mode .rv-tab.active .rv-tab-count { background: #2d3213; color: #e0e4a8; }

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

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

/* Ballot rows: the fill is the only surface that changes, so the whole row
   stays legible over it in either theme. */
body.dark-mode .rv-opt-fill { background: #343a16; }
body.dark-mode .is-voted .rv-opt-fill { background: #454d1d; }
body.dark-mode .is-adopted .rv-opt-fill { background: #24361f; }
body.dark-mode .rv-opt:hover .rv-opt-fill { background: #3d441a; }

body.dark-mode .rv-opt-num { background: #262b33; border-color: #5c622a; color: #e0e4a8; }
body.dark-mode .is-voted .rv-opt-num { background: #a0a000; border-color: #a0a000; color: #1b1f27; }
body.dark-mode .rv-opt-pct { color: #e0e4a8; }
body.dark-mode .rv-why,
body.dark-mode .rv-opt-source { color: #e0e4a8; }

body.dark-mode .rv-vote {
    background: transparent;
    border-color: #a0a000;
    color: #e0e4a8;
}
body.dark-mode .rv-vote:hover:not(:disabled) { background: #a0a000; color: #1b1f27; }
body.dark-mode .rv-vote.is-voted { background: #a0a000; border-color: #a0a000; color: #1b1f27; }
body.dark-mode .rv-vote.is-voted:hover { background: #8a8a00; }
body.dark-mode .rv-vote:disabled { background: transparent; border-color: #454c58; color: #7d838b; }

body.dark-mode .rv-head { border-bottom-color: #3a3f48; }
body.dark-mode .rv-current { border-top-color: #3a3f48; }

body.dark-mode .rv-section-hint,
body.dark-mode .rv-meta,
body.dark-mode .rv-card-foot,
body.dark-mode .rv-opt-sub,
body.dark-mode .rv-opt-votes,
body.dark-mode .rv-page-of,
body.dark-mode .rv-propose-note,
body.dark-mode .rv-current-title,
body.dark-mode .rv-loading,
body.dark-mode .rv-ballot-empty-sub { color: #9aa0a6; }

body.dark-mode .rv-empty,
body.dark-mode .rv-ballot-empty { background: #1f232b; border-color: #454c58; color: #c4c7c5; }

body.dark-mode .rv-propose-box[open] summary { border-bottom-color: #3a3f48; }

body.dark-mode .rv-feedback.success { background: #1f3325; color: #a9dcb5; }
body.dark-mode .rv-feedback.info { background: #3a3416; color: #e6d38a; }
body.dark-mode .rv-feedback.error { background: #3a1f1e; color: #f2b8b5; }

body.dark-mode .rv-back { color: #9aa0a6; }
body.dark-mode .rv-back:hover { color: #e0e4a8; }
body.dark-mode .rv-avatar { background: #a0a000; color: #1b1f27; }
body.dark-mode .rv-headword-link { color: #9aa0a6; }
body.dark-mode .rv-headword-link:hover { color: #e0e4a8; }
body.dark-mode .rv-card-deadline,
body.dark-mode .rv-meta-deadline,
body.dark-mode .rv-spec-dot { color: #e6d38a; }
body.dark-mode .rv-dot { color: #5f666e; }