/* The review form, simpler and symmetric: one row of plates for "how was it?", the details folded away, a pair of boxes for time and photo.
   Rating marks are small gold plates (the same ring as the Kritisch plate), not stars. */
.rv2 .rv-l{margin-top:12px}
.rv-overall{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0 6px}
.rv-overall button{aspect-ratio:1;display:grid;place-items:center;padding:0;border-radius:18px;border:1px solid var(--dl,#3b3121);background:#0e0c09;cursor:pointer;transition:transform .18s ease,border-color .18s,background .18s,box-shadow .18s}
.rv-overall button svg{width:62%;height:62%}.rv-overall .rim{fill:none;stroke:#8a6a2e;stroke-width:2}.rv-overall .in{fill:none;stroke:#3b3121;stroke-width:1.4}.rv-overall .food{fill:#e8c46f}.rv-overall .x{stroke:#7a6a4a;stroke-width:2.2;stroke-linecap:round;fill:none}.rv-overall .sp{fill:#fff3c4}
.rv-overall button:hover{border-color:var(--da,#dcbc78)}
.rv-overall button.on{transform:scale(1.07);border-color:var(--da,#dcbc78);background:linear-gradient(160deg,#3a2d12,#1c1508);box-shadow:0 0 0 3px #dcbc7822,0 8px 22px #dcbc7826}
.rv-overall button.on .rim{stroke:#f0d58f}
.rv-word{grid-column:1/-1;justify-self:center;white-space:nowrap;text-align:center;min-height:1.3em;font:700 .74rem var(--au-sans,system-ui,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--da2,#ecd39b)}
.rv-det{margin:6px 0 4px;border:1px solid var(--dl,#3b3121);border-radius:14px;background:#0e0c09}
.rv-det summary{cursor:pointer;list-style:none;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;font:700 .74rem var(--au-sans,system-ui,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--da2,#ecd39b)}
.rv-det summary::-webkit-details-marker{display:none}.rv-det summary::after{content:"+";font-size:1.1rem;color:var(--dm,#9d8f74)}.rv-det[open] summary::after{content:"–"}
.rv-det #aspects{padding:2px 14px 10px}
#aspects .aspect{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 0}
#aspects .aspect-ic{width:26px;height:26px;color:var(--da,#dcbc78)}#aspects .aspect-ic svg{width:100%;height:100%}
#aspects .aspect-val{display:none}
#aspects .stars{display:flex;gap:6px;justify-self:end}
#aspects .stars button{position:relative;width:30px;height:30px;padding:0;border:0;background:none;border-radius:8px;font-size:1.7rem;line-height:1;color:#3d3222;cursor:pointer;transition:color .2s,transform .2s,text-shadow .3s,filter .3s}
#aspects .stars button:hover{transform:scale(1.18);color:#8a6a2e}
#aspects .stars button.on{color:#e8c46f}
/* every new star pops in, one after the other */
#aspects .stars[data-pop] button.on{animation:starPop .5s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes starPop{0%{transform:scale(.4) rotate(-25deg);opacity:.2}60%{transform:scale(1.4) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)}}

/* 1 star: gloomy. Dim, drooping, with a small tear. */
#aspects .stars[data-lvl="1"] button.on{color:#6e5b3a;filter:saturate(.5);animation:sad 3.2s ease-in-out infinite}
#aspects .stars[data-lvl="1"] button.on::after{content:"";position:absolute;left:62%;top:58%;width:5px;height:8px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:#7fb4d6;opacity:0;animation:tear 3.2s ease-in infinite}
@keyframes sad{0%,100%{transform:translateY(0) rotate(0) scale(.94)}50%{transform:translateY(3px) rotate(-9deg) scale(.9)}}
@keyframes tear{0%,30%{opacity:0;transform:translateY(0)}45%{opacity:.9}85%{opacity:0;transform:translateY(16px)}100%{opacity:0}}
/* 2 stars: tired */
#aspects .stars[data-lvl="2"] button.on{color:#a2823a;animation:tired 4s ease-in-out infinite}
@keyframes tired{0%,100%{transform:rotate(0)}50%{transform:translateY(2px) rotate(-5deg)}}
/* 3 stars: calm, plain gold */
#aspects .stars[data-lvl="3"] button.on{color:#e0b957}
/* 4 stars: warm glow, a slow breath */
#aspects .stars[data-lvl="4"] button.on{color:#f1cd6b;text-shadow:0 0 9px #e8b93a88;animation:breath 3s ease-in-out infinite;animation-delay:calc(var(--i,0) * 160ms)}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
/* 5 stars: shining. Bright, a travelling flash and twinkling sparks on the last star. */
#aspects .stars[data-lvl="5"] button.on{color:#ffe28a;text-shadow:0 0 8px #ffd66b,0 0 20px #f0b93a;animation:shine 1.7s ease-in-out infinite;animation-delay:calc(var(--i,0) * 130ms)}
#aspects .stars[data-lvl="5"] button.on:nth-child(5)::after{content:"\2726";position:absolute;right:-5px;top:-7px;font-size:.75rem;color:#fff6cf;text-shadow:0 0 6px #fff1a8;animation:spark 1.7s ease-in-out infinite}
#aspects .stars[data-lvl="5"] button.on:nth-child(1)::before{content:"\2726";position:absolute;left:-4px;bottom:-4px;font-size:.6rem;color:#fff6cf;text-shadow:0 0 6px #fff1a8;animation:spark 1.7s ease-in-out .85s infinite}
@keyframes shine{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.7);transform:scale(1.14)}}
@keyframes spark{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(35deg)}}
@media (prefers-reduced-motion:reduce){#aspects .stars button.on,#aspects .stars button.on::before,#aspects .stars button.on::after{animation:none!important}}
.rv-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 0;align-items:stretch}
.rv2 label.rv-box{position:relative;display:flex!important;margin:0!important;align-items:center;justify-content:center;gap:10px;height:52px;margin:0;padding:0 12px;border:1px dashed var(--dl,#3b3121);border-radius:14px;background:transparent;color:var(--dm,#9d8f74);font:600 .86rem var(--au-sans,system-ui,sans-serif);text-transform:none;letter-spacing:0;cursor:pointer;min-width:0}
.rv-box svg{width:22px;height:22px;flex:none;color:var(--da,#dcbc78)}
.rv2 .rv-box input[type=number]{width:3.6rem!important;height:34px!important;padding:0 6px!important;text-align:center;border-radius:10px}
.rv2 .rv-cam input[type=file]{position:absolute!important;inset:0;opacity:0;cursor:pointer;width:100%!important;height:100%!important}
.rv2 label.rv-chk2{justify-content:flex-start;border-style:solid;font-size:.8rem;line-height:1.25;color:var(--dt,#f2e8d2)}.rv2 .rv-chk2 input{width:18px!important;height:18px!important;flex:none;margin:0;accent-color:#dcbc78}
.rv2 .rv-date{height:52px!important;border-radius:14px;margin:0}
.rv2 .rv-photo{margin:6px 0 0}
.rv2 textarea{min-height:64px}
@media (max-width:420px){#aspects .stars{gap:2px}#aspects .stars button{width:27px;height:27px;font-size:1.55rem}}

/* less words: the explanation under Review / Flash Review is not needed, the screen explains itself */
.rv2 .rv-mode p,.rv-mode p{display:none}

/* simple: only the parts of the visit, no plates; the line under Publish */
.rv-det{margin:14px 0 6px}.rv-det #aspects{padding:6px 14px 10px}
.rv-confirm{margin:8px 0 0;text-align:center;color:var(--dm,#9d8f74);font:500 .74rem/1.4 var(--au-sans,system-ui,sans-serif)}