/* DV80 GEM RATING · The Alder House review card. The theme is the page's own (dark); the OS scheme is never read. */
:root {
  --page: #0f0f11; --ink: #fffff3; --gold: #fcd885; --gold2: #ffeca0; --mute: #978e7c; --mute2: #aba08c;
  --cap: #8a8478; --cap-b: #e7ddc9; --field: rgba(255, 255, 255, .045); --line: rgba(236, 230, 218, .16);
  --btn-a: #e8c77f; --btn-b: #cfa964; --btn-ink: #1b150c; --err: #f19a8a;
  --pitch: min(16.75vw, 26.8vh);
  --serif: 'Cormorant Garamond', 'Times New Roman', serif; --sans: Manrope, system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--page); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { background: var(--page); color: var(--ink); font-family: var(--sans); min-height: 100svh; overflow-x: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--gold); color: var(--btn-ink); padding: 12px 16px; min-height: 44px; border-radius: 10px; font: 600 14px var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }

.page { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: 0 16px; isolation: isolate; }
.stage { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; z-index: 0; pointer-events: none; overflow: hidden; }
.gl, .fb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.fb { display: none; }

.head { position: relative; z-index: 2; text-align: center; margin-top: max(28px, 7.4svh); }
.eyebrow { font: 600 12px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--mute); }
.h { font: 400 clamp(38px, 3.7vw + 4px, 64px)/1.08 var(--serif); margin-top: 12px; color: var(--ink); letter-spacing: -.005em; }
.h i { color: var(--gold); font-style: italic; }

.review { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; flex: 1; }
/* the stones sit at a fixed place (no auto margin): the space left over is below the form, so the field can grow
   without moving them */
.rating { border: 0; min-width: 0; margin-top: max(0px, calc(33svh - 272px)); padding-top: max(18px, 6svh); }
.gems { display: flex; justify-content: center; }
.gem { position: relative; display: block; width: var(--pitch); height: calc(var(--pitch) * .86); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gem input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; width: 100%; height: 100%; }
.gem .ring { position: absolute; left: 50%; top: 50%; width: calc(var(--pitch) * .84); height: calc(var(--pitch) * .84); transform: translate(-50%, -50%) scale(.94); border-radius: 50%;
  border: 1.5px solid transparent; transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease; pointer-events: none; }
.gem:has(input:focus-visible) .ring { border-color: rgba(252, 216, 133, .9); transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 22px rgba(252, 216, 133, .18), inset 0 0 18px rgba(252, 216, 133, .08); }
.rating:disabled .gem { cursor: default; }

