/* =========================================================
   LATA SCIENTIFIC — review form + admin moderation panel
   =========================================================
   A NEW, self-contained sheet. It adds only components the design system did
   not already have (a star input, a form status banner, the moderation queue)
   and builds them from the existing custom properties, so the approved design
   files are not touched at all. Loaded by review.html and admin-reviews.html;
   never by index.html, where the carousel reuses the existing .tcard styles.
   ========================================================= */

.rvw { max-width: 760px; margin: 0 auto; }

/* ---------- star rating input ---------- */
.rating { display: flex; gap: 6px; align-items: center; }
.rating button {
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--paper); color: var(--line-2); font-size: 22px; line-height: 1;
  transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease);
}
.rating button:hover { transform: translateY(-2px); border-color: var(--accent); }
/* Filled up to and including the chosen value — set by review-form.js. */
.rating button.is-on { color: var(--teal); border-color: var(--accent); background: var(--accent-soft); }
.rating__out {
  margin-left: 10px; font-family: var(--f-mono); font-size: 13.5px;
  letter-spacing: .05em; color: var(--muted);
}
.field.is-invalid .rating button { border-color: #E5484D; }

/* ---------- consent + honeypot ---------- */
.rvw__consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.rvw__consent input { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.rvw__consent label { font-size: 1.02rem; color: var(--body); }

/* The honeypot is never shown to a person and never announced to a screen
   reader. Off-screen rather than display:none — some bots skip hidden inputs. */
.rvw__hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- status banner ---------- */
.rvw__status { margin-top: 18px; padding: 14px 16px; border-radius: 12px; font-size: 1.03rem; display: none; }
.rvw__status.is-on { display: block; }
.rvw__status--ok  { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink); }
.rvw__status--err { background: rgba(229,72,77,0.08); border: 1px solid rgba(229,72,77,0.45); color: #A32126; }

/* ---------- admin panel ---------- */
.adm { max-width: 980px; margin: 0 auto; }
.adm__gate { max-width: 420px; margin: 0 auto; }
.adm__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.adm__tab {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--paper); color: var(--ink-2); font-size: 1rem;
  transition: border-color .2s, color .2s, background .2s;
}
.adm__tab:hover { border-color: var(--accent); color: var(--accent-strong); }
.adm__tab.is-on { background: var(--grad); border-color: transparent; color: #fff; }
.adm__count { font-family: var(--f-mono); font-size: 12.5px; opacity: .85; margin-left: 6px; }

.adm__row {
  padding: 20px 22px; margin-bottom: 14px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs);
}
.adm__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.adm__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm__ava {
  display: grid; place-content: center; width: 42px; height: 42px; flex: none;
  border-radius: 50%; background: var(--grad); color: #fff;
  font-family: var(--f-display); font-weight: 600; font-size: 15px;
}
.adm__name { font-family: var(--f-display); font-weight: 600; color: var(--ink); }
.adm__meta { font-size: 0.95rem; color: var(--muted); overflow-wrap: anywhere; }
.adm__stars { color: var(--teal); letter-spacing: 2px; }
.adm__text { margin: 14px 0 0; color: var(--body); overflow-wrap: anywhere; }
.adm__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
.adm__when { font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); margin-right: auto; }
.adm__btn { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: 0.98rem; transition: border-color .2s, color .2s, background .2s; }
.adm__btn:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.adm__btn--ok  { background: var(--grad); border-color: transparent; color: #fff; }
.adm__btn--ok:hover { color: #fff; opacity: .92; }
.adm__btn--no  { border-color: rgba(229,72,77,0.45); color: #A32126; }
.adm__btn--no:hover { background: rgba(229,72,77,0.08); border-color: #E5484D; color: #A32126; }
.adm__btn:disabled { opacity: .55; cursor: progress; }

.adm__empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.adm__flag { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 620px) {
  .adm__head { align-items: flex-start; }
  .adm__foot .adm__btn { flex: 1 1 auto; }
}