/* Ratings (js/ratings.js): two boxes side by side, an emoji over a word. Tinted like the site's
   buttons until one is picked; the picked one fills with its color (green for the first box, red for
   the second) and pops, springy; the other fades back. */
.rt { display: grid; grid-template-rows: auto 1fr; gap: 8px; }
.rt-q { margin: 0; color: var(--surf-ink, #4e4a7a); font-size: 14px; font-weight: 700; }
.rt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rt-opt { --ring: #0a8f6a; display: grid; justify-items: center; gap: 4px; padding: 14px 10px 12px; border: 0; border-radius: 18px;
  background: var(--btn-tint, #d3cdfb); color: var(--btn-ink, #150e5e); font: 700 14px/1.15 var(--font-read); cursor: pointer;
  transition: background .2s, box-shadow .2s, opacity .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.rt-opt.is-down { --ring: #d1365a; }
.rt-opt:hover { background: var(--btn-tint-hover, #c4bcf8); transform: translateY(-1px); }
.rt-opt:focus-visible { outline: 3px solid var(--btn-ring, #4232d4); outline-offset: 2px; }
/* the color emoji fonts first: otherwise a text font that happens to have a glyph (DejaVu Sans has 😇 and 😈)
   draws it as a plain outline */
.rt-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; font-size: 28px; line-height: 1; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.rt-opt[aria-pressed="true"], .rt-opt[aria-pressed="true"]:hover { background: var(--ring); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--ring) 30%, transparent); }
.rt-opt[aria-pressed="true"] .rt-emoji { transform: scale(1.12); }
.rt.is-set .rt-opt[aria-pressed="false"] { opacity: .55; }
.rt.is-set .rt-opt[aria-pressed="false"]:hover { opacity: 1; }
.rt-opt.is-pop { animation: rt-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rt-pop { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
.rt.is-compact .rt-opt { padding: 8px 8px 7px; border-radius: 14px; font-size: 12.5px; }
.rt.is-compact .rt-emoji { font-size: 20px; }
/* the emoji alone (thumbs up / down): a bigger emoji, centered in its box */
.rt.is-bare .rt-opt { align-content: center; min-height: 58px; }
.rt.is-bare .rt-emoji { font-size: 32px; }
.rt.is-bare.is-compact .rt-opt { min-height: 0; }
.rt.is-bare.is-compact .rt-emoji { font-size: 24px; }
/* members' totals (js/ratings.js tally): each box's share, the box filling to it from the bottom;
   how many rated under the boxes */
.rt-pct { font-size: 15px; font-weight: 900; line-height: 1; }
.rt-pct:empty { display: none; }
.rt.is-compact .rt-pct { font-size: 13px; }
.rt.is-tallied .rt-opt { position: relative; overflow: hidden; background: #f1eefe; }
.rt.is-tallied .rt-opt:hover { background: #e7e3fd; }
.rt.is-tallied .rt-opt::before { content: ""; position: absolute; inset: auto 0 0 0; height: var(--fill, 0%); background: color-mix(in srgb, var(--ring) 22%, #fff);
  transition: height .6s cubic-bezier(.34, 1.2, .64, 1); }
.rt.is-tallied .rt-opt[aria-pressed="true"] { background: var(--ring); }
.rt.is-tallied .rt-opt[aria-pressed="true"]::before { background: rgba(255, 255, 255, .18); }
.rt.is-tallied .rt-opt > * { position: relative; }
.rt-n { margin: 0; color: #6b6890; font-size: 12.5px; }
.rt-n:empty { display: none; }
.rt.is-compact .rt-n { font-size: 11.5px; }

/* a nudge: "pick one first" (the bill's Write buttons) */
.rt.is-nudge .rt-row { animation: rt-nudge .5s ease; }
@keyframes rt-nudge { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.rt-hint { margin: 0; padding: 8px 12px; border-radius: 12px; background: #fff4d6; color: #7a5200; font-size: 13px; font-weight: 600; }
.rt-hint[hidden] { display: none; }

/* a person's ratings: three side by side (stacked on phones) */
.rt-person { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .rt-person { grid-template-columns: minmax(0, 1fr); } }
.rt-card { margin: 24px 0 0; padding: 18px 20px 20px; border-radius: 22px; background: #fff; box-shadow: var(--card-shadow, 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10)); }
.rt-card h2 { margin: 0 0 12px; font-size: 20px; }
.rt-card .rt-note { margin: 0 0 14px; color: var(--surf-ink, #4e4a7a); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .rt-opt, .rt-emoji, .rt.is-tallied .rt-opt::before { transition: none; } .rt-opt.is-pop, .rt.is-nudge .rt-row { animation: none; } }

/* on a measure card in a list: a little room above */
.mz-card > .rt { margin: 10px 0 2px; }