/* The builder of a Google review page (google-review-qr-code/index.html), which is also the page
   search engines list. The frame, the steps and the last step are the card builder's
   (builder.css), the preview's block is review.css. This file adds what only this page has: its
   heading, the strip's face on a phone, the logo's row, the page's colour, and the questions of a
   tool page (the rules of generator.css for .guide, copied: that sheet lays out a whole other
   page). Loaded after builder.css, so a rule here wins over one there.
   The heading shows to a new visitor on the first step only: review-builder.js then takes it off
   the screen (sr-only of base.css), and the page is a builder: numbered steps, a wider form, and
   at the last step what a publish brings. */
.rb-intro {
  display: grid;
  gap: 0.75rem;
}

.rb-h1 {
  font-size: clamp(1.625rem, 5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.rb-intro .b-sub {
  margin: 0;
}

/* A refusal under a field: clear of the field's focus ring (builder.css pulls it up into it, for
   a grid where the sentence has a cell of its own; here field and sentence share one) */
.rb .grid .error {
  margin-top: 0.5rem;
}

/* The state over the preview stands under the caption, not on it (builder.css pulls it up into a
   margin that this page fills with the caption) */
.rb .b-preview .state-pill {
  margin-top: 0;
}

.rb-cap {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}

/* The logo: a small picture, the button that picks it, the word that removes it */
.rb-logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.rb-thumb {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  object-fit: cover;
  background: #fff;
}

.rb-logo .text-link {
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  color: var(--danger);
  font: 600 1rem var(--sans);
  cursor: pointer;
}

/* The steps, numbered, with a short line between them */
.rb .b-steps {
  align-items: center;
  gap: 0.5rem;
  margin-block: 0.75rem 1.5rem; /* room from the top bar above and from the first field below */
  counter-reset: step;
}

@media (min-width: 56rem) {
  .rb .b-steps {
    margin-block: 1.25rem 2.5rem;
  }
}

.rb .b-steps li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  counter-increment: step;
}

.rb .b-steps li + li::before {
  content: "";
  width: 1.5rem;
  height: 1.5px;
  background: var(--line);
}

.rb .b-steps button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.875rem 0 0.375rem;
}

.rb .b-steps button::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 0.8125rem;
  font-weight: 700;
}

.rb .b-steps button[aria-current]::before {
  background: var(--accent);
  box-shadow: none;
  color: #fff;
}

/* The page's colour: the swatches of the card builder (.swatch in builder.css), each coloured by
   its class of review.css; the first, cobalt, has none. The ninth is the card builder's rainbow
   "+" (the browser's colour field), which wears the colour once one is picked (review-builder.js) */
.rb-accents .swatches {
  --accent: #2450e6;
}

.rb-accents .swatch input[type="radio"] + span {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); /* the ring: the black circle shows on the dark page */
}

.rb-accents legend {
  margin-bottom: 0.5rem;
  padding: 0;
}

/* On the dark page the black circle needs a ring that shows */
:root[data-theme="dark"] .rb-accents .swatch .acc-ink {
  outline-color: var(--muted);
}

/* A colour of the owner's own that white letters do not read on: what customers see instead, and the one-tap fix (amber, as the menu's) */
.rb-weak {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  color: var(--warn);
}

.rb-weak p {
  margin: 0;
  font-size: 0.9375rem;
}

.rb-weak .btn {
  border-color: transparent;
  background: var(--surface);
  color: var(--ink);
}

/* A phone: two rows, five and four, not six and three */
@media (max-width: 30rem) {
  .rb-accents .swatches {
    display: grid;
    grid-template-columns: repeat(5, 2.75rem);
    justify-content: start;
    gap: 0.75rem;
  }
}

/* The last step, until the page is online: what a publish brings. A small sheet of paper, tilted
   (the sign, drawn: its code is an icon), and three lines. */
/* One measure for both steps: the last one is as wide as the fields of the first (.b-form) */
.rb .pub-q {
  max-width: none;
}

.rb-after {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
}

.rb-sign {
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  width: 7rem;
  padding: 0.75rem 0.5rem;
  border: 1.5px solid #0d0f15; /* the real sign's frame (account.css) */
  border-radius: 0.625rem;
  background: #fff;
  box-shadow: var(--shadow);
  color: #0d0f15;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transform: rotate(-3deg);
}

.rb-sign .icon {
  width: 3.25rem;
  height: 3.25rem;
}

/* As on the real sign: the name first, and the address as a small pill under the code */
.rb-sign-name {
  order: -1;
  max-width: 100%;
  overflow: hidden;
  color: #5b6172;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-sign::after {
  content: "";
  width: 3.5rem;
  height: 0.5rem;
  border: 1px solid #0d0f15;
  border-radius: 999px;
}

/* Once the page is online, the same frame holds its real QR code and the ways to the sign and the page */
.rb-mine-qr {
  width: 7rem;
  height: 7rem;
  padding: 0.375rem;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: var(--shadow);
}

