/* ── the 1-10 article rating, v2 (2026-10-23): our own slider ────────────── */
.magrate { --tc: #8a8a90; --p: 50%; margin: 30px 0 26px; padding: 20px 18px 18px; border-radius: 20px;
  background: var(--surface, rgba(127,127,127,.07)); border: 1px solid rgba(127,127,127,.16); }
.magrate.t-lo  { --tc: #d9534f; }
.magrate.t-mid { --tc: #c9971c; }
.magrate.t-hi  { --tc: #2e9e5b; }
.magrate .mr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.magrate .mr-h { font-weight: 900; font-size: 1.15rem; line-height: 1.7; }
.magrate .mr-sub { font-size: .9rem; opacity: .72; margin: 4px 0 0; line-height: 1.8; }
.magrate .mr-score { flex: 0 0 auto; width: 66px; height: 66px; border-radius: 18px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: rgba(127,127,127,.12); color: inherit; transition: background .2s, color .2s; }
.magrate .mr-score b { font-size: 1.7rem; line-height: 1; font-weight: 900; }
.magrate .mr-score span { font-size: 13px; opacity: .75; margin-top: 3px; }
/* the square = the readers' average, in its own colour (2026-10-31) */
.magrate .mr-sc { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.magrate .mr-sc.a-hi  .mr-score { background: #2e9e5b; color: #fff; }
.magrate .mr-sc.a-mid .mr-score { background: #c9971c; color: #fff; }
.magrate .mr-sc.a-lo  .mr-score { background: #d9534f; color: #fff; }
.magrate .mr-scn { font-size: 13px; opacity: .75; white-space: nowrap; }
.magrate .mr-sl { position: relative; margin: 34px 4px 0; height: 34px; }
.magrate .mr-r { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer;
  direction: ltr; touch-action: pan-y; }
.magrate .mr-r:focus-visible { outline: none; }
.magrate .mr-r::-webkit-slider-runnable-track { height: 12px; border-radius: 999px;
  background: linear-gradient(to right, var(--tc) 0 var(--p), rgba(127,127,127,.22) var(--p) 100%); }
.magrate .mr-r::-moz-range-track { height: 12px; border-radius: 999px; background: rgba(127,127,127,.22); }
.magrate .mr-r::-moz-range-progress { height: 12px; border-radius: 999px; background: var(--tc); }
.magrate .mr-r::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -10px; border-radius: 50%;
  background: #fff; border: 3px solid var(--tc); box-shadow: 0 3px 10px rgba(0,0,0,.22); transition: transform .12s; }
.magrate .mr-r::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--tc);
  box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.magrate .mr-r:active::-webkit-slider-thumb { transform: scale(1.12); }
.magrate:not(.set) .mr-r::-webkit-slider-runnable-track { background: rgba(127,127,127,.22); }
.magrate:not(.set) .mr-r::-moz-range-progress { background: transparent; }
/* the number rides above the thumb; 1 at the left, 10 at the right (his call: numbers read left to right) */
.magrate .mr-bub { position: absolute; top: -30px; left: calc(var(--p) * (100% - 32px) / 100% + 16px); transform: translateX(-50%);
  min-width: 30px; padding: 2px 8px; border-radius: 9px; background: var(--tc); color: #fff; font-weight: 800; font-size: 14px;
  text-align: center; opacity: 0; transition: opacity .15s; pointer-events: none; }
.magrate .mr-bub::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent;
  border-bottom: 0; border-top-color: var(--tc); }
.magrate.set .mr-bub { opacity: 1; }
.magrate .mr-ticks { display: flex; direction: ltr; justify-content: space-between; margin: 4px 0 0; padding: 0 4px; }
.magrate .mr-ticks button { width: 32px; height: 36px; border: 0; background: none; color: inherit; font: inherit; font-size: 14px;
  opacity: .6; cursor: pointer; border-radius: 8px; padding: 0; }
.magrate .mr-ticks button.on { opacity: 1; font-weight: 900; color: var(--tc); }
.magrate .mr-word { text-align: center; margin-top: 6px; font-size: 1rem; font-weight: 700; opacity: .6; min-height: 1.8em; }
.magrate.set .mr-word { opacity: 1; color: var(--tc); }
.magrate .mr-q { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(127,127,127,.3); }
.magrate .mr-qt { font-weight: 800; font-size: 1rem; line-height: 1.8; }
.magrate .mr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.magrate .mr-chip i { font-style: normal; margin-inline-end: 6px; }
.magrate .mr-chip { min-height: 42px; padding: 6px 16px; border-radius: 12px; border: 1px solid rgba(127,127,127,.35);
  background: transparent; color: inherit; font: inherit; font-size: .92rem; cursor: pointer; }
.magrate .mr-chip.on { background: var(--tc); border-color: var(--tc); color: #fff; }
.magrate .mr-note, .magrate .mr-nm, .magrate .mr-cc { width: 100%; box-sizing: border-box; border-radius: 12px;
  border: 1px solid rgba(127,127,127,.35); background: transparent; color: inherit; font: inherit; font-size: 15px;
  padding: 11px 12px; margin-bottom: 10px; }
.magrate .mr-note { resize: vertical; }
.magrate .mr-ck { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: .95rem; cursor: pointer; }
.magrate .mr-ck input { width: 20px; height: 20px; accent-color: var(--tc); flex: 0 0 auto; }
.magrate .mr-ct { margin: 8px 0 4px; padding: 12px; border-radius: 14px; background: rgba(127,127,127,.08); }
.magrate .mr-mail { font-size: .92rem; margin-bottom: 8px; }
.magrate .mr-priv { font-size: 13px; opacity: .65; }
.magrate .mr-pubh { font-size: 13px; opacity: .7; margin: -2px 30px 6px 0; line-height: 1.8; }
.magrate .mr-err { margin: 6px 0; color: #d9534f; font-size: .92rem; font-weight: 700; }
.magrate .mr-send { width: 100%; min-height: 48px; margin-top: 8px; border-radius: 14px; border: 0; background: #1f1f22; color: #fff;
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
.magrate .mr-send.done { background: #2e9e5b; }

/* the dark cinema watch pages (films and series, 2026-11-01): the box sits on
   the dark ground, so the send button and the empty track get lighter */
.cwrate { width: 100%; max-width: 820px; box-sizing: border-box; }
.cwrate .magrate { margin: 4px 0 6px; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #f2f2f2; }
.cwrate .magrate .mr-send { background: #f2f2f2; color: #111; }
.cwrate .magrate .mr-send.done { background: #2e9e5b; color: #fff; }
.cwrate .magrate .mr-score { background: rgba(255,255,255,.12); }