/* The vote widget (vote.js). Colours are --qv-* with defaults for the light lab pages; the overview maps them to its
   own tokens, so the widget follows its light and dark theme. */
.qv { --qv-ink: #10302f; --qv-muted: #4a6863; --qv-card: #f8fbf6; --qv-line: rgba(16, 48, 47, .28); --qv-ok: #2e8a5e; --qv-err: #c84a3a; --qv-on: #fff; display: flex; flex-direction: column; gap: 10px; min-width: 0; font-family: inherit; color: var(--qv-ink); }
.qv-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.qv-btns { display: flex; gap: 12px; flex: 1 1 300px; }
.qv-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 68px; padding: 0 18px; border: 2px solid var(--qv-line); border-radius: 14px; background: var(--qv-card); color: var(--qv-ink); font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .09s; }
.qv-btn svg { flex: none; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qv-btn b { min-width: 1.4em; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: left; }
.qv-up:hover:not(:disabled) { border-color: var(--qv-ok); }
.qv-down:hover:not(:disabled) { border-color: var(--qv-err); }
.qv-btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.qv-up[aria-pressed="true"] { background: var(--qv-ok); border-color: var(--qv-ok); color: var(--qv-on); }
.qv-down[aria-pressed="true"] { background: var(--qv-err); border-color: var(--qv-err); color: var(--qv-on); }
.qv-form { display: flex; gap: 8px; flex: 2 1 300px; min-width: 0; }
.qv-form input { flex: 1; min-width: 0; min-height: 68px; padding: 0 16px; border: 2px solid var(--qv-line); border-radius: 14px; background: var(--qv-card); color: var(--qv-ink); font-family: inherit; font-size: 17px; font-weight: 500; line-height: 1.3; }
.qv-form input::placeholder { color: var(--qv-muted); opacity: 1; }
.qv-form button { flex: none; min-height: 68px; padding: 0 20px; border: 2px solid var(--qv-ink); border-radius: 14px; background: var(--qv-ink); color: var(--qv-card); font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer; }
.qv-form button:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.qv :is(button, input):focus-visible { outline: 2px solid var(--qv-ok); outline-offset: 2px; }
.qv :is(button, input):disabled { opacity: .55; cursor: default; }
.qv-note { margin: 0; font-size: 14px; color: var(--qv-err); }
.qv-note:empty { display: none; }
.qv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.qv-list:empty { display: none; }
.qv-list li { padding: 10px 14px; border-radius: 10px; background: var(--qv-card); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.qv-list time { display: block; margin-top: 2px; font-size: 12px; color: var(--qv-muted); }
/* on a lab page the widget sits above its section, on the page's content width */
.qv-host { padding-bottom: 20px; }
/* a narrow column: the buttons keep their height and shed padding and label size, so they never push the page wide */
@media (max-width: 520px) { .qv-btns { flex-basis: 100%; gap: 8px; } .qv-btn { min-width: 0; padding: 0 8px; gap: 6px; font-size: 16px; } .qv-btn svg { width: 24px; height: 24px; } .qv-btn b { font-size: 22px; min-width: 1em; } .qv-form { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .qv-btn { transition: none; } }