/* MENU VOTE v1 — the vote card (FINAL, Thierry 11/11 22:00 — design frozen): a centred Warm Cream card over the menu, the bold title,
   4 centred rows (no dot) — a tap on a row IS the vote; only × (or a tap outside) closes it. ONE swappable pair
   with vote.js: everything it shows is built by vote.js and styled here (every class starts with wmv-); the menu page never depends on it.
   Brand only: Red #E80123 · Blue #003C69 · Dark Grey #50524D · Ink #2B2B2B · White · Warm Cream #FEF8E0 (+ #DADAD6 / #AEAEAA tints). */
:root { --wmv-bg: #FEF8E0; }   /* THE card background (Thierry 22:00: Warm Cream) — one variable; ?bg=white / ?bg=cream previews */
body.wmv-lock { overflow: hidden; }
.wmv-dim { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;   /* the card centred */
  padding: 20px; background: rgba(43, 43, 43, .55); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wmv-dim[hidden] { display: none; }
.wmv-card { position: relative; width: 100%; max-width: 420px; margin: auto; background: var(--wmv-bg); border-radius: 16px;
  padding: 22px 20px 16px; box-shadow: 0 12px 40px rgba(43, 43, 43, .25); color: #50524D; font: 14px/1.4 Arial, Helvetica, sans-serif; }
.wmv-card [hidden] { display: none !important; }
.wmv-card:focus { outline: none; }
.wmv-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; padding: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }   /* a 22 px grey × in a 40 px tap area */
.wmv-card h2 { margin: 0; font: 900 24px/1.08 'Gazpacho', 'Arial Black', Arial, sans-serif; color: #E80123; text-transform: uppercase; }
.wmv-card h2 { text-align: center; }
.wmv-ask h2 { margin: 0 0 8px; }
.wmv-ask .wmv-line { margin: 0 auto 14px; max-width: 300px; text-align: center; font-size: 14px; color: #50524D; }
.wmv-ends { margin: 10px 0 0; text-align: center; color: #E80123; font: 12px/1.4 Arial, Helvetica, sans-serif; }   /* the end date (red), under the sauces' hairline + at the bottom of the after-vote card */
.wmv-opts { display: block; }
.wmv-opts { border-bottom: 1px solid #DADAD6; }
.wmv-opt { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; padding: 0 12px;   /* names CENTRED, no dot (Thierry 11/11) */
  border: 0; border-top: 1px solid #DADAD6; background: none; color: #2B2B2B; font: bold 17px Arial, Helvetica, sans-serif; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wmv-opt:disabled { cursor: default; }
.wmv-opt:active:not(:disabled) { background: #F5F4F1; }   /* a plain press tint; the tap IS the vote */
.wmv-err { margin: 10px 0 2px; color: #E80123; font-size: 13px; text-align: center; }
.wmv-done { text-align: center; padding: 6px 0 8px; }
.wmv-done h2 { font-size: 26px; margin: 0 0 6px; }
.wmv-done .wmv-line { margin: 0; font-size: 14px; color: #50524D; }
.wmv-x:focus-visible, .wmv-opt:focus-visible { outline: 3px solid #003C69; outline-offset: 2px; }
/* the after-vote card: no button (× only); the end line under a hairline */
.wmv-done .wmv-ends { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #DADAD6; }
.wmv-done .wmv-res + .wmv-ends { margin-top: 0; }
/* THE result component — option A, bars (Thierry 11/11). No red here. The bar colours = these two variables
   (all bars blue = set --wmv-bar to #003C69). */
:root { --wmv-bar: #AEAEAA; --wmv-bar-mine: #003C69; }
.wmv-res { margin: 14px 0 0; text-align: left; }
.wmv-rrow { padding: 11px 12px; border-top: 1px solid #DADAD6; }
.wmv-rtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: bold 16px/1.25 Arial, Helvetica, sans-serif; color: #2B2B2B; }
.wmv-rl small { margin-left: 4px; font: bold 11px Arial, Helvetica, sans-serif; color: #003C69; }
.wmv-rp { font-variant-numeric: tabular-nums; }
.wmv-bar { height: 6px; margin-top: 7px; border-radius: 3px; background: #DADAD6; overflow: hidden; }
.wmv-bar span { display: block; height: 100%; border-radius: 3px; background: var(--wmv-bar); }
.wmv-rrow.me .wmv-rtop { color: #003C69; }
.wmv-rrow.me .wmv-bar span { background: var(--wmv-bar-mine); }
