/* ── the rating widget, shared by every page that asks for one ───────────────────
   Design: mockups/rating-widget-B-command-dark.html. A dark command-palette card,
   in both themes on purpose: it has to read as US asking, not as part of the page
   it sits on. Its own --w-* tokens, so the whole surface swaps in one place.

   Served with the default no-cache (NOT under /assets/, which is max-age=86400) —
   a stale copy of this next to fresh markup is a broken widget.

   The page owns placement (fixed corner, inside a launcher, …) and the enter
   transition; everything here is the card itself. Star buttons carry data-n and
   get .on when lit; the card gets .sent when the thank-you takes over. */
.rw {
  --w-bg:29 29 32; --w-bg2:22 22 24; --w-line:255 255 255; --w-txt:242 241 244;
  --w-mute:160 159 168; --w-dim:111 110 120; --w-accent:104 106 247; --w-star:255 191 71;
  width:23.5rem; max-width:calc(100vw - 2rem); overflow:hidden; text-align:left;
  color:rgb(var(--w-txt));
  background:linear-gradient(180deg, rgb(var(--w-bg)), rgb(var(--w-bg2)) 40%);
  border-radius:1rem;
  box-shadow:0 0 0 1px rgb(var(--w-line) / .07), inset 0 1px 0 rgb(var(--w-line) / .07),
    0 30px 80px -20px rgb(0 0 0 / .55), 0 10px 24px -10px rgb(0 0 0 / .4);
}
/* a class that sets display beats the UA [hidden] rule — bitten twice already */
.rw[hidden] { display:none; }
.rw-rise { animation:rw-rise 550ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rw-rise { from { opacity:0; transform:translateY(.875rem) scale(.98); } }
/* both keyed to the rating: the card warms up as the stars light */
.rw::before {
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgb(var(--w-star) / calc(.12 + var(--r, 0) * .1)), transparent);
}
.rw-glow {
  position:absolute; left:50%; top:5.5rem; width:20rem; height:7.5rem; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgb(var(--w-star) / calc(var(--r, 0) * .045)), transparent);
  pointer-events:none; transition:background 400ms;
}
.rw-body { position:relative; padding:1.125rem 1.125rem .875rem; }
.rw-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.rw-ctx {
  display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .625rem .25rem .375rem;
  font-size:.75rem; color:rgb(var(--w-mute)); border-radius:999px;
  background:rgb(var(--w-line) / .04); box-shadow:inset 0 0 0 1px rgb(var(--w-line) / .08);
}
.rw-ctx i { width:1.125rem; height:1.125rem; border-radius:.3125rem; background:linear-gradient(135deg, #8b7bff, #5b4be0); }
.rw-x {
  display:grid; place-items:center; width:1.75rem; height:1.75rem; padding:0;
  font:inherit; cursor:pointer; border:0; border-radius:.5rem; background:none; color:rgb(var(--w-dim));
}
.rw-x:hover { background:rgb(var(--w-line) / .06); color:rgb(var(--w-txt)); }
.rw-x svg { width:.75rem; height:.75rem; stroke:currentColor; stroke-width:1.8; fill:none; }
.rw b { display:block; font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; }
.rw p { margin:.25rem 0 1rem; font-size:.8125rem; line-height:1.5; color:rgb(var(--w-mute)); }
.rw p.rw-note { margin:.625rem 0 0; font-size:.6875rem; color:rgb(var(--w-dim)); }
.rw p.rw-note a { color:rgb(var(--w-mute)); text-underline-offset:2px; }
/* the case a visitor is looking at, when there is one — the whole reason the
   showcase panel waits for a full view before it offers anything */
.rw-case {
  margin:0 0 .875rem; padding:.75rem; border-radius:.625rem;
  background:rgb(var(--w-accent) / .12); box-shadow:inset 0 0 0 1px rgb(var(--w-accent) / .3);
}
.rw-case-l {
  margin:0; font-size:.625rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:rgb(var(--w-accent));
}
.rw-case-t { margin:.1875rem 0 .625rem; font-size:.875rem; font-weight:600; line-height:1.35; color:rgb(var(--w-txt)); }
.rw-build {
  display:block; height:2.25rem; line-height:2.25rem; text-align:center; text-decoration:none;
  font-size:.8125rem; font-weight:600; color:#fff; border-radius:.5625rem;
  background:rgb(var(--w-accent));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 16px -6px rgb(var(--w-accent) / .8);
}
.rw-build:hover { filter:brightness(1.1); }
.rw-rate { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.875rem; }
.rw-stars { display:flex; gap:.125rem; }
.rw-stars button { padding:.25rem; font:inherit; cursor:pointer; border:0; border-radius:.5rem; background:none; }
.rw-stars button:focus-visible { outline:2px solid rgb(var(--w-accent)); outline-offset:1px; }
.rw-stars svg {
  display:block; width:1.875rem; height:1.875rem;
  fill:rgb(var(--w-line) / .07); stroke:rgb(var(--w-line) / .16); stroke-width:1.2;
  transition:fill 200ms, stroke 200ms, transform 350ms cubic-bezier(.34, 1.8, .5, 1), filter 300ms;
}
.rw-stars button:hover svg { transform:translateY(-2px); }
.rw-stars button.on svg { fill:rgb(var(--w-star)); stroke:#ffd88a; filter:drop-shadow(0 0 10px rgb(var(--w-star) / .45)); }
.rw.bump .rw-stars button.on svg { animation:rw-tw 450ms cubic-bezier(.34, 1.8, .5, 1); }
@keyframes rw-tw { 40% { transform:scale(1.18); } }
/* the word carries the meaning; five shapes are a number nobody reads back */
.rw-pill {
  min-width:6rem; padding:.4375rem .75rem; text-align:center; font-size:.75rem; font-weight:500;
  color:rgb(var(--w-mute)); border-radius:999px; background:rgb(var(--w-line) / .04);
  box-shadow:inset 0 0 0 1px rgb(var(--w-line) / .08); transition:color 200ms, background 200ms;
}
.rw[data-r="4"] .rw-pill, .rw[data-r="5"] .rw-pill {
  color:rgb(var(--w-star)); background:rgb(var(--w-star) / .08);
  box-shadow:inset 0 0 0 1px rgb(var(--w-star) / .22);
}
.rw[data-r="1"] .rw-pill, .rw[data-r="2"] .rw-pill, .rw[data-r="3"] .rw-pill { color:rgb(var(--w-txt)); }
/* nothing to write until there is something to write about: the tags and the box
   only exist once a star is picked, and the card grows into them */
.rw-more { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows 400ms cubic-bezier(.16, 1, .3, 1), opacity 300ms; }
.rw-more.open { grid-template-rows:1fr; opacity:1; }
.rw-more > div { overflow:hidden; }
.rw-chips { display:flex; flex-wrap:wrap; gap:.375rem; margin-bottom:.75rem; }
.rw-chips button {
  padding:.375rem .6875rem; font:inherit; font-size:.75rem; cursor:pointer; border:0; border-radius:.5rem;
  color:rgb(var(--w-mute)); background:rgb(var(--w-line) / .035);
  box-shadow:inset 0 0 0 1px rgb(var(--w-line) / .08); transition:color 150ms, background 150ms, box-shadow 150ms;
}
.rw-chips button:hover { color:rgb(var(--w-txt)); background:rgb(var(--w-line) / .06); }
.rw-chips button[aria-pressed="true"] {
  color:#fff; background:rgb(var(--w-accent) / .2); box-shadow:inset 0 0 0 1px rgb(var(--w-accent) / .6);
}
.rw textarea {
  width:100%; min-height:4.25rem; resize:vertical; font:inherit; font-size:.8125rem;
  padding:.625rem .6875rem; color:rgb(var(--w-txt)); border:0; border-radius:.625rem;
  background:rgb(0 0 0 / .25); box-shadow:inset 0 0 0 1px rgb(var(--w-line) / .08);
  outline:none; transition:box-shadow 200ms;
}
.rw textarea::placeholder { color:rgb(var(--w-dim)); }
.rw textarea:focus { box-shadow:inset 0 0 0 1px rgb(var(--w-accent) / .7), 0 0 0 3px rgb(var(--w-accent) / .15); }
.rw-act {
  display:flex; align-items:center; justify-content:space-between; gap:.625rem;
  padding:.625rem .75rem .625rem 1.125rem;
  border-top:1px solid rgb(var(--w-line) / .08); background:rgb(0 0 0 / .18);
}
.rw-act[hidden] { display:none; }
.rw-act > div { display:flex; gap:.375rem; }
.rw-keys { font-size:.6875rem; color:rgb(var(--w-dim)); }
.rw-keys kbd {
  font:inherit; font-size:.625rem; color:rgb(var(--w-mute)); padding:.125rem .375rem; margin-right:.25rem;
  border-radius:.3125rem; background:rgb(var(--w-line) / .06);
  box-shadow:inset 0 -1px 0 rgb(var(--w-line) / .06), inset 0 0 0 1px rgb(var(--w-line) / .08);
}
.rw-ghost, .rw-send {
  height:2.25rem; padding:0 1rem; font:inherit; font-size:.8125rem; cursor:pointer;
  border:0; border-radius:.5625rem;
}
.rw-ghost { padding:0 .75rem; font-weight:500; color:rgb(var(--w-mute)); background:none; }
.rw-ghost:hover { background:rgb(var(--w-line) / .06); color:rgb(var(--w-txt)); }
.rw-send {
  font-weight:600; color:#fff; background:rgb(var(--w-accent));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 16px -6px rgb(var(--w-accent) / .8);
  transition:opacity 200ms, transform 120ms, filter 200ms;
}
.rw-send:hover { filter:brightness(1.1); }
.rw-send:active { transform:scale(.97); }
.rw-send[disabled] { opacity:.35; box-shadow:none; cursor:default; filter:none; }
/* the thank-you takes over the same card — a second popup to say thanks is a pest */
.rw-done { display:none; padding:1.75rem 1.125rem 1.375rem; text-align:center; }
.rw.sent .rw-form { display:none; }
.rw.sent .rw-done { display:block; }
.rw-done p { margin:.25rem 0 0; }
.rw-ring {
  display:grid; place-items:center; width:3.5rem; height:3.5rem; margin:0 auto 1rem; border-radius:50%;
  background:rgb(var(--w-star) / .1);
  box-shadow:inset 0 0 0 1px rgb(var(--w-star) / .3), 0 0 30px rgb(var(--w-star) / .2);
}
.rw-ring svg {
  width:1.625rem; height:1.625rem; fill:none; stroke:rgb(var(--w-star)); stroke-width:2.2;
  stroke-dasharray:30; stroke-dashoffset:30; animation:rw-draw 600ms 150ms ease forwards;
}
@keyframes rw-draw { to { stroke-dashoffset:0; } }
.rw-done .rw-send { display:inline-block; margin-top:1.125rem; line-height:2.25rem; text-decoration:none; }
/* the close and the App Store link are one OR the other, never both */
.rw-done .rw-send[hidden] { display:none; }
.rw-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
@media (prefers-reduced-motion: reduce) {
  .rw-rise { animation:none; }
  .rw-more, .rw-glow { transition:none; }
  .rw.bump .rw-stars button.on svg { animation:none; }
  .rw-ring svg { animation:none; stroke-dashoffset:0; }
}