/* Usage-statistics choice and guest ratings. Tokens come from style.css. */

/* The choice is a compact card pinned to the bottom left, after the page content, so it is never the first
   thing painted or read. On a phone it spans the width above the pool sheet. */
.privacy-choice{position:fixed;left:var(--gutter);bottom:var(--s-4);z-index:70;width:min(440px,calc(100vw - 2 * var(--gutter)));padding:14px 16px;border-radius:var(--r-lg);background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--elev-3);font-size:var(--fs-sm);line-height:1.45;animation:privacy-in .35s var(--ease-out) both}
@keyframes privacy-in{from{opacity:0;transform:translateY(12px)}}
.privacy-choice p{margin:0 0 10px}
.privacy-choice strong{display:block;font-size:var(--fs-base);margin-bottom:2px}
.privacy-choice>div{display:flex;gap:8px;justify-content:flex-end}
.privacy-choice .button{min-height:var(--control-h-sm);padding:0 12px;font-size:var(--fs-sm)}
.privacy-choice a{color:inherit;text-underline-offset:3px}
@media(max-width:800px){
  .privacy-choice{left:var(--s-3);right:var(--s-3);width:auto;bottom:calc(var(--s-3) + env(safe-area-inset-bottom,0px))}
  body.has-pool-sheet .privacy-choice{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){.privacy-choice{animation:none}}

.visitor-rating{border-top:1px solid var(--line);margin:18px 0;padding:18px 0 8px}
.visitor-rating p{margin:8px 0;font-size:var(--fs-xs)}
.visitor-rating-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.visitor-rating-line strong{font-size:var(--fs-base)}
.visitor-stars{display:inline-block}
.visitor-rating-value{font-size:var(--fs-base);font-variant-numeric:tabular-nums;min-width:4.5em}
.visitor-rating-value.is-hint{color:var(--muted);font-size:var(--fs-sm)}
.visitor-rating-value:empty{display:none}
.visitor-rating-status{color:var(--muted)}
@media(max-width:800px){.visitor-rating-line{gap:8px}}
/* On a phone the open pool sheet owns the bottom of the screen; the card steps aside until it collapses. */
@media(max-width:800px){body.has-pool-sheet #pool-sheet[open]:not([data-snap="collapsed"])~.privacy-choice{transform:translateY(140%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s var(--ease-out),opacity .2s,visibility 0s .25s}.privacy-choice{transition:transform .25s var(--ease-out),opacity .2s}}