/* Popups (review form, guestbook) and the guestbook view. Tokens come from /base.css, text sizes from /type.css. */
.rv-backdrop { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:18px; background:rgba(14,14,14,.74); overflow:auto; animation:rv-fade .25s var(--ease); }
.rv-backdrop[hidden] { display:none; }
.rv-backdrop ~ .rv-backdrop { z-index:31; }
.rv-card { position:relative; width:min(100%,440px); padding:34px 30px 28px; background:var(--paper); color:var(--ink); border:1px solid var(--ink); box-shadow:0 24px 60px rgba(0,0,0,.45); animation:rv-rise .3s var(--ease); }
.rv-card h2 { margin:0 0 22px; font-size:1.05rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; text-align:center; padding-left:.28em; }
.rv-x { position:absolute; top:8px; right:8px; width:44px; height:44px; border:0; border-radius:50%; background:none; color:var(--ink); font-size:1rem; cursor:pointer; transition:background-color var(--t) var(--ease), opacity var(--press) var(--ease); -webkit-tap-highlight-color:transparent; }
.rv-x:focus-visible { background:rgba(20,20,20,.1); outline-offset:-4px; }
@media (hover:hover) { .rv-x:hover { background:rgba(20,20,20,.1); } }
.rv-x:active { opacity:.55; }
.rv-field { display:block; margin:0 0 18px; }
.rv-label { display:block; margin:0 0 7px; text-transform:uppercase; color:var(--soft); }
.rv-form input[type="text"], .rv-form textarea { display:block; width:100%; padding:11px 12px; border:1px solid rgba(20,20,20,.45); border-radius:0; background:rgba(255,255,255,.5); color:var(--ink); font:inherit; font-size:16px; line-height:1.45; transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.rv-form textarea { min-height:132px; resize:vertical; }
.rv-form input[type="text"]:focus, .rv-form textarea:focus { border-color:var(--ink); background:#fff; outline:none; }
.rv-form [aria-invalid="true"] { border-color:var(--accent); }
.rv-count { display:block; margin-top:5px; text-align:right; font-style:italic; color:var(--soft); }
.rv-stars { display:flex; gap:4px; margin-left:-6px; }
.rv-star { padding:7px; border:0; background:none; color:var(--ink); cursor:pointer; transition:opacity var(--press) var(--ease); -webkit-tap-highlight-color:transparent; }
.rv-star svg, .bk-stars svg, .bk-rating svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; transition:fill .25s var(--ease); }
.rv-star.on svg, .bk-stars .on, .bk-rating .on { fill:currentColor; }
.rv-star:focus-visible { outline-offset:-2px; }
.rv-star:active { opacity:.55; }
.rv-stars.invalid .rv-star { color:var(--accent); }
.rv-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.rv-error { min-height:1.3em; margin:0 0 12px; font-style:italic; color:var(--accent); }
.rv-submit { display:block; width:100%; padding:14px 18px 14px calc(18px + .3em); border:1px solid var(--ink); background:var(--ink); color:var(--paper); text-transform:uppercase; text-align:center; text-decoration:none; cursor:pointer; transition:background-color var(--t) var(--ease), color var(--t) var(--ease), opacity var(--press) var(--ease); -webkit-tap-highlight-color:transparent; }
.rv-submit:focus-visible { background:transparent; color:var(--ink); }
@media (hover:hover) { .rv-submit:hover:not(:disabled) { background:transparent; color:var(--ink); } }
.rv-submit:active:not(:disabled) { opacity:.7; }
.rv-submit:disabled { opacity:.5; cursor:default; }
/* the form folds open inside the guestbook */
.bk-form { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .5s var(--ease), visibility 0s .5s; }
.bk-form.open { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .5s var(--ease), visibility 0s; }
.bk-form-inner { min-height:0; overflow:hidden; }
.rv-form { margin:0; padding:4px 0 26px; }  /* flat on purpose: a box (border, tint, fade, slide) flickers while the height animates */
.bk-thanks { animation:rv-fade .45s var(--ease); margin:-12px 0 22px; text-align:center; font-style:italic; font-size:var(--fs-small); color:var(--ink); }
.bk-thanks:empty { display:none; }

/* guestbook popup: a fixed header and a scrolling body */
.rv-backdrop:has(.rv-book) { place-items:start center; padding-top:max(18px,6vh); }  /* anchored at the top so the card grows downward instead of re-centering (that made the header jump) */
.rv-book { display:flex; flex-direction:column; width:min(100%,560px); max-height:min(calc(100vh - max(18px,6vh) - 18px),820px); padding:0; overflow:hidden; }
@supports (height:100dvh) { .rv-book { max-height:min(calc(100dvh - max(18px,6vh) - 18px),820px); } }
.rv-book-head { position:relative; flex:none; padding:26px 56px 18px; border-bottom:1px solid var(--rule); }
.rv-book-head h2 { margin:0; }
.rv-book-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:26px 28px 30px; }

