/*
 * Purpose: Styles for the reusable page sections rendered from the ACF section
 * library - hero, trust bar, feature grid, steps, cards, FAQ and CTA banners.
 */

/* --------------------------------------------------------------- HERO */

/*
 * No overflow clipping here. The search suggestions open downwards out of this
 * section, and overflow: hidden cut the panel off at the hero's bottom edge.
 * The hero image is clipped by .rh-ratio, which is what that rule was actually
 * protecting, so nothing else needs it.
 */
.rh-hero {
  position: relative;
  background-color: var(--rh-surface);
  padding-block: var(--space-48) var(--space-64);
}

@media (min-width: 1024px) {
  .rh-hero {
    padding-block: var(--space-80) var(--space-96);
  }
}

.rh-hero__inner {
  display: grid;
  gap: var(--space-40);
  align-items: center;
}

@media (min-width: 1024px) {
  .rh-hero--has-media .rh-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-64);
  }
}

.rh-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--r-pill);
  background-color: var(--rh-lime-light);
  color: var(--rh-lime-text-strong);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-16);
}

.rh-hero__title {
  font-size: var(--fs-h1);
  /*
   * Wide enough for the longest authored line, so the explicit break in the
   * heading is what decides the wrap rather than the container. A narrower
   * measure re-wrapped the first line and produced three lines instead of two.
   */
  max-width: 22ch;
  text-wrap: pretty;
}

/* On small screens the text wraps naturally; a forced break would be too wide. */
@media (max-width: 479px) {
  .rh-hero__title {
    max-width: none;
  }

  .rh-hero__title br {
    display: none;
  }
}

.rh-hero__lead {
  margin-top: var(--space-16);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-secondary);
  max-width: 52ch;
}

.rh-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-20);
  margin-top: var(--space-24);
}

.rh-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--rh-text-primary);
}

.rh-hero__trust-item .rh-icon {
  width: 18px;
  height: 18px;
  color: var(--rh-teal);
  flex-shrink: 0;
}

.rh-hero__quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-24);
}

.rh-hero__quick-label {
  width: 100%;
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
  margin-bottom: var(--space-4);
}

.rh-hero__quick-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--space-4) var(--space-16);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-pill);
  background-color: var(--rh-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--rh-text-primary);
}

.rh-hero__quick-link:hover {
  border-color: var(--rh-teal);
  color: var(--rh-teal);
  text-decoration: none;
}

.rh-hero__media img {
  border-radius: var(--r-media);
}

/* ---------------------------------------------------------- SEARCH PANEL */

.rh-searchbar {
  margin-top: var(--space-32);
  padding: var(--space-12);
  background-color: var(--rh-white);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
}

.rh-searchbar__row {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .rh-searchbar__row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.rh-searchbar__field {
  position: relative;
  display: flex;
  align-items: center;
}

.rh-searchbar__field .rh-icon {
  position: absolute;
  left: var(--space-16);
  width: 20px;
  height: 20px;
  color: var(--rh-text-secondary);
  pointer-events: none;
}

.rh-searchbar__input {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--space-12) var(--space-16) var(--space-12) var(--space-48);
  border: 1px solid transparent;
  border-radius: var(--r-input);
  background-color: var(--rh-white);
  font-size: var(--fs-body);
}

.rh-searchbar__input::placeholder {
  color: var(--rh-text-secondary);
}

.rh-searchbar__input:focus {
  outline: none;
  border-color: var(--rh-teal);
  background-color: var(--rh-white);
}

.rh-searchbar__input:focus-visible {
  outline: 2px solid var(--rh-focus);
  outline-offset: 1px;
}

/* ------------------------------------------------------------- TRUST BAR */

.rh-trustbar {
  display: grid;
  gap: var(--space-24);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .rh-trustbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .rh-trustbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-32);
  }
}

.rh-trustbar__item {
  display: flex;
  gap: var(--space-16);
}

.rh-trustbar__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-input);
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
}

.rh-trustbar__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-4);
}

.rh-trustbar__text {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-secondary);
}

/* ------------------------------------------------------------ TYPE TILES */

.rh-type-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16);
  min-height: 112px;
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
  color: var(--rh-text-primary);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.rh-type-tile:hover {
  border-color: var(--rh-teal);
  text-decoration: none;
  transform: translateY(-2px);
}

.rh-type-tile__icon {
  color: var(--rh-teal);
}

.rh-type-tile__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.rh-type-tile__count {
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
  margin-top: auto;
}

