/*
 * In Search Of.
 *
 * Shares the community page's tokens (the --cm-* custom properties in
 * community.css) and its page/container/heading/selector/modal classes, per the
 * handoff: the two pages are siblings and must not drift apart. Only what is
 * specific to this page lives here.
 *
 * Same two standing rules: no shadows, no transitions beyond instant hover.
 */

/* --------------------------------------------------------------- composer */

.iso-composer {
  margin-top: 22px;
  background: var(--cm-surface);
  border: 2px solid var(--cm-ink);
  border-radius: 14px;
  padding: 16px 18px 18px;
}

.iso-composer__label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--cm-ink);
  margin: 0;
}

.iso-composer__help {
  font-size: 12.5px;
  color: var(--cm-ink-muted);
  margin: 3px 0 0;
}

.iso-composer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.iso-composer__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--cm-border-band);
  background: var(--cm-card);
  font-size: 14.5px;
  color: var(--cm-ink);
}

.iso-composer__input:focus {
  border-color: var(--cm-blue);
  background: var(--cm-surface);
  outline: none;
}

.iso-composer__submit {
  flex: none;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  background: var(--cm-ink);
  border: 1.5px solid var(--cm-ink);
  color: var(--cm-ground);
  cursor: pointer;
}

.iso-composer__submit--disabled,
.iso-composer__submit:disabled {
  background: var(--cm-band);
  border-color: var(--cm-border);
  color: #A89E76;
  cursor: default;
}

.iso-composer__error {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #F86028;
}

.iso-composer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--cm-ink-muted);
}

.iso-quota {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}

.iso-quota__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cm-blue);
  flex: none;
}

.iso-quota__dot--empty { background: #F86028; }

/* ------------------------------------------------------------------- body */

.iso-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
}

/* flex-basis, not media queries: the side column drops under the list when the
   viewport can no longer give both their basis. */
.iso-body__main { flex: 1 1 560px; min-width: 0; }

.iso-body__side {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ------------------------------------------------------------- list panel */

.iso-panel {
  background: var(--cm-sage);
  border: 1px solid var(--cm-border-sage);
  border-radius: 14px;
  padding: 18px;
}

.iso-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.iso-panel__title {
  flex: 1;
  min-width: 140px;
  font-size: 19px;
  font-weight: 700;
  color: var(--cm-ink);
  margin: 0;
}

.iso-sort {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--cm-sage-muted);
  border: 1px solid var(--cm-border-sage);
}

.iso-sort__option {
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--cm-sage-ink);
  text-decoration: none;
}

.iso-sort__option--active {
  background: var(--cm-ink);
  color: var(--cm-ground);
  font-weight: 700;
}

.iso-divider {
  height: 1px;
  background: var(--cm-border-sage);
  margin: 14px 0;
}

.iso-divider--tight {
  background: var(--cm-divider);
  margin: 14px 0 4px;
}

.iso-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ------------------------------------------------------------------ cards */

.iso-card {
  background: var(--cm-surface);
  border: 1px solid var(--cm-border-sage-soft);
  border-radius: 12px;
  padding: 14px;
}

.iso-card--own { border-color: var(--cm-blue); }

.iso-card[hidden] { display: none; }

.iso-card__top {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.iso-card__avatarlink { flex: none; text-decoration: none; }

/* The viewer's own requests get the blue avatar treatment. */
.iso-card--own .cm-avatar {
  background: var(--cm-blue-light);
  border-color: #7FCBEA;
}

.iso-card__body { flex: 1; min-width: 0; }

.iso-card__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.iso-card__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cm-ink);
  text-decoration: none;
}

.iso-card__name:hover { text-decoration: underline; }

.iso-card__meta {
  font-size: 11.5px;
  color: var(--cm-ink-muted);
}

.iso-card__yours {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--cm-blue-light);
  color: var(--cm-blue-ink);
}

.iso-card__text {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--cm-ink);
  margin: 5px 0 0;
  text-wrap: pretty;
}

.iso-card__textlink { color: inherit; text-decoration: none; }
.iso-card__textlink:hover { color: var(--cm-link); text-decoration: underline; }

/* The 45px indent lines the actions up with the text column: 34px avatar + 11px. */
.iso-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-left: 45px;
}

.iso-have {
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--cm-blue);
  border: 1.5px solid var(--cm-blue);
  color: var(--cm-blue-ink);
  cursor: pointer;
}

.iso-have--done {
  background: var(--cm-sage-muted);
  border-color: var(--cm-border-sage);
  color: var(--cm-sage-ink);
  font-weight: 600;
  cursor: default;
}