/* the guestbook view (popup and /book) */
.bk-summary { text-align:center; margin:0 0 24px; }
.bk-summary[hidden] { display:none; }
.bk-avg { display:flex; justify-content:center; align-items:center; gap:14px; margin:0; font-size:2.6rem; font-weight:700; line-height:1; }
.bk-stars { display:inline-flex; gap:2px; }
.bk-stars svg { width:22px; height:22px; }
.bk-count { margin:10px 0 0; font-style:italic; color:var(--soft); }
.bk-actions { display:flex; justify-content:center; margin:0 0 30px; }
.bk-leave, .bk-more { padding:13px 28px; background:none; border:1px solid var(--ink); color:var(--ink); text-transform:uppercase; cursor:pointer; transition:background-color var(--t) var(--ease), color var(--t) var(--ease), opacity var(--press) var(--ease); -webkit-tap-highlight-color:transparent; }
.bk-leave { width:min(100%,300px); }
.bk-leave:focus-visible, .bk-more:focus-visible { background:var(--ink); color:var(--paper); }
@media (hover:hover) { .bk-leave:hover, .bk-more:hover:not(:disabled) { background:var(--ink); color:var(--paper); } }
.bk-leave:active, .bk-more:active:not(:disabled) { opacity:.7; }
.bk-more:disabled { opacity:.45; cursor:default; }
.bk-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.bk-item { padding:22px 0 20px; border-bottom:1px solid var(--rule); }
.bk-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; margin-bottom:10px; }
.bk-who { display:flex; align-items:center; gap:12px; min-width:0; }
.bk-rating { display:inline-flex; gap:2px; flex:none; }
.bk-rating svg { width:15px; height:15px; }
.bk-name { font-size:.9rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; overflow-wrap:anywhere; }
.bk-date { flex:none; font-style:italic; color:var(--soft); }
.bk-text { margin:0; line-height:1.55; white-space:pre-line; overflow-wrap:anywhere; }
.bk-state { margin:24px 0 0; text-align:center; font-style:italic; color:var(--soft); }
.bk-state:empty { display:none; }
.bk-retry { padding:0; border:0; background:none; color:var(--ink); font:inherit; font-style:italic; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.bk-morewrap { display:flex; justify-content:center; margin-top:28px; }
.bk-morewrap:has(.bk-more[hidden]) { display:none; }
.bk-more[hidden] { display:none; }

@keyframes rv-fade { from { opacity:0 } to { opacity:1 } }
@keyframes rv-rise { from { transform:translateY(14px); opacity:0 } to { transform:none; opacity:1 } }
@media (max-width:440px) { .rv-book-head { padding:24px 52px 16px; } .rv-book-body { padding:22px 18px 26px; } }
@media (prefers-reduced-motion: reduce) { .rv-backdrop, .rv-card { animation:none; } .bk-form, .bk-form.open { transition:none; } .bk-thanks { animation:none; } }