/* Trust & Safety pages (for renters and for hosts).
   Flat and open per the interface standard: shared roles only, pill actions,
   green for status only. The one dark panel on each page is its picture. */

.trust-page {
  width: 100%;
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
}

.trust-page__wrap {
  box-sizing: border-box;
  max-width: 70rem;
  margin: 0 auto;
  padding-inline: var(--spacing-lg);
}

.trust-page p,
.trust-page h1,
.trust-page h2,
.trust-page h3 {
  margin: 0;
}

/* ---- Hero ---- */

.trust-hero {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-top: var(--spacing-xl);
}

.trust-hero__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg) 3.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.trust-hero__main {
  display: flex;
  flex: 1 1 30rem;
  flex-direction: column;
  gap: var(--spacing-base);
  min-width: 0;
}

.trust-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12) var(--spacing-base);
  align-items: center;
}

.trust-hero__label {
  color: var(--text-supporting);
  font-size: var(--type-muted-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-muted-line-height);
}

.trust-hero__title {
  max-width: 38.75rem;
  font-size: var(--type-display-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--letter-spacing-tight);
}

.trust-hero__side {
  display: flex;
  flex: 1 1 22.5rem;
  flex-direction: column;
  gap: var(--spacing-base);
  min-width: 0;
  max-width: 28.75rem;
}

.trust-hero__lead {
  color: var(--text-supporting);
}

.trust-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  align-items: center;
}

.trust-actions__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  font-size: var(--type-muted-size);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 40rem) {
  .trust-hero__title {
    font-size: var(--font-size-3xl);
  }
}

/* ---- For renters / For hosts switch ---- */

.trust-audience-switcher {
  display: inline-flex;
  padding: var(--spacing-xs);
  border-radius: var(--radius-chip);
  background: var(--surface-card);
}

