/* Rate the Rhythm (see assets/rate-the-rhythm.js): save a beat, the board of saved beats, 1 to 5 Ugly Faces. */
.rr{margin:34px 0 10px;}
.rr[hidden]{display:none;}
.rr-title{font-family:var(--display,'Anton'),sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(34px,5vw,56px);line-height:1;margin:0 0 6px;}
.rr-sub{font-family:var(--body-serif,Georgia,serif);font-size:18px;line-height:1.5;max-width:44rem;margin:0 0 18px;}
.rr-save{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:end;background:#F4EBD6;border:2px solid #1a1a1a;border-radius:6px;padding:16px;margin:0 0 8px;}
.rr-field{display:grid;gap:4px;flex:1 1 180px;min-width:0;}
.rr-field label{font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;}
.rr-field input{font:inherit;font-size:16px;min-height:44px;padding:8px 10px;border:2px solid #1a1a1a;border-radius:4px;background:#fff;}
.rr-savebtn{font-family:var(--display-heavy,'Archivo Black'),sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:.03em;background:#FB8322;color:#030303;border:3px solid #1a1a1a;border-radius:6px;padding:12px 18px;min-height:48px;cursor:pointer;box-shadow:0 3px 0 #1a1a1a;}
.rr-savebtn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
.rr-line{font-family:var(--mono,'Space Mono'),monospace;font-size:13px;margin:6px 0 4px;min-height:1.4em;}
.rr-line.is-bad{color:#b0170a;font-weight:700;}
.rr-left{font-weight:700;}
.rr-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:16px 0 6px;}
.rr-empty{font-family:var(--body-serif,Georgia,serif);font-size:17px;}
.rr-card{background:#FDF9EE;border:2px solid #1a1a1a;border-radius:6px;padding:14px 14px 12px;display:grid;gap:8px;align-content:start;box-shadow:0 3px 0 rgba(3,3,3,.25);}
.rr-card-title{font-family:var(--display-heavy,'Archivo Black'),sans-serif;text-transform:uppercase;font-size:18px;line-height:1.1;margin:0;overflow-wrap:anywhere;}
.rr-meta{font-family:var(--mono,'Space Mono'),monospace;font-size:12px;letter-spacing:.04em;margin:0;}
.rr-spark{display:flex;align-items:flex-end;gap:2px;height:30px;}
.rr-spark i{flex:1;background:#FB8322;min-height:4px;border-radius:1px;}
.rr-play{font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:#1a1a1a;color:#FDF9EE;border:0;border-radius:4px;padding:11px 12px;min-height:44px;cursor:pointer;}
.rr-play:hover{background:#C0331A;}
.rr-rate{display:flex;gap:2px;}
.rr-face{border:0;background:transparent;padding:2px;border-radius:6px;cursor:pointer;line-height:0;opacity:.22;filter:grayscale(1);transition:opacity .12s,filter .12s,transform .12s;}
.rr-face img{display:block;width:44px;height:44px;}
.rr-face.is-on{opacity:.6;filter:none;}
.rr-face.is-on.is-mine{opacity:1;}
/* hover preview: the face under the pointer and every face before it light up, the rest dim */
.rr-rate:hover .rr-face:not(:disabled){opacity:.22;filter:grayscale(1);}
.rr-rate:hover .rr-face:not(:disabled):hover,.rr-rate:hover .rr-face:not(:disabled):has(~ .rr-face:hover){opacity:1;filter:none;}
.rr-face:not(:disabled):focus-visible{opacity:1;filter:none;transform:scale(1.08);}.rr-face:focus-visible{outline:3px solid #1a1a1a;outline-offset:2px;}
.rr-face:disabled{cursor:default;}
.rr-avg{font-family:var(--mono,'Space Mono'),monospace;font-size:12px;margin:0;}
@media (prefers-reduced-motion:reduce){ .rr-face{transition:none;} .rr-face:not(:disabled):focus-visible{transform:none;} }

/* sign in, sort, stop, download */
.rr-account{margin:0 0 12px;}
.rr-signin{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:end;background:#F4EBD6;border:2px solid #1a1a1a;border-radius:6px;padding:16px;}
.rr-hint{font-family:var(--body-serif,Georgia,serif);font-size:15px;line-height:1.45;max-width:46rem;margin:8px 0 0;}
.rr-link{font-family:var(--mono,'Space Mono'),monospace;font-size:12px;margin:6px 0 0;}
.rr-who{font-family:var(--body-serif,Georgia,serif);font-size:16px;margin:0;}
.rr-linked{font-family:var(--mono,'Space Mono'),monospace;font-size:12px;font-weight:700;color:#C0331A;}
.rr-textbtn{font:inherit;background:none;border:0;padding:0;color:#C0331A;text-decoration:underline;cursor:pointer;}
.rr-sort{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0;font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;}
.rr-sort [role=group]{display:flex;}
.rr-sort button{font:inherit;letter-spacing:.08em;text-transform:uppercase;background:#FDF9EE;color:#1a1a1a;border:2px solid #1a1a1a;padding:9px 14px;min-height:40px;cursor:pointer;}
.rr-sort button + button{border-left:0;}
.rr-sort button[aria-pressed="true"]{background:#1a1a1a;color:#FDF9EE;}
.rr-play.is-playing{background:#C0331A;}
.rr-mp3{font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:#1a1a1a;border:2px solid #1a1a1a;border-radius:4px;padding:9px 10px;min-height:40px;cursor:pointer;}
.rr-mp3:hover{background:#FB8322;}
.rr-mp3:disabled{opacity:.6;cursor:progress;}
.rr-card-msg{font-family:var(--mono,'Space Mono'),monospace;font-size:11px;margin:0;min-height:1em;}

/* news choice, delete */
.rr-check{flex:1 1 100%;display:flex;gap:8px;align-items:flex-start;font-family:var(--body-serif,Georgia,serif);font-size:15px;line-height:1.4;}
.rr-check input{width:20px;height:20px;margin-top:2px;flex:none;}
.rr-confirm{background:#FDF9EE;border:2px solid #C0331A;border-radius:6px;padding:12px 14px;margin:10px 0 0;}
.rr-confirm p{font-family:var(--body-serif,Georgia,serif);font-size:16px;margin:0 0 10px;}
.rr-del{font-family:var(--mono,'Space Mono'),monospace;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:#C0331A;border:2px solid #C0331A;border-radius:4px;padding:9px 10px;min-height:40px;cursor:pointer;}
.rr-del:hover{background:#C0331A;color:#FDF9EE;}