/* the floor and its reflection sit between the stones and the score */
.score { text-align: center; margin-top: calc(var(--pitch) * .66); min-height: 64px; }
.score .n { font: 400 clamp(26px, 1.6vw + 6px, 32px)/1.15 var(--serif); color: var(--gold2); transition: opacity .18s ease; }
.score .l { font: 600 13px/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--mute2); margin-top: 8px; transition: opacity .18s ease; }
.score.zero .n { color: var(--ink); }
.score.preview .n { color: #fff3c4; }

.row { position: relative; z-index: 3; display: flex; align-items: flex-start; gap: 10px; margin-top: max(16px, 3.2svh); width: min(600px, 100%); }
.field { position: relative; flex: 1; min-width: 0; }
.field textarea { position: relative; z-index: 1; display: block; width: 100%; min-height: 52px; max-height: 140px; resize: none; border-radius: 26px; border: 1px solid var(--line); background: var(--field); color: var(--ink);
  padding: 15px 66px 15px 22px; font: 400 14.5px/1.5 var(--sans); white-space: pre-wrap; outline: none; overflow: hidden; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.field textarea::placeholder { color: #8a8375; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field textarea:hover:not(:disabled) { border-color: rgba(236, 230, 218, .28); }
.field textarea:focus-visible { border-color: rgba(252, 216, 133, .65); background: #19191c; box-shadow: 0 0 0 3px rgba(252, 216, 133, .12); }
.field textarea:disabled { opacity: .62; cursor: default; }
.field .count { position: absolute; right: 20px; bottom: 16px; font: 500 11px/1 var(--sans); letter-spacing: .04em; color: #7c7568; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.field:focus-within .count, .field.long .count, .field.over .count { opacity: 1; }
.field.over .count { color: var(--err); }
.field.over textarea { border-color: rgba(241, 154, 138, .7); }

.post { position: relative; flex: none; height: 52px; min-width: 132px; padding: 0 26px; border-radius: 26px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); color: var(--btn-ink); font: 600 15px/1 var(--sans); letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255, 244, 210, .55) inset, 0 10px 30px -12px rgba(232, 199, 127, .45); transition: filter .2s ease, transform .12s ease, box-shadow .2s ease; }
.hover-ok .post:hover:not([aria-disabled=true]) { filter: brightness(1.08); box-shadow: 0 1px 0 rgba(255, 244, 210, .6) inset, 0 12px 34px -10px rgba(232, 199, 127, .6); }
.post:active:not([aria-disabled=true]) { transform: scale(.97); }
.post:focus-visible, .edit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.post .spin, .post .ok { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; opacity: 0; transition: opacity .15s ease; fill: none; stroke: var(--btn-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.post .spin circle { stroke-dasharray: 30 14; }
.post.busy .post-l { opacity: 0; } .post.busy .spin { opacity: 1; animation: spin .8s linear infinite; }
.post.done .ok { opacity: 1; position: static; display: inline-block; margin: 0 0 0 8px; vertical-align: -4px; width: 18px; height: 18px; }
.post[aria-disabled=true] { cursor: default; }
.post.done[aria-disabled=true] { filter: saturate(.85); }
.post.shake { animation: shake .42s ease; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }

.foot { position: relative; width: min(600px, 100%); min-height: 44px; margin-top: 8px; }
.msg { margin-top: 2px; font: 500 13px/1.45 var(--sans); color: var(--err); text-align: center; }
.msg:empty { display: none; }
.after { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.after[hidden] { display: none; }
.thanks { font: 400 14px/1.4 var(--sans); color: var(--mute2); }
.edit { min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 13px var(--sans); cursor: pointer; transition: border-color .2s, background-color .2s; }
.hover-ok .edit:hover { border-color: rgba(252, 216, 133, .5); background: rgba(255, 255, 255, .04); }

.cap { position: relative; z-index: 2; text-align: center; font: 400 13px/1.55 var(--sans); color: var(--cap); padding: 10px 8px max(26px, 3.6svh); margin-top: max(12px, 3.6svh); }
.cap b { color: var(--cap-b); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-right: 12px; }

/* no WebGL: SVG stones */
.no-fx .gl { display: none; }
.no-fx .fb { display: block; }

/* phones */
@media (max-width: 699px) {
  :root { --pitch: min(18.3vw, 10.4svh); }
  .head { margin-top: max(26px, 8.6svh); }
  .eyebrow { font-size: 11px; letter-spacing: .26em; }
  .h { font-size: clamp(32px, 10.2vw, 42px); }
  .rating { margin-top: max(0px, calc(40svh - 190px)); padding-top: 0; }
  .gem { height: calc(var(--pitch) * 1.1); }
  .score { margin-top: calc(var(--pitch) * 1.22); }
  .row { gap: 8px; }
  .post { min-width: 0; padding: 0 20px; }
  .field textarea { padding-right: 58px; padding-left: 18px; }
  .cap { font-size: 11.5px; padding-left: 14px; padding-right: 14px; }
  .cap b { display: block; margin: 0 0 4px; }
}
/* tablets in portrait: the same centred column as the phone, stones as big as the width allows */
@media (min-width: 700px) and (orientation: portrait) {
  :root { --pitch: min(17.4vw, 15svh); }
  .rating { margin-top: max(0px, calc(33svh - 215px)); padding-top: 0; }
  .score { margin-top: calc(var(--pitch) * .78); }
}
/* short landscape screens: let the page scroll, keep the stones big enough to touch */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --pitch: min(13vw, 30svh); }
  .head { margin-top: 18px; }
  .rating { padding-top: 10px; }
  .score { margin-top: calc(var(--pitch) * .7); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}