.iso-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--cm-link);
}

.iso-count--none {
  font-weight: 500;
  color: var(--cm-ink-muted);
}

/* The count doubles as the control that opens the conversation. */
.iso-count--link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.iso-count--link:hover { color: #0A5477; }

.iso-iconbtn {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-border);
  cursor: pointer;
  padding: 0;
}

.iso-iconbtn:hover { border-color: var(--cm-ink); }

/* button_to wraps its button in a form, which would otherwise stretch. */
.iso-delete-form { flex: none; display: flex; }

/* On a phone the 45px avatar indent leaves too little room for "I have it", the
   count and both icons, so the icons wrapped onto a stray second line. Drop the
   indent and keep one row; the count gives way first, ellipsised. */
@media (max-width: 640px) {
  .iso-card__actions {
    flex-wrap: nowrap;
    padding-left: 0;
  }

  .iso-have { flex: none; }

  .iso-count {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Reply thread, revealed by iso_post_controller. */
.iso-card__thread { margin-top: 12px; }

.iso-showmore {
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border-sage);
  font-size: 13px;
  font-weight: 700;
  color: var(--cm-ink);
  text-align: left;
  cursor: pointer;
}

.iso-showmore:hover { background: var(--cm-blue-light); }

/* ----------------------------------------------------------- empty states */

.iso-empty {
  border: 1px dashed #A9B78A;
  border-radius: 12px;
  padding: 22px 18px;
  background: var(--cm-sage-muted);
}

.iso-empty__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-ink);
  margin: 0;
}

.iso-empty__body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cm-sage-ink);
  max-width: 46ch;
  margin: 4px 0 0;
}

.iso-empty__action {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 14px;
  border-radius: 9px;
  background: var(--cm-ink);
  color: var(--cm-ground);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.iso-empty__action:hover { background: var(--cm-link); }

.iso-empty--inline {
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-ink-muted);
  padding: 10px 0;
  margin: 0;
}

/* ------------------------------------------------------------ side column */

.iso-side-panel {
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: 14px;
  padding: 18px;
}

.iso-trend {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 2px;
  text-decoration: none;
}

.iso-trend + .iso-trend { border-top: 1px solid var(--cm-divider); }

.iso-trend__rank {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--cm-ground);
  color: var(--cm-ink);
  border: 1px solid var(--cm-border);
}

.iso-trend__rank--first {
  background: var(--cm-ink);
  color: var(--cm-yellow);
  border-color: var(--cm-ink);
}

.iso-trend__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cm-ink);
}

.iso-trend__meta {
  display: block;
  font-size: 11.5px;
  color: var(--cm-ink-muted);
  margin-top: 3px;
}

.iso-sell {
  background: var(--cm-band);
  border: 1px solid var(--cm-border-band);
  border-radius: 14px;
  padding: 18px;
}

.iso-sell__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-ink);
  margin: 0;
}

.iso-sell__body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cm-ink-muted);
  margin: 4px 0 0;
}

.iso-sell__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.iso-sell__primary,
.iso-sell__secondary {
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.iso-sell__primary {
  background: var(--cm-ink);
  color: var(--cm-ground);
}

.iso-sell__primary:hover { background: var(--cm-link); }

.iso-sell__secondary {
  background: var(--cm-surface);
  border: 1px solid var(--cm-border-band);
  color: var(--cm-ink);
}

.iso-sell__secondary:hover { background: var(--cm-blue-light); }

.iso-sponsored {
  display: block;
  border: 1px dashed var(--cm-dashed);
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none;
}

.iso-sponsored:hover { border-color: var(--cm-ink); }

.iso-sponsored__label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cm-yellow-ink);
}

.iso-sponsored__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-ink);
  margin-top: 4px;
}

.iso-sponsored__image {
  display: block;
  width: 100%;
  border-radius: 9px;
  margin-top: 8px;
}

.iso-sponsored__cta {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--cm-link);
  margin-top: 8px;
}

/* One horizontal line: label, advertiser, then the prompt. The profile page puts
   the slot above everything, where the stacked version would be too tall. */
.iso-sponsored--row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.iso-sponsored--row .iso-sponsored__label,
.iso-sponsored--row .iso-sponsored__name,
.iso-sponsored--row .iso-sponsored__cta { display: inline; margin-top: 0; }

.iso-sponsored--row .iso-sponsored__name { flex: 1; }

/* The top-of-page slot with a creative: a slim header, then the banner itself.
   Not one big link, so "Advertise with us" can go somewhere other than the ad. */
.iso-sponsored--banner { padding: 10px 12px 12px; }