/* ---------------------------------------------------------- FEATURE GRID */

.rh-feature {
  padding: var(--space-24);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
  height: 100%;
}

.rh-section--surface .rh-feature {
  background-color: var(--rh-white);
}

.rh-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-16);
  border-radius: var(--r-input);
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
}

.rh-feature__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-8);
}

.rh-feature__text {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-secondary);
}

/* ------------------------------------------------------------------ STEPS */

.rh-steps {
  display: grid;
  gap: var(--space-24);
  counter-reset: rh-step;
}

@media (min-width: 768px) {
  .rh-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .rh-steps--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rh-steps--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rh-step {
  counter-increment: rh-step;
  padding-top: var(--space-16);
  border-top: 2px solid var(--rh-border);
}

.rh-step::before {
  content: counter(rh-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-12);
  border-radius: var(--r-pill);
  background-color: var(--rh-dark);
  color: var(--rh-text-inverse);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.rh-step__title {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-8);
}

.rh-step__text {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-secondary);
}

/* ------------------------------------------------------------ CHECK LIST */

.rh-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.rh-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--fs-body);
  color: var(--rh-text-secondary);
}

.rh-checklist__item .rh-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--rh-teal);
}

.rh-section--dark .rh-checklist__item {
  color: rgba(255, 255, 255, 0.82);
}

.rh-section--dark .rh-checklist__item .rh-icon {
  color: var(--rh-lime);
}

/* -------------------------------------------------------------------- FAQ */

/*
 * Two columns from tablet up. A single 820px column left most of the width
 * empty and pushed the list a long way down the page.
 */
.rh-faq {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-40);
  align-content: start;
}

@media (min-width: 768px) {
  .rh-faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rh-faq__item {
  border-bottom: 1px solid var(--rh-border);
}

.rh-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-20) 0;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  text-align: left;
  color: var(--rh-text-primary);
}

.rh-faq__trigger .rh-icon {
  flex-shrink: 0;
  color: var(--rh-teal);
  transition: transform var(--dur-fast) var(--ease-out);
}

.rh-faq__trigger[aria-expanded="true"] .rh-icon {
  transform: rotate(180deg);
}

.rh-faq__panel {
  padding-bottom: var(--space-20);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-secondary);
  max-width: 68ch;
}


/* ------------------------------------------------------------ CTA BANNER */

.rh-cta {
  text-align: center;
}

.rh-cta__inner {
  max-width: 640px;
  margin-inline: auto;
}

.rh-cta__title {
  font-size: var(--fs-h2);
}

.rh-cta__lead {
  margin-top: var(--space-16);
  font-size: var(--fs-body-lg);
  color: var(--rh-text-secondary);
}

.rh-section--dark .rh-cta__lead {
  color: rgba(255, 255, 255, 0.78);
}

.rh-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-32);
}

/* ---------------------------------------------------------- PRICING PLANS */

.rh-plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-24);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
  height: 100%;
}

.rh-plan--highlighted {
  border-color: var(--rh-teal);
  border-width: 2px;
}

.rh-plan__flag {
  align-self: flex-start;
  margin-bottom: var(--space-12);
}

.rh-plan__name {
  font-size: var(--fs-h4);
}

.rh-plan__summary {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

.rh-plan__price {
  margin-top: var(--space-20);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.rh-plan__period {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--rh-text-secondary);
}

.rh-plan__annual {
  margin-top: var(--space-8);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-plan__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-block: var(--space-24);
  padding-top: var(--space-20);
  border-top: 1px solid var(--rh-border);
}

.rh-plan__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

.rh-plan__feature .rh-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--rh-teal);
}

.rh-plan__cta {
  margin-top: auto;
}

.rh-plans-note {
  margin-top: var(--space-24);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
  text-align: center;
}

/* ------------------------------------------------------------ EMPTY STATE */

.rh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-48) var(--space-24);
  border: 1px dashed var(--rh-border-strong);
  border-radius: var(--r-card);
  background-color: var(--rh-surface);
  text-align: center;
}

.rh-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background-color: var(--rh-white);
  color: var(--rh-text-secondary);
}

.rh-empty__title {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
}

.rh-empty__text {
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
  max-width: 46ch;
}

/* ----------------------------------------------------------- BREADCRUMBS */

/*
 * Breadcrumbs sit directly under the header, so they carry the top spacing that
 * separates the page from the navigation. Without this the trail collides with
 * the header border.
 */
