/* A Google review page as a customer sees it (reviewHtml in review-view.js): the page the Worker
   writes at /<address>, and the same block in the builder's preview. Always light, like a menu.
   Buttons and fields are the site's (base.css), "Report this page" is report.css.
   A white card on a ground tinted by the page's colour, a little deeper at the top; the logo (or the first letter of
   the name) sits across the card's top edge; a quiet foot at the bottom of the screen.

   THE RULE: both ways show to everyone and are the same size. ONE rule below sizes both (.rv-btn).
   No rule may size, hide, fade or move the Google button or the private one alone:
   test/rules.mjs reads this file and fails if one does. */
body:has(> .review-page) {
  background: #fff;
}

.review-page {
  /* The page's colour: cobalt, or the one its owner chose (a class below). The buttons and the
     focus ring of base.css follow it. */
  --accent: #2450e6;
  --accent-hover: color-mix(in srgb, var(--accent) 86%, #000);
  --accent-text: var(--accent);
  --focus: var(--accent);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto; /* the card in the free height, then "Made with", then the report */
  justify-items: center;
  gap: 0.75rem;
  min-height: 100dvh;
  padding: 1rem 1rem 0;
  /* A browser without color-mix keeps the white of the body */
  background: linear-gradient(color-mix(in srgb, var(--accent) 17%, #fff), color-mix(in srgb, var(--accent) 6%, #fff) 24rem);
  color: #0d0f15;
  text-align: center;
  /* The site's light colours, whatever theme the builder around the preview is in */
  --ink: #0d0f15;
  --muted: #5b6172;
  --line: #e2e4ea;
  --surface: #fff;
  --bg: #fff;
  color-scheme: light;
}

/* The owner's colour: the menu's eight (ACCENTS in menu-rules.js), a class on the page. A fixed
   list, because the page takes no style attribute. Cobalt is the page's own and has no class. */
.acc-ink { --accent: #0d0f15; }
.acc-terracotta { --accent: #a63d17; }
.acc-burgundy { --accent: #8a1f3c; }
.acc-forest { --accent: #1c6240; }
.acc-teal { --accent: #0b5f6b; }
.acc-plum { --accent: #6a2c82; }
.acc-coffee { --accent: #6b4423; }

/* Black tints the ground grey, which reads as a page switched off: it gets a warm paper instead,
   and so does an own colour without colour (own-plain: accentClass in review-rules.js) */
.review-page.acc-ink,
.review-page.own-plain {
  background: linear-gradient(#ebe7df, #f6f4ef 24rem);
}

/* The card stands at a set distance from the top, a little above the middle of a phone, and never
   in the middle of the free height: it must not move under the finger when the private form opens. */
.rv-card {
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1.25rem;
  width: min(100%, 24rem);
  margin-block: clamp(3.5rem, 18vh - 3rem, 10rem) 1rem; /* the top one: the half of the logo that stands above the card, and air */
  padding: 0 1.25rem 1.5rem;
  border-radius: 1.75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(13 15 21 / 0.05), 0 18px 40px -16px color-mix(in srgb, var(--accent) 35%, transparent);
}

.rv-logo {
  width: 5.5rem;
  height: 5.5rem;
  margin-top: -2.75rem; /* across the card's top edge */
  border: 4px solid #fff;
  border-radius: 1.5rem;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 6px 16px -6px rgb(13 15 21 / 0.25);
}

/* No logo: the first letter of the name, on the page's colour */
.rv-mono {
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
}

.rv-name {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.rv-ask {
  margin: -0.75rem 0 0.25rem;
  color: #5b6172;
  font-size: 1.0625rem;
}

.rv-ways {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* nothing inside (the bot check's box) can widen the column */
  gap: 0.5rem;
  width: 100%;
}

/* The one size of both ways */
.rv-btn {
  display: flex;
  width: 100%;
  min-height: 3.75rem;
  padding: 0.5rem 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.2;
  white-space: normal;
  list-style: none;
}

.rv-btn::-webkit-details-marker {
  display: none;
}

.rv-private[open] > summary {
  border-color: #0d0f15;
}

/* Under each way, what happens next: one rule for both lines, and both always show */
.rv-next {
  margin: 0 0 0.625rem;
  color: #5b6172;
  font-size: 0.875rem;
}

.rv-next:last-child {
  margin-bottom: 0;
}

.rv-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
  margin-top: 1rem;
  text-align: start;
}

.rv-form .label,
.rv-form .help,
.rv-form .error {
  margin: 0;
}

.rv-form .field {
  display: grid;
  gap: 0.375rem;
}

.rv-form textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.rv-form .btn {
  min-height: 3.5rem;
}

/* The bot check takes room only when it has something to ask */
.rv-bot:empty {
  display: none;
}

/* On a 320px phone the column is 280px and the box 300px: it takes 10px of each side's margin (as in auth-panel.css) */
@media (max-width: 22rem) {
  .rv-bot {
    margin-inline: -0.625rem;
  }
}

/* Green means done, as everywhere on the site */
.rv-sent {
  margin: 0;
  padding: 0.875rem 1rem;
  border-radius: 1rem;
  background: #e6f3ec;
  color: #0c6b35; /* --good of base.css, on its tint */
  font-weight: 700;
  text-align: center;
}

/* The foot: "Made with" (in the block, so the builder's phone shows it too), then the report */
.rv-made,
.rv-foot {
  margin: 0;
  color: #5b6172;
  font-size: 0.875rem;
}

.rv-made a {
  color: inherit;
  font-weight: 600;
}

.rv-made:last-child {
  padding-bottom: 1.25rem; /* the builder's phone: no report under it */
}

.rv-foot {
  width: min(100%, 24rem);
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}

/* "Report this page" reads as a quiet link, without the browser's triangle */
.rv-foot summary {
  display: inline-block;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.rv-foot summary::-webkit-details-marker {
  display: none;
}

/* In the builder's preview (the phone of builder.css) */
.phone-screen .review-page {
  min-height: 100%;
  padding-inline: 0.75rem;
  font-size: 0.9375rem;
}