/* My people tab: one card per person and the rating form. The person card and the profile sheet
   are in person.css, the report sheet in report.css. Every control is at least 44 px tall. */

/* People (one card per person, its encounters as context lines) */
.pp-head {
  padding: 16px var(--gap) 4px;
}

.pp-head h1 {
  margin-bottom: 4px;
}

.pp-list {
  padding-top: 8px;
}

.pp-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pp-person {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pp-avatar {
  width: 56px;
  height: 56px;
}

.pp-who {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pp-name {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: 16px;
}

.pp-chevron {
  color: var(--hint);
  font-size: 24px;
}

.pp-contexts {
  display: flex;
  flex-direction: column;
}

/* Every context line has the height of a tap target, the plain ones too, for an even rhythm. */
.pp-context {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  font-size: 14px;
}

.pp-context-link {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.pp-rating {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pp-rating .hint,
.pp-wait {
  margin: 0;
}

.pp-myrating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pp-actions .btn {
  flex: 1 1 auto;
  min-height: 44px;
  white-space: nowrap;
}

/* The page background is --bg2 too, so the default button would melt into it. */
.pp-more .btn {
  min-height: 44px;
  background: var(--section);
}

/* Rating form */
.rt-context {
  margin: 0 0 8px;
  text-align: center;
}

.rt-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 10px;
}

.rt-star {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--bg2);
  color: var(--hint);
  font-size: 30px;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
}

.rt-star-on {
  color: #f5b301;
  opacity: 1;
}

.rt-row {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.rt-reasons {
  margin-bottom: 14px;
}

.rt-row .chip,
.rt-chips .chip {
  min-height: 44px;
}

.rt-comment ~ .btn {
  min-height: 44px;
}

.rt-label {
  margin: 0 0 6px;
  color: var(--hint);
  font-size: 13px;
}

.rt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rt-note {
  margin: 6px 0 0;
}