.rh-breadcrumbs {
  padding-block: var(--space-20) var(--space-8);
}

@media (min-width: 768px) {
  .rh-breadcrumbs {
    padding-block: var(--space-24) var(--space-12);
  }
}

.rh-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.rh-breadcrumbs__item a {
  color: var(--rh-text-secondary);
}

.rh-breadcrumbs__item a:hover {
  color: var(--rh-teal);
}

.rh-breadcrumbs__item [aria-current="page"] {
  color: var(--rh-text-primary);
  font-weight: var(--fw-medium);
  /* The current page can be long; let it truncate rather than wrap awkwardly. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 42ch;
}

/*
 * Punctuation, not content. It carries aria-hidden in the markup, so a screen
 * reader never reads it and WCAG 1.4.3 does not apply - the rule is explicitly
 * about text that conveys meaning. A contrast sweep will still flag it, which
 * is why this note exists: it is deliberate, and raising it to 4.5:1 would make
 * a slash compete with the links either side of it.
 */
.rh-breadcrumbs__sep {
  color: var(--rh-border-strong);
}


/* ----------------------------------------------------------------- LEGAL */

.rh-legal {
  padding-bottom: var(--space-64);
}

.rh-legal__head {
  padding-block: var(--rh-crumbs-gap) var(--space-24);
  border-bottom: 1px solid var(--rh-border);
}

.rh-legal__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}

.rh-legal__updated {
  margin-top: var(--space-8);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

.rh-legal__body {
  padding-top: var(--space-32);
}


/* --------------------------------------------------------------- NOTICES */

/*
 * Used by the property page, the owner plan screen and the OTP form. It lived
 * in pages/property.css, which only one of those three loads - on the other two
 * the icon stacked above the text as a plain block, with nothing separating the
 * notice from whatever followed it.
 */
.rh-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--r-card);
  font-size: var(--fs-small);
}

.rh-notice .rh-icon {
  flex-shrink: 0;
  /* Optical alignment with the first line of text, not the box. */
  margin-top: 2px;
}

.rh-notice--demo {
  margin-block: var(--space-24);
  border: 1px dashed var(--rh-warning);
  background-color: var(--rh-lime-light);
  color: var(--rh-text-primary);
}

/*
 * A neutral, informational notice - not a warning, not a demo banner. Teal-08
 * on white with a teal-20 hairline, so it reads as the site talking rather than
 * as something having gone wrong. Body ink on that tint is 10.9:1.
 *
 * Bottom margin only. It is used above a heading, where the space belongs
 * between the notice and what it introduces, not above it.
 */
.rh-notice--info {
  margin-block-end: var(--space-20);
  border: 1px solid var(--rh-teal-20);
  background-color: var(--rh-teal-08);
  color: var(--rh-text-body);
}

/*
 * When the notice opens a column - the dashboard panel, the property detail
 * main column - whatever is above it already provides the gap. Its own top
 * margin only pushed it away from the content it belongs to. Written against
 * :first-child rather than naming each container, so the next place it is used
 * is right without another rule.
 */
.rh-notice--demo:first-child {
  margin-top: 0;
}


/* --------------------------------------------------------- SEARCH SUGGEST */

/*
 * The type-ahead panel under the hero search bar. The field is the positioning
 * context, so the panel lines up with the input rather than the whole row.
 */
.rh-searchbar__field.js-suggest {
  position: relative;
}

.rh-suggest {
  position: absolute;
  top: calc(100% + var(--space-8));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  padding: var(--space-8);
  background-color: var(--rh-white);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  text-align: left;
}


.rh-suggest__label {
  padding: var(--space-4) var(--space-12) var(--space-8);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rh-text-secondary);
}

/*
 * Tall enough that all five suggestions are visible at once - the endpoint
 * never returns more. The cap is kept only so a short viewport scrolls instead
 * of the panel running off the bottom of the screen.
 */
.rh-suggest__list {
  display: grid;
  gap: var(--space-4);
  max-height: min(78vh, 560px);
  overflow-y: auto;
}

.rh-suggest__option {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--r-button);
  cursor: pointer;
}

.rh-suggest__option:hover,
.rh-suggest__option.is-active {
  background-color: var(--rh-surface);
}

.rh-suggest__image {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--r-button);
  object-fit: cover;
  background-color: var(--rh-surface-alt);
}

.rh-suggest__image--empty {
  display: block;
}