.rb-after > div {
  min-width: 0;
}

.rb-after p.rb-next {
  margin-top: 0.375rem;
  padding: 0;
}

.rb-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.rb-after h3 {
  font-size: 1rem;
  font-weight: 700;
}

.rb-next {
  display: grid;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
  padding-inline-start: 1.25rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

@media (max-width: 30rem) {
  .rb-after {
    grid-template-columns: minmax(0, 1fr);
  }

  .rb-sign {
    display: none;
  }

  .rb-mine-qr {
    justify-self: center;
  }
}

/* The strip of a narrow screen (.b-peek in builder.css) wears the page's face: its logo or its
   letter, its name, its line, in a row. White, like the page itself, whatever the theme (its eye
   button too). Its colour is the page's (a class of review.css), cobalt without one. */
.rb-peek {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  column-gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.375rem 3.5rem 0.375rem 0.375rem; /* the right one: the button's room */
  border-radius: 1.75rem;
  outline: 1px solid #e2e4ea;
  outline-offset: -1px;
  background: #fff;
  color: #0d0f15;
  text-align: start;
}

.rb-peek:not([class*="acc-"]) {
  --accent: #2450e6;
}

.b-peek:active .rb-peek {
  filter: brightness(0.94); /* it can be pressed */
}

.rb-peek .rv-logo {
  grid-row: span 2;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  border: 0;
  border-radius: 0.75rem;
  box-shadow: none;
  font-size: 1.25rem;
}

.rb-peek p {
  overflow: hidden;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-peek .rb-peek-line {
  color: #5b6172;
  font-size: 0.875rem;
  font-weight: 400;
}

/* At the last step "Not online yet" stands where the line was */
.b-peek.is-marked .rb-peek-line {
  visibility: hidden;
}

.rb-peek ~ #peek-open {
  border-color: #e3e5ec;
  background: #fff;
  color: #0d0f15;
}

/* "Not online yet" is said once on a screen. A phone: by the strip, where the step's own pill
   then leaves the address alone. A laptop: beside the address, and not again over the phone. */
@media (max-width: 55.99rem) {
  .rb .b-peek.is-marked ~ .pub #state-wait {
    display: none;
  }

  /* The whole preview, opened from the strip: the page starts high in the drawn phone, so that
     both ways stand clear of "Back to the form", which floats at the bottom of the screen */
  .rb .b-preview {
    padding-top: 0.75rem;
  }

  .rb .rb-cap {
    display: none;
  }

  /* and the site's own bar gives its room to the phone while the whole preview shows */
  body:has(.rb[data-view="preview"]) .b-top {
    display: none;
  }

  .rb .phone-screen .rv-card {
    margin-top: 3.5rem;
  }
}

/* A laptop: the form gets the room it needs, the phone a column of its own width */
@media (min-width: 56rem) {
  .rb #preview-wait {
    display: none;
  }

  /* Continue (and Back) stay in sight at the bottom of the window, however long the first step is */
  .rb .b-nav {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: -0.75rem -0.5rem; /* wider than the form: a ticked colour's ring passes under it whole */
    padding: 0.75rem 0.5rem;
    background: linear-gradient(transparent, var(--bg) 0.75rem); /* the fields fade out under it */
  }

  /* "Online" too is said once: beside the address */
  .rb:has(#state-on:not([hidden])) #preview-on {
    display: none;
  }

  .rb.builder {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: clamp(2rem, 5vw, 5rem);
  }

  .rb .b-form {
    max-width: 40rem;
  }
}

@media (max-width: 55.99rem) {
  /* The first field shows without scrolling */
  .rb-h1 {
    font-size: 1.5rem;
  }
}

/* The questions under the builder, and the foot with the six products: as on the tool pages */
.guide {
  width: min(100% - 2.5rem, 44rem);
  margin-inline: auto;
  padding-block: clamp(3rem, 8vw, 5rem) 1rem;
}

.guide h2 {
  margin-top: 2rem;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.guide h2:first-child {
  margin-top: 0;
}

.guide p {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 1.0625rem;
  text-wrap: pretty;
}

/* The small sign of the last step reads as a real sign of paper, like the business card of the
   account page (.paper in base.css): tilted in perspective, a thin edge, a layered shadow, lifted
   and straightened under the pointer; still for someone who asks for less motion. */
.rb-sign {
  transform: perspective(40rem) rotateX(8deg) rotateY(-14deg) rotate(-3deg);
  box-shadow: 0 1px 0 #dfe1e6, 0 2px 0 #cdd0d7, 0 10px 16px -6px rgb(13 15 21 / 0.22), 0 22px 32px -12px rgb(13 15 21 / 0.28);
  transition: transform 0.5s var(--ease);
}

@media (hover: hover) {
  .rb-sign:hover {
    transform: perspective(40rem) translateY(-0.25rem) rotate(-1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rb-sign,
  .rb-sign:hover {
    transform: rotate(-3deg);
    transition: none;
  }
}