.rn-search-page{
  background: #ffffff;
  background: var(--rn-page-bg);
}

body:has(#rn-search-page-root),
body:has(#rn-search-page-root) main,
body.rn-search-shell-page,
body.rn-search-shell-page main{
  background: var(--rn-page-bg-flat);
}

body:has(#rn-search-page-root) #rn-top-nav,
body.rn-search-shell-page #rn-top-nav{
  border-bottom-color: var(--rn-nav-border) !important;
  background: var(--rn-nav-bg) !important;
  box-shadow: none !important;
}

.rn-search-page .rn-shell{
  max-width: 42rem;
  padding-top: 8px;
  padding-bottom: 80px;
}

.rn-search-surface{
  display: grid;
  gap: 16px;
}

.rn-search-header{
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.rn-search-back,
.rn-search-cancel{
  border: 0;
  background: transparent;
  color: var(--rn-text);
  font: inherit;
}

.rn-search-back{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.rn-search-back svg{
  width: 20px;
  height: 20px;
}

.rn-search-cancel{
  padding: 0 8px 0 0;
  color: var(--rn-brand-strong);
  font-size: 16px;
  font-weight: 700;
}

.rn-search-field{
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--rn-border) 92%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rn-surface-strong) 95%, white 5%);
  box-shadow: var(--rn-shadow-xs);
}

.rn-search-field__icon,
#rn-search-clear{
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--rn-text-soft);
}

.rn-search-field__icon svg,
#rn-search-clear svg{
  width: 16px;
  height: 16px;
}

#rn-search-clear{
  border: 0;
  border-radius: 999px;
  background: transparent;
}

#rn-search-input{
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--rn-text);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

#rn-search-input::-webkit-search-decoration,
#rn-search-input::-webkit-search-cancel-button,
#rn-search-input::-webkit-search-results-button,
#rn-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

#rn-search-input:focus,
#rn-search-input:focus-visible{
  outline: none;
  box-shadow: none;
}

.rn-search-field:focus-within{
  border-color: color-mix(in srgb, var(--rn-brand) 62%, white 38%);
  box-shadow: var(--rn-focus-ring), var(--rn-shadow-xs);
}

#rn-search-input::placeholder{
  color: var(--rn-text-muted);
}

.rn-search-scopes{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.rn-search-scopes::-webkit-scrollbar{
  display: none;
}

.rn-search-scope{
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--rn-border) 92%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rn-surface-strong) 95%, white 5%);
  color: var(--rn-text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  box-shadow: var(--rn-shadow-xs);
}

.rn-search-scope.is-active{
  border-color: color-mix(in srgb, var(--rn-brand) 62%, white 38%);
  background: color-mix(in srgb, var(--rn-brand-soft) 86%, white 14%);
  color: var(--rn-brand-strong);
}

.rn-search-section{
  display: grid;
  gap: 8px;
}

.rn-search-section + .rn-search-section{
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--rn-border) 76%, transparent);
}

.rn-search-section__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.rn-search-section__title{
  margin: 0;
  color: var(--rn-text);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rn-search-section__action{
  border: 0;
  background: transparent;
  color: var(--rn-brand-strong);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}

.rn-search-list{
  display: grid;
}

.rn-search-row{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rn-border) 64%, transparent);
  border-radius: 0;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: transparent;
  box-shadow: none;
}

.rn-search-list > :last-child{
  border-bottom: 0;
}

.rn-search-row__copy{
  min-width: 0;
}

.rn-search-row__icon,
.rn-search-row__thumb{
  flex-shrink: 0;
  justify-self: start;
  overflow: hidden;
}

.rn-search-row__icon{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--rn-brand) 18%, var(--rn-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--rn-brand-soft) 56%, white 44%);
  color: var(--rn-brand-strong);
  font-size: 16px;
  font-weight: 700;
}

.rn-search-row__icon--recent svg{
  width: 16px;
  height: 16px;
}

.rn-search-row__thumb{
  display: grid;
  place-items: center;
}

.rn-search-row__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rn-search-row__thumb--avatar{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  justify-self: center;
}

.rn-search-row__thumb--mountain{
  width: 64px;
  height: 48px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--rn-brand-soft) 56%, white 44%);
}

.rn-search-row__thumb--placeholder{
  border: 1px solid color-mix(in srgb, var(--rn-brand) 16%, var(--rn-border));
  color: var(--rn-brand-strong);
  font-size: 20px;
  font-weight: 700;
}

.rn-search-row__eyebrow{
  margin-bottom: 8px;
  color: var(--rn-brand-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.rn-search-row__title{
  color: var(--rn-text);
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.rn-search-row__meta{
  margin-top: 8px;
  color: var(--rn-text-soft);
  font-size: 12px;
  line-height: 1.35;
}

.rn-search-row__detail{
  margin-top: 8px;
  color: var(--rn-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.rn-search-row__action{
  border: 0;
  background: transparent;
  color: var(--rn-text-muted);
  font-size: 20px;
  justify-self: end;
}

.rn-search-row--recent{
  grid-template-columns: 32px minmax(0, 1fr) 24px;
  gap: 12px;
  min-height: 48px;
  padding: 12px 0;
}

.rn-search-row--recent .rn-search-row__icon{
  width: 32px;
  height: 32px;
}

.rn-search-row--recent .rn-search-row__icon--recent svg{
  width: 14px;
  height: 14px;
}

.rn-search-row--recent .rn-search-row__copy{
  justify-self: start;
}

.rn-search-row--recent .rn-search-row__title{
  font-size: 15px;
  line-height: 1.2;
}

.rn-search-row--recent .rn-search-row__action{
  font-size: 18px;
}

.rn-search-row--mountain .rn-search-row__copy,
.rn-search-row--hiker .rn-search-row__copy,
.rn-search-row--guide .rn-search-row__copy,
.rn-search-row--log .rn-search-row__copy{
  align-self: center;
}

.rn-search-empty{
  padding-top: 8px;
  color: var(--rn-text-soft);
  font-size: 14px;
}

@media (hover: hover){
  .rn-search-row:hover{
    color: inherit;
    background: color-mix(in srgb, var(--rn-surface-soft) 55%, transparent);
  }
}

@media (min-width: 600px){
  .rn-search-page .rn-shell{
    padding-top: 16px;
  }
}