.rh-suggest__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rh-suggest__title {
  font-weight: var(--fw-semibold);
  color: var(--rh-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rh-suggest__meta {
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-suggest__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.rh-suggest__tag {
  padding: 1px var(--space-8);
  border-radius: var(--r-pill);
  background-color: var(--rh-surface);
  font-size: var(--fs-12);
  color: var(--rh-text-secondary);
}

.rh-suggest__tag--price {
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
  font-weight: var(--fw-semibold);
}


/* ------------------------------------------------------------- MAP BLOCK */

/*
 * template-parts/global/map-block.php is rendered by both the property detail
 * page and the place pages, so its styles have to be global too. They used to
 * sit in pages/place.css, which never loads on a single property - the iframe
 * there fell back to the browser default 2px inset border, which is the
 * two-tone edge that looked like a broken frame.
 */
.rh-map-block {
  display: grid;
  gap: var(--space-12);
}

.rh-map-block__embed {
  display: block;
  width: 100%;
  height: 360px;
  /* An iframe carries a UA border of its own; state it explicitly. */
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
}

/*
 * Without an API key the block is a link rather than an embed, so it is styled
 * to look deliberate rather than like a map that failed to load.
 */
.rh-map-block__link {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-teal-light);
  color: var(--rh-text-primary);
}

.rh-map-block__link:hover {
  border-color: var(--rh-teal);
  text-decoration: none;
}

.rh-map-block__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background-color: var(--rh-white);
  color: var(--rh-teal);
  flex-shrink: 0;
}

.rh-map-block__text {
  display: grid;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}

.rh-map-block__text span {
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

.rh-map-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.rh-map-block__note {
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}


/* ------------------------------------------------------- RULES / KEY-VALUE

   A label-and-value definition list. Used by the property rules panel and by
   the account profile screen ("What you are looking for"), so it must be here
   and not in a page stylesheet - it lived in pages/property.css, which never
   loads on /account/, and the browser default dd indent was showing instead.
   ------------------------------------------------------------------------ */

.rh-rules {
  display: grid;
  gap: var(--space-12);
  margin: 0;
}

@media (min-width: 768px) {
  .rh-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rh-rules__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--rh-border);
}

.rh-rules__label {
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

.rh-rules__value {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-align: right;
}

.rh-rules__other {
  margin-top: var(--space-16);
}

/* A checklist following body copy rather than opening its own column. */
.rh-checklist--spaced {
  margin-top: var(--space-24);
}

/* --------------------------------------------------------- CHECKLIST CELLS

   For a points list that owns its own column rather than trailing body copy.
   A single stacked column of four short lines leaves most of a half-width
   column empty, so each point becomes a cell and the set reads as a block
   balancing the text beside it.

   Two columns from 640px. An odd number of points simply leaves the last cell
   on its own row, which is correct - stretching it would misrepresent it as
   more important than the rest.
   ------------------------------------------------------------------------ */

.rh-checklist--cells {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 640px) {
  .rh-checklist--cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rh-checklist--cells .rh-checklist__item {
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-20);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

.rh-checklist--cells .rh-checklist__item .rh-icon {
  margin-top: 0;
}

/*
 * On a dark section the cell cannot be white without becoming the loudest
 * thing on the page, so it is a lift out of the background instead.
 */
.rh-section--dark .rh-checklist--cells .rh-checklist__item {
  border-color: rgb(255 255 255 / 14%);
  background-color: rgb(255 255 255 / 6%);
}

.rh-section--teal .rh-checklist--cells .rh-checklist__item {
  border-color: rgb(8 110 97 / 18%);
}

/* ------------------------------------------------------------------- CHAT

   The help panel. A launcher pinned to the corner, and a panel that opens
   above it. Deliberately quiet: it is help, not an advert, so it uses the
   brand colour once - on the launcher - and tints for everything inside.
   ------------------------------------------------------------------------ */

.rh-chat {
  position: fixed;
  right: var(--space-20);
  bottom: var(--space-20);
  z-index: var(--z-modal, 900);
}

@media (min-width: 768px) {
  .rh-chat {
    right: var(--space-32);
    bottom: var(--space-32);
  }
}

.rh-chat__launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--rh-teal);
  color: var(--rh-text-inverse);
  box-shadow: 0 6px 20px rgb(3 38 34 / 22%);
  cursor: pointer;
}

.rh-chat__launcher:hover {
  background-color: var(--rh-teal-hover);
}

.rh-chat__launcher:focus-visible {
  outline: 2px solid var(--rh-teal);
  outline-offset: 3px;
}

/* One button, two icons - whichever matches the current state is shown. */
.rh-chat__icon-close,
.rh-chat.is-open .rh-chat__icon-open {
  display: none;
}

.rh-chat.is-open .rh-chat__icon-close {
  display: block;
}

.rh-chat__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-12));
  width: min(360px, calc(100vw - var(--space-32)));
  max-height: min(560px, calc(100vh - var(--space-96)));
  overflow-y: auto;
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
  box-shadow: 0 12px 40px rgb(3 38 34 / 18%);
}