.trust-audience-switcher__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-compact);
  padding: 0 var(--spacing-base);
  border-radius: var(--radius-chip);
  color: var(--text-primary);
  font-size: var(--type-muted-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.trust-audience-switcher__item:hover {
  background: var(--surface-card-hover);
}

.trust-audience-switcher__item.is-active {
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.trust-audience-switcher__item:focus-visible {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
}

/* ---- Picture ---- */

/* The panel is dark in both themes, so it takes the dark palette directly
   instead of the roles, which follow the page's theme. */
.trust-scene {
  --trust-scene-ground: var(--color-dark-bg);
  --trust-scene-structure: var(--color-dark-surface-raised);
  --trust-scene-line: var(--color-dark-border-control);
  --trust-scene-bright: var(--color-dark-text);
  --trust-scene-ok: var(--color-dark-success);
  --trust-scene-ok-fill: color-mix(in srgb, var(--color-dark-success) 16%, var(--color-dark-bg));

  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  margin: 0;
}

/* On a dark page the panel steps down so it still reads as its own surface. */
html.dark .trust-scene {
  --trust-scene-ground: var(--color-dark-fill-subtle);
  --trust-scene-ok-fill: color-mix(in srgb, var(--color-dark-success) 16%, var(--color-dark-fill-subtle));
}

.trust-scene__stage {
  overflow-x: auto;
  border-radius: var(--radius-card);
}

.trust-scene__art {
  display: block;
  width: 100%;
  min-width: 47.5rem;
  height: auto;
  font-family: inherit;
}

.trust-scene__ground,
.trust-scene__cutout {
  fill: var(--trust-scene-ground);
}

.trust-scene__struct {
  fill: var(--trust-scene-structure);
  stroke: var(--trust-scene-line);
  stroke-width: 1.5;
}

.trust-scene__paint {
  fill: none;
  stroke: var(--trust-scene-line);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-scene__paint--lane {
  stroke-dasharray: 20 18;
  opacity: 0.6;
}

.trust-scene__ring {
  fill: none;
  stroke: var(--trust-scene-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 9;
}

.trust-scene__item,
.trust-scene__leader-dot {
  fill: var(--trust-scene-line);
}

.trust-scene__bright {
  fill: var(--trust-scene-bright);
}

.trust-scene__bright-line {
  fill: none;
  stroke: var(--trust-scene-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-scene__bright-line--thin {
  stroke-width: 2.5;
}

.trust-scene__bright-line--thick {
  stroke-width: 6;
}

.trust-scene__booked {
  fill: var(--trust-scene-ok-fill);
  stroke: var(--trust-scene-ok);
  stroke-width: 2.5;
}

.trust-scene__booked-fill {
  fill: var(--trust-scene-ok-fill);
}

.trust-scene__ok-pill {
  fill: var(--trust-scene-ok-fill);
  stroke: var(--trust-scene-ok);
  stroke-width: 1.5;
}

.trust-scene__ok-dot {
  fill: var(--trust-scene-ok);
}

.trust-scene__ok-line {
  fill: none;
  stroke: var(--trust-scene-ok);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-scene__ok-text {
  fill: var(--trust-scene-ok);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.trust-scene__ok-text--center,
.trust-scene__label--center,
.trust-scene__num {
  text-anchor: middle;
}

.trust-scene__num {
  fill: var(--trust-scene-ground);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.trust-scene__label {
  fill: var(--trust-scene-bright);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.trust-scene__leader {
  fill: none;
  stroke: var(--trust-scene-line);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.trust-scene__caption {
  color: var(--text-caption);
  font-size: var(--type-muted-size);
  line-height: var(--type-muted-line-height);
}

/* ---- Numbered steps under the picture ---- */

.trust-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-steps__item {
  display: flex;
  flex: 1 1 11.25rem;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.trust-steps--four .trust-steps__item {
  flex-basis: 13.75rem;
}

.trust-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-chip);
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  font-size: var(--type-muted-size);
  font-weight: var(--font-weight-semibold);
}

.trust-steps__title,
.trust-columns__title,
.trust-rules__title {
  font-size: var(--type-card-title-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.trust-steps__body,
.trust-rules__body {
  color: var(--text-supporting);
  font-size: var(--type-muted-size);
  line-height: var(--type-muted-line-height);
}

/* ---- Sections ---- */

.trust-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding-top: 4.5rem;
}

.trust-section--split {
  flex-flow: row wrap;
  gap: var(--spacing-40) 4rem;
  align-items: flex-start;
}

.trust-section--last {
  padding-bottom: 4.5rem;
}

.trust-section__title {
  font-size: var(--type-page-title-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-page-title-line-height);
}

.trust-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem var(--spacing-40);
}

.trust-columns__item {
  display: flex;
  flex: 1 1 17.5rem;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.trust-columns__item > .ui-tag {
  align-self: flex-start;
}

.trust-columns__body {
  color: var(--text-supporting);
}

/* ---- What's protected ---- */

.trust-protect {
  display: flex;
  flex: 1 1 26.25rem;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-width: 0;
}

.trust-protect__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.trust-protect__item > .ui-status {
  align-self: flex-start;
}

.trust-protect__item--plain .trust-protect__body {
  color: var(--text-supporting);
}

.trust-protect__note {
  color: var(--text-supporting);
  font-size: var(--type-muted-size);
  line-height: var(--type-muted-line-height);
}

.trust-status-icon {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-status-icon--tag {
  width: 0.875rem;
  height: 0.875rem;
  stroke-width: 1.5;
}

/* ---- Soft card: sample booking record, condition record ---- */

.trust-card {
  display: flex;
  flex: 1 1 23.75rem;
  flex-direction: column;
  gap: var(--spacing-20);
  box-sizing: border-box;
  min-width: 0;
  max-width: 30rem;
  padding: 1.75rem;
  border-radius: var(--radius-card);
  background: var(--surface-card);
}

.trust-card__head {
  display: flex;
  gap: var(--spacing-base);
  align-items: flex-start;
  justify-content: space-between;
}

.trust-card__kicker,
.trust-card__sub {
  color: var(--text-supporting);
  font-size: var(--type-muted-size);
  line-height: var(--type-muted-line-height);
}

.trust-card__title {
  font-size: var(--type-section-title-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-section-title-line-height);
}

.trust-card__head > .ui-status {
  flex: none;
}

.trust-card__rows {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.trust-card__row {
  display: flex;
  gap: var(--spacing-lg);
  justify-content: space-between;
  padding: var(--spacing-12) 0;
  border-top: 1px solid var(--border-default);
  font-size: var(--type-muted-size);
  line-height: var(--type-muted-line-height);
}

.trust-card__row:last-child {
  padding-bottom: 0;
}

.trust-card__row dt {
  color: var(--text-supporting);
}

.trust-card__row dd {
  margin: 0;
  font-weight: var(--font-weight-medium);
  text-align: right;
}

.trust-card__foot {
  padding-top: var(--spacing-base);
  border-top: 1px solid var(--border-default);
  color: var(--text-supporting);
  font-size: var(--type-muted-size);
  line-height: var(--type-muted-line-height);
}

.trust-frames {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-base);
}

.trust-frames__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  font-size: var(--type-muted-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-muted-line-height);
}

.trust-frame {
  display: block;
  width: 100%;
  height: auto;
}

.trust-frame__paper {
  fill: var(--surface-raised);
}

.trust-frame__unit {
  fill: var(--surface-card);
  stroke: var(--text-primary);
  stroke-width: 2.5;
}

.trust-frame__door {
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 4;
  stroke-linecap: round;
}

.trust-frame__corners {
  fill: none;
  stroke: var(--border-control);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- House rules ---- */

.trust-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem var(--spacing-40);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-rules__item {
  display: flex;
  flex: 1 1 17.5rem;
  gap: var(--spacing-base);
  min-width: 0;
}

.trust-rules__num {
  flex: none;
  color: var(--border-control);
  font-size: var(--type-display-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.trust-rules__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* ---- Closing band ---- */

.trust-band {
  background: var(--surface-subtle);
}

.trust-band__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg) var(--spacing-2xl);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--spacing-2xl);
}

.trust-band__text {
  display: flex;
  flex: 1 1 26.25rem;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.trust-band__title {
  font-size: var(--type-section-title-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-section-title-line-height);
}

.trust-band__body {
  max-width: 35rem;
  color: var(--text-supporting);
}

.trust-band .ui-button--secondary {
  background: var(--surface-raised);
}