/*
  The agent picker, in the two places it appears: on the public
  application form (which is dressed by market.css) and on the landlord's
  application screen (which is dressed by style.css). Both of those set
  their own colours, so everything here is drawn out of the variables the
  page already carries - and where the market side has no such variable,
  a plain literal is used rather than a token that resolves to nothing.

  Nothing in here positions anything. It is a list and a box.

  One thing it DOES have to fight: the application form styles every
  input in it as a full-width field (`.mk-apply input { display:block;
  width:100% }`), which is right for a phone number and very wrong for a
  radio button - left alone it draws a radio the width of the card with
  the words pushed off the side. So the two radios say their own size.
*/

.ap-choice {
  display: grid;
  gap: 10px;
  margin: 6px 0 14px;
}
.ap-choice label {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid var(--border, var(--line, #e2e0da));
  border-radius: 12px;
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg, inherit);
}
.ap-choice label:hover {
  border-color: var(--gold, var(--accent, #c9a227));
}
.ap-choice input[type='radio'] {
  display: inline-block;
  width: 17px;
  height: 17px;
  min-width: 17px;
  max-width: 17px;
  flex: none;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--accent, var(--gold, #c9a227));
}
.ap-choice .say {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.ap-choice .say small {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim, var(--fg-dim, #6b6a66));
  margin-top: 3px;
}

.ap-box {
  border: 1px solid var(--border, var(--line, #e2e0da));
  border-radius: 12px;
  padding: 14px 15px;
}

/* the one they picked, standing in place of the search */
.ap-chosen {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
/*
  A display of its own beats the hidden attribute, and the page that hosts
  this does not always carry a rule that says otherwise - which drew an
  empty name and a stray "Change" button above the search before anybody
  had chosen anything. It stays out of the way until the script shows it.
*/
.ap-chosen[hidden] {
  display: none;
}
.ap-chosen .ap-name {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--fg, inherit);
}
.ap-chosen .ap-stats {
  font-size: 12.5px;
  color: var(--text-dim, var(--fg-dim, #6b6a66));
  flex: 1 1 100%;
}
.ap-chosen .ap-change {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border, var(--line, #e2e0da));
  border-radius: 999px;
  padding: 5px 13px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  color: inherit;
}

.ap-find .ap-q {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  /* 16px or an iPhone zooms the whole page when this is tapped */
  font-size: 16px;
  padding: 11px 13px;
  border: 1px solid var(--border, var(--line, #e2e0da));
  border-radius: 10px;
  background: transparent;
  color: inherit;
}

.ap-results {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: 1px solid var(--border, var(--line, #e2e0da));
  border-radius: 10px;
}
.ap-results::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.ap-results li {
  border-bottom: 1px solid var(--border, var(--line, #e2e0da));
}
.ap-results li:last-child {
  border-bottom: 0;
}
.ap-hit {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 11px 13px;
  font: inherit;
  cursor: pointer;
  color: inherit;
}
.ap-hit:hover {
  background: var(--gold-soft, rgba(201, 162, 39, 0.12));
}
.ap-hit-name {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg, inherit);
}
.ap-hit-stats {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim, var(--fg-dim, #6b6a66));
  margin-top: 2px;
}

.ap-note {
  font-size: 12.5px;
  color: var(--text-dim, var(--fg-dim, #6b6a66));
  margin: 10px 0 0;
  line-height: 1.6;
}