.rh-chat__head {
  padding: var(--space-20) var(--space-20) var(--space-12);
  background-color: var(--rh-teal-08);
  border-bottom: 1px solid var(--rh-border);
}

.rh-chat__title {
  font-weight: var(--fw-semibold);
  color: var(--rh-text-primary);
}

.rh-chat__note {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-secondary);
}

.rh-chat__body {
  padding: var(--space-12) var(--space-16);
}

/*
 * A `display` declaration beats the `hidden` attribute, so every one of these
 * panes stayed on screen at once even though the script was setting hidden
 * correctly. The attribute has to win, or `hidden` silently means nothing.
 */

.rh-chat__topics {
  display: grid;
  gap: var(--space-4);
}

.rh-chat__topic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-12);
  border: 0;
  border-radius: var(--r-input);
  background: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--rh-text-body);
  text-align: left;
  cursor: pointer;
}

.rh-chat__topic:hover {
  background-color: var(--rh-teal-04);
  color: var(--rh-teal);
}

.rh-chat__topic .rh-icon {
  flex-shrink: 0;
  color: var(--rh-text-secondary);
}

.rh-chat__answer {
  display: grid;
  gap: var(--space-12);
  justify-items: start;
  padding: var(--space-4);
}

.rh-chat__answer-q {
  font-weight: var(--fw-semibold);
  color: var(--rh-text-primary);
}

.rh-chat__answer-a {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-body);
}

.rh-chat__form {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-4);
}

.rh-chat__form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.rh-chat__foot {
  padding: var(--space-12) var(--space-20);
  border-top: 1px solid var(--rh-border);
  background-color: var(--rh-surface);
}

/* The panel would cover the whole screen on a phone otherwise. */
@media (max-width: 479px) {
  .rh-chat__panel {
    width: calc(100vw - var(--space-24));
  }
}

/* The brand mark inside the launcher. Sized here so the SVG cannot dictate it. */
.rh-chat__mark {
  width: 26px;
  height: 26px;
  display: block;
}

/* ----------------------------------------------------------------- AVATAR

   One component, two states: a photo when there is one, the person's initials
   when there is not. The initials state is a design in its own right, not a
   placeholder - most accounts will never upload anything.
   ------------------------------------------------------------------------ */

.rh-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  overflow: hidden;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

.rh-avatar--initials {
  background-color: var(--rh-teal-12);
  color: var(--rh-teal);
  /* Initials must never wrap or be selected as text. */
  white-space: nowrap;
  user-select: none;
}

.rh-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rh-avatar--lg {
  width: 84px;
  height: 84px;
  font-size: var(--fs-h5);
}

/* ------------------------------------------------------- AVATAR UPLOADER */

.rh-avatar-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--rh-border);
}

/*
 * A flex column with its own gap, not a block with margins on some children.
 * The upload error appeared flush against the button above it because a message
 * that is hidden most of the time is exactly the element nobody remembers to
 * give a margin. Letting the container own the rhythm means it cannot happen.
 */
.rh-avatar-field__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  min-width: 0;
}

.rh-avatar-field__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-4);
}

/*
 * The real input is visually hidden and the label is the control, so the button
 * can be styled. The input keeps its place in the tab order and stays reachable
 * by a screen reader, which is why this is not display:none.
 */
.rh-avatar-field label.rh-btn {
  cursor: pointer;
}

.rh-avatar-field .js-avatar-input:focus-visible + label,
.rh-avatar-field label.rh-btn:focus-within {
  outline: 2px solid var(--rh-teal);
  outline-offset: 2px;
}

@media (max-width: 479px) {
  .rh-avatar-field {
    flex-direction: column;
  }
}

/* A person shown beside their name in a list or table row. */
.rh-roster__avatar {
  width: 32px;
  height: 32px;
  margin-right: var(--space-8);
  vertical-align: middle;
}

.rh-record__avatar {
  width: 40px;
  height: 40px;
  margin-right: var(--space-12);
}