/* ==========================================================================
   Vote return guide (/vote_return_guide)
   --------------------------------------------------------------------------
   Loaded after assets/css/info-page.css, which gives the page its layout and
   components: breadcrumb, the .ph header, the .pol-grid of .pol-sec cards,
   the sticky "On this page" list, and .ip-steps, .ip-code, .ip-table,
   .ip-callout, .ip-list, .ip-faq, .ip-cta, .ip-btn and .ip-badge. This file
   only adds what this page has and the other info pages do not:
     .vr-flow      the four-stage picture of a vote coming back to the owner
     .vr-url       the example return address, one value per line
     .vr-note      the small print under the example address
     .vr-langs     the PHP / Node.js / Java samples as tabs with no script
                   (radio buttons; without CSS all three samples show)
     .vr-mine      a logged-in owner's servers, whether each has a return URL,
                   and links to each one's key (its Vote return card) and URL
     .vr-vectors   the signature_v2 test vectors under "Test it"
     .vr-download  the Ragnarok vote panel download
     .vr-sr        text for screen readers only
   The page's <main> is scoped as .vrg, not .vr: Bootstrap's .vr is a 1px
   vertical rule (display:inline-block; width:1px) and shrank the page to it.
   ========================================================================== */

/* ---------- the round trip ---------- */
.pol-sec .vr-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 4px 0 16px;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(0, 255, 255, 0.16);
    counter-reset: vr-flow;
}
.pol-sec .vr-flow__step {
    counter-increment: vr-flow;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 15px 16px 16px;
    border-right: 1px solid var(--pol-line);
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.035) 0%, rgba(0, 255, 255, 0.005) 100%);
}
.pol-sec .vr-flow__step:last-child { border-right: 0; }
/* The owner's own page, where the trip ends */
.pol-sec .vr-flow__step--you {
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.13) 0%, rgba(0, 255, 255, 0.04) 100%);
    box-shadow: inset 0 2px 0 var(--primary-color, #00ffff);
}
/* An arrow sitting on the line between two stages */
.vr-flow__step + .vr-flow__step::before {
    content: "\203A";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: -11px;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
    transform: translateY(-50%);
    border: 1px solid rgba(0, 255, 255, 0.45);
    background: #0b0b11;
    color: var(--primary-color, #00ffff);
    font-size: 1.05rem;
    line-height: 1;
}
.vr-flow__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    background: rgba(0, 255, 255, 0.07);
    color: var(--primary-color, #00ffff);
    font-size: .85rem;
    line-height: 1;
}
.vr-flow__title {
    margin-top: 4px;
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffffff;
}
/* The stage's number, so the order reads the same in one row, two or four */
.vr-flow__title::before { content: counter(vr-flow) "\00a0\00b7\00a0"; color: var(--primary-color, #00ffff); }
.vr-flow__text { font-size: .98rem; line-height: 1.45; color: var(--pol-ink-2); }

/* ---------- the example address: one value per line on screen, one line
   when copied (the spans sit next to each other with no whitespace) ---------- */
.vrg .vr-url code > span { display: block; }
.vrg .vr-url code > span + span { padding-left: 2ch; }
.vrg .vr-url b { font-weight: 600; color: var(--primary-color, #00ffff); }
.vrg .vr-url__base { color: #ffffff; }
.pol-sec .vr-note { margin: -4px 0 14px; font-size: .98rem; line-height: 1.5; color: var(--pol-ink-2); }

/* A link that names a dashboard item, such as <a><strong>Vote return</strong>
   card</a>, reads as one link: the bold words take the link's colour instead
   of the white that .pol-sec strong gives them (info-page.css) */
.vrg .pol-sec a strong { color: inherit; }

/* Text only a screen reader reads, such as "Return URL" before a Set badge */
.vr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- the parameter and file tables ---------- */
.vrg .vr-params td:nth-child(-n+2),
.vrg .vr-files td:first-child { white-space: nowrap; }
.vrg .vr-params td:nth-child(2) { font-family: var(--ip-mono); font-size: .9rem; color: #ffffff; }
.vr-short { cursor: help; }

/* ---------- language tabs (radio buttons, no script) ---------- */
.vr-langs__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.vrg .ip-code .vr-langs__bar { padding-left: 0; }
.vr-langs__tabs { display: flex; align-self: stretch; }
.vr-langs__tab {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0 18px;
    border-right: 1px solid var(--pol-line);
    color: var(--pol-ink-2);
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    user-select: none;
    transition: background .15s, color .15s;
}
.vr-langs__tab:hover { background: rgba(0, 255, 255, 0.06); color: #ffffff; }
#vr-lang-php:checked ~ .vr-langs__bar [for="vr-lang-php"],
#vr-lang-node:checked ~ .vr-langs__bar [for="vr-lang-node"],
#vr-lang-java:checked ~ .vr-langs__bar [for="vr-lang-java"] {
    background: linear-gradient(180deg, rgba(0, 255, 255, .22) 0%, rgba(0, 255, 255, .08) 100%);
    box-shadow: inset 0 -2px 0 var(--primary-color, #00ffff);
    color: #ffffff;
}
#vr-lang-php:focus-visible ~ .vr-langs__bar [for="vr-lang-php"],
#vr-lang-node:focus-visible ~ .vr-langs__bar [for="vr-lang-node"],
#vr-lang-java:focus-visible ~ .vr-langs__bar [for="vr-lang-java"] {
    outline: 2px solid var(--primary-color, #00ffff);
    outline-offset: -2px;
}
/* Only the chosen sample and its Copy button show */
.vrg .vr-langs__copy,
.vrg .vr-langs__panel { display: none; }
#vr-lang-php:checked ~ .vr-langs__bar .vr-langs__copy--php,
#vr-lang-node:checked ~ .vr-langs__bar .vr-langs__copy--node,
#vr-lang-java:checked ~ .vr-langs__bar .vr-langs__copy--java { display: inline-flex; }
#vr-lang-php:checked ~ .vr-langs__panel--php,
#vr-lang-node:checked ~ .vr-langs__panel--node,
#vr-lang-java:checked ~ .vr-langs__panel--java { display: block; }

/* ---------- step 3: the owner's servers ---------- */
.vr-mine {
    margin: 4px 0 0;
    border: 1px solid rgba(0, 255, 255, 0.16);
    background: rgba(10, 10, 15, 0.6);
}
.pol-sec .vr-mine__h {
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid var(--pol-line);
    background: rgba(0, 255, 255, 0.04);
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .6rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pol-ink-3);
}
.pol-sec .vr-mine__list { margin: 0; padding: 0; list-style: none; }
.pol-sec .vr-mine__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 8px 8px 12px;
    border-bottom: 1px solid var(--pol-line);
    font-size: 1rem;
    line-height: 1.3;
}
.pol-sec .vr-mine__row:last-child { border-bottom: 0; }
.vr-mine__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.vr-mine__host {
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--ip-mono);
    font-size: .76rem;
    font-weight: 400;
    color: var(--pol-ink-3);
}
.pol-sec .vr-mine__none { margin: 0; padding: 10px 12px; font-size: 1rem; }
/* The server's key (its Vote return card) and its return URL */
.vr-mine__actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* The test vectors sit inside a numbered list item, under its text. Each
   value has a line to itself, so on a narrow screen it wraps in place. */
.vrg .vr-vectors { margin: 10px 0 4px; }
.vrg .vr-vectors pre { white-space: pre-wrap; word-break: break-all; }

/* ---------- the Ragnarok panel ---------- */
.vr-download {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(0, 255, 255, 0.22);
    background: rgba(0, 255, 255, 0.04);
}
.vr-download__meta { font-size: .98rem; line-height: 1.45; color: var(--pol-ink-2); }
/* The config.php settings inside the install step */
.pol-sec .vr-config { margin: 2px 0 0; padding-left: 1.15rem; list-style-type: disc; }
.pol-sec .vr-config li { margin: 0 0 5px; font-size: 1.02rem; line-height: 1.55; }
/* A code block inside a step sits under its text */
.vrg .ip-step .ip-code { margin: 10px 0 0; }
.pol-sec code.vr-hash { word-break: break-all; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .pol-sec .vr-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pol-sec .vr-flow__step:nth-child(2) { border-right: 0; }
    .pol-sec .vr-flow__step:nth-child(-n+2) { border-bottom: 1px solid var(--pol-line); }
    /* Two by two, the way from the second stage to the third runs diagonally:
       the numbers carry the order there, so the third stage has no arrow */
    .vr-flow__step:nth-child(3)::before { display: none; }
}
@media (max-width: 720px) {
    /* The two 64-character signatures wrap inside their own line instead of
       running off the side; copying still gives the address in one line */
    .vrg .vr-url code > span { white-space: pre-wrap; word-break: break-all; }
}
@media (max-width: 560px) {
    .pol-sec .vr-flow { grid-template-columns: minmax(0, 1fr); }
    .pol-sec .vr-flow__step { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; border-right: 0; border-bottom: 1px solid var(--pol-line); padding: 13px 14px 14px; }
    .pol-sec .vr-flow__step:last-child { border-bottom: 0; }
    .vr-flow__title { margin-top: 0; }
    .vr-flow__text { flex-basis: 100%; }
    .vr-flow__step + .vr-flow__step::before { display: flex; top: -11px; left: 50%; transform: translateX(-50%) rotate(90deg); }
    .vr-langs__tab { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
    .vrg .vr-params td:nth-child(-n+2),
    .vrg .vr-files td:first-child { white-space: normal; }
    /* name and badge on one line, the two buttons on the next */
    .pol-sec .vr-mine__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding-right: 12px; }
    .pol-sec .vr-mine__actions { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .vr-langs__tab { transition: none; }
}