.iso-sponsored--banner:hover { border-color: var(--cm-dashed); }

.iso-sponsored__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.iso-sponsored__head .iso-sponsored__cta { margin-top: 0; text-decoration: none; }

.iso-sponsored__head .iso-sponsored__cta:hover { text-decoration: underline; }

.iso-sponsored__banner {
  display: block;
  border-radius: 9px;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

.iso-sponsored__banner:hover { opacity: 0.92; }

.iso-sponsored__banner .iso-sponsored__image { height: auto; }

.iso-sponsored__stats {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: var(--cm-ink-muted);
  text-align: center;
}

/* ------------------------------------------------------------------ toast */

.iso-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 70;
  background: var(--cm-ink);
  color: var(--cm-ground);
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  max-width: calc(100% - 40px);
}

/* ------------------------------------------------------------ request page */

/* wanted_posts/show: the list's card at reading size, its threads open below. */
.iso-show { max-width: 720px; }

.iso-crumbs { margin: 6px 0 12px; }

.iso-crumbs__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cm-link);
  text-decoration: none;
}

.iso-crumbs__back:hover { color: #0A5477; }

.iso-card--detail { padding: 18px; border-radius: 14px; }

.iso-card--fulfilled { border-color: var(--cm-border-sage); }

/* An h1 here, so reset the heading defaults the card text doesn't expect. */
.iso-card__text--detail {
  margin-top: 6px;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
}

.iso-fulfilled {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 10px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cm-sage-muted);
  border: 1px solid var(--cm-border-sage);
  font-size: 12px;
  font-weight: 700;
  color: var(--cm-sage-ink);
}

.iso-card__spacer { flex: 1; }

/* The actions line up under the text: 42px avatar + 11px gap. */
.iso-card--detail .iso-card__actions { padding-left: 53px; }

.iso-card__thread--detail {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cm-divider);
}

@media (max-width: 640px) {
  .iso-card--detail { padding: 14px; }
  .iso-card--detail .iso-card__actions { padding-left: 0; }
  .iso-card__text--detail { font-size: 17px; }
}

/* ------------------------------------------------------------- reply threads */

/* wanted_posts/_threads: in the list's expanded cards and on the request page. */
.iso-threads__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.iso-reply + .iso-threads__list { margin-top: 12px; }

.iso-thread {
  padding: 12px;
  border-radius: 12px;
  background: var(--cm-card);
  border: 1px solid var(--cm-divider);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iso-thread--admin { border-color: #C9B8F0; background: #F7F3FF; }

.iso-thread__head {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cm-yellow-ink);
}

.iso-thread--admin .iso-thread__head { color: #5B3FA8; }

.iso-msg {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-radius: 9px;
}

.iso-msg__body { flex: 1; min-width: 0; }

.iso-msg__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.iso-msg__name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cm-ink);
  text-decoration: none;
}

.iso-msg__name:hover { text-decoration: underline; }

.iso-msg__time {
  font-size: 11px;
  color: var(--cm-ink-muted);
}

.iso-msg__text {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cm-ink);
  overflow-wrap: anywhere;
}

.iso-msg__badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cm-sage-muted);
  border: 1px solid var(--cm-border-sage);
  color: var(--cm-sage-ink);
}

/* button_to's form, kept out of the way of the row. */
.iso-msg__form { display: contents; }
.iso-msg__form--end > button { margin-left: auto; }

.iso-msg__fulfill,
.iso-msg__delete {
  background: none;
  border: 0;
  padding: 0;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.iso-msg__fulfill { color: var(--cm-link); }
.iso-msg__fulfill:hover { color: #0A5477; text-decoration: underline; }

.iso-msg__delete { color: var(--cm-ink-muted); }
.iso-msg__delete:hover { color: var(--pf-danger, #B23A0E); text-decoration: underline; }

.iso-reply {
  display: flex;
  gap: 8px;
}

.iso-reply--thread { margin-top: 2px; }

.iso-reply__input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-border);
  /* 16px, so iOS Safari doesn't zoom in on focus. */
  font-size: 16px;
  color: var(--cm-ink);
}

.iso-reply__input:focus { outline: none; border-color: var(--cm-ink); }

.iso-reply__send {
  flex: none;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--cm-blue);
  border: 1.5px solid var(--cm-blue);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-blue-ink);
  cursor: pointer;
}

.iso-reply__send:hover { background: var(--cm-blue-light); border-color: var(--cm-blue-light); }

.iso-threads__empty {
  margin: 0;
  font-size: 13px;
  color: var(--cm-ink-muted);
}