/* Room proof + Cleanest Room contest (owner approved Nov 2026). Colours come from the app tokens, so light and dark
   themes both work. Layout is phone-first (360 px), big targets. */

/* ---------- guided capture ---------- */
.rp-cap { gap: var(--s3); }
.rp-cap__spot .t-title { margin: 2px 0; }
.rp-frame {
  position: relative; aspect-ratio: 4 / 3; width: 100%; border-radius: var(--r-sm); overflow: hidden;
  background: var(--bg-sunken); border: 1px dashed var(--line-strong);
}
.rp-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-frame__ghost { opacity: 0.38; filter: grayscale(0.2); }
.rp-frame__ghost.is-over { opacity: 0.32; mix-blend-mode: normal; }
.rp-frame__hint {
  position: absolute; inset: auto 0 0 0; display: flex; gap: var(--s2); align-items: center; justify-content: center;
  padding: var(--s3); color: var(--text); background: color-mix(in srgb, var(--surface) 82%, transparent); font-size: var(--fs-15); text-align: center;
}
.rp-frame__hint small { color: var(--text-2); }
.rp-frame--side { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-style: solid; }
.rp-frame--side > div { position: relative; aspect-ratio: 3 / 4; }
.rp-shoot { min-height: 56px; cursor: pointer; }
.rp-shoot[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.rp-cap__all summary { cursor: pointer; color: var(--text-2); font-size: var(--fs-15); min-height: 44px; display: flex; align-items: center; }
.rp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.rp-chip {
  min-height: 40px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); font: inherit; font-size: var(--fs-13); display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
}
.rp-chip.is-done { background: var(--success-tint); border-color: transparent; color: var(--success-ink); }
.rp-chip.is-on { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- AI notes (always labelled as a suggestion) ---------- */
.rp-ai {
  margin: 0; padding: var(--s3); border-radius: var(--r-sm); font-size: var(--fs-15); line-height: 1.4;
  background: var(--bg-sunken); color: var(--text); border-left: 4px solid var(--line-strong);
}
.rp-ai__tag { display: flex; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--text-2); margin-bottom: 2px; text-transform: none; }
.rp-ai--success { background: var(--success-tint); border-left-color: var(--success); }
.rp-ai--info { background: var(--info-tint); border-left-color: var(--info); }
.rp-ai--warning { background: var(--warning-tint); border-left-color: var(--warning); }
.rp-ai-none { margin: 0; }

/* ---------- old | new ---------- */
.rp-pair { margin: 0; display: grid; gap: var(--s2); }
.rp-pair__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.rp-pair__cell { display: grid; gap: 4px; min-width: 0; }
.rp-pair__cell img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-xs); background: var(--bg-sunken); }
.rp-pair__lab { font-size: var(--fs-12); color: var(--text-2); font-variant-numeric: tabular-nums; }
.rp-pair__none { aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--bg-sunken); color: var(--text-3); font-size: var(--fs-13); text-align: center; padding: var(--s2); }
.rp-pairs { margin-top: var(--s2); }

/* ---------- move-in suggestions ---------- */
.rp-sugg__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.rp-sugg__row { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s3); align-items: center; }
.rp-sugg__row img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-xs); }
.rp-sugg__row div { display: grid; min-width: 0; }

/* ---------- contest entry (girls) ---------- */
.rp-entry__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.rp-entry__shot {
  display: grid; place-items: center; gap: 4px; aspect-ratio: 1; border-radius: var(--r-sm); cursor: pointer; overflow: hidden; position: relative;
  border: 2px dashed var(--line-strong); background: var(--bg-sunken); color: var(--text-2); font-weight: 600; text-align: center; padding: var(--s2);
}
.rp-entry__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-entry__shot span { position: relative; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); padding: 2px 8px; border-radius: var(--r-pill); }
.rp-entry__cell.is-done .rp-entry__shot { border-style: solid; border-color: var(--success); }
.rp-received { display: grid; justify-items: center; text-align: center; gap: var(--s2); padding: var(--s4) 0; }
.rp-received__tick { color: var(--success); transform: scale(2); margin-bottom: var(--s3); }
.rp-received p { margin: 0; }
.rp-tips summary, .rp-howcard summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.rp-tips ul { margin: 0; padding-left: 1.2em; color: var(--text-2); }
.rp-how { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s2); line-height: 1.45; }
.rp-podium { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.rp-podium__row { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--s2); align-items: center; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--surface-2); }
.rp-podium__row.is-mine { background: var(--accent-tint); }
.rp-podium__place { font-size: var(--fs-20); text-align: center; }
.rp-podium__score { font-family: var(--font-num); font-weight: 700; }

/* ---------- staff ---------- */
.rp-rooms, .rp-spots, .rp-review, .rp-occ, .rp-spotedit { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.rp-rooms { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.rp-room { display: grid; gap: 4px; text-decoration: none; color: var(--text); }
.rp-occ li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2); }
.rp-spots { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rp-thumbs { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 4px; }
.rp-thumbs figure { margin: 0; flex: 0 0 auto; width: 88px; }
.rp-thumbs img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-xs); }
.rp-thumbs figcaption { font-size: var(--fs-11); color: var(--text-2); line-height: 1.3; }
.rp-decide { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.rp-decide__opt {
  min-height: 48px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-13); font-weight: 600; cursor: pointer; padding: 4px;
}
.rp-decide__opt.is-on { background: var(--accent); color: var(--text-on-accent); border-color: transparent; }
.rp-decide__opt:disabled { opacity: 0.45; cursor: not-allowed; }
.rp-standings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.rp-standings li { display: grid; grid-template-columns: 32px 1fr auto; gap: 4px var(--s2); align-items: center; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--surface-2); }
.rp-standings li.is-top { background: var(--accent-tint); }
.rp-standings li > .t-foot, .rp-standings li > .stack, .rp-standings li > .btn { grid-column: 2 / -1; justify-self: start; }
.rp-standings__rank { font-family: var(--font-num); font-weight: 700; text-align: center; }
.rp-centry__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: var(--s2); }
.rp-centry__photos figure { margin: 0; }
.rp-centry__photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-xs); }
.rp-centry__photos figcaption { font-size: var(--fs-12); color: var(--text-2); line-height: 1.35; }
.rp-spotedit li { display: grid; grid-template-columns: 1fr 130px auto; gap: var(--s2); align-items: end; }
.rp-plan { max-height: 30vh; overflow: auto; padding-left: 1.2em; font-size: var(--fs-13); }
.btn.is-disabled { opacity: 0.5; pointer-events: none; }
@media (max-width: 420px) {
  .rp-spotedit li { grid-template-columns: 1fr auto; }
  .rp-spotedit li > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}
.rp-h { display: flex; align-items: center; gap: var(--s2); }
.rp-admin .tabs__tab { text-decoration: none; display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .rp-received__tick { transform: none; } }
/* Keyboard: the camera inputs are visually hidden; their big labels show the focus ring. */
input.sr-only:focus-visible + .rp-shoot, input.sr-only:focus-visible + .rp-entry__shot, input.sr-only:focus-visible + label.btn { outline: 3px solid var(--focus); outline-offset: 2px; }