/* tt-testimonial.css - shared testimonial widget (window.TTTestimonial).

   Two independent scopes:

   .tt-ts       the ask, mounted on game result screens. Self-contained and
                theme-neutral like .tt-lb - hardcoded colours, own font stack,
                no var() tokens. It drops into Bug Hunter's dark result screen
                and has to survive it.

   .tt-ts-wall  the approved quotes, mounted only inside Home.razor, so it may
                use the site's design tokens. */

/* ─────────────────────────── the ask ─────────────────────────── */
.tt-ts {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  margin: 18px auto;
  text-align: left;
  background: #ffffff;
  border: 1px solid #e3e1d8;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #2b2b2b;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .32s ease, transform .32s ease;
}
.tt-ts.show { opacity: 1; transform: none; }
.tt-ts *, .tt-ts *::before, .tt-ts *::after { box-sizing: border-box; }

.tt-ts-head { margin-bottom: 12px; }
.tt-ts-title {
  display: flex; flex-direction: column; gap: 2px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: #1c1c1e;
}
.tt-ts-sub {
  color: #9a978c; font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
}

.tt-ts-quote {
  display: block; width: 100%; resize: vertical; min-height: 68px;
  font-family: inherit; font-size: 14px; line-height: 1.5; color: #2b2b2b;
  padding: 10px 13px; border: 1px solid #ddd9cd; border-radius: 10px; background: #faf8f1;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tt-ts-quote::placeholder { color: #b3b0a4; }
.tt-ts-quote:focus {
  outline: none; border-color: #185FA5; background: #fff;
  box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.12);
}

.tt-ts-count {
  margin: 4px 2px 10px; text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: #b3b0a4;
}
.tt-ts-count.near { color: #C0873A; font-weight: 600; }

.tt-ts-fields { display: flex; gap: 8px; margin-bottom: 12px; }
.tt-ts-fields input {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 14px; color: #2b2b2b;
  padding: 10px 13px; border: 1px solid #ddd9cd; border-radius: 10px; background: #faf8f1;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tt-ts-fields input::placeholder { color: #b3b0a4; }
.tt-ts-fields input:focus {
  outline: none; border-color: #185FA5; background: #fff;
  box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.12);
}

.tt-ts-actions { display: flex; align-items: center; gap: 10px; }
.tt-ts-submit {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-family: inherit; font-size: 14px; font-weight: 600; color: #fff;
  padding: 10px 18px; border: none; border-radius: 10px; cursor: pointer; touch-action: manipulation;
  background: #185FA5;
  box-shadow: 0 1px 2px rgba(24, 95, 165, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.tt-ts-submit:hover { background: #14528f; box-shadow: 0 4px 12px rgba(24, 95, 165, 0.3); }
.tt-ts-submit:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(24, 95, 165, 0.25); }
.tt-ts-submit:disabled { opacity: .55; cursor: default; box-shadow: none; transform: none; }

.tt-ts-skip {
  margin-left: auto; font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: #9a978c; background: none; border: none; padding: 6px 4px;
  cursor: pointer; touch-action: manipulation; transition: color .18s ease;
}
.tt-ts-skip:hover { color: #6f6c62; text-decoration: underline; }

.tt-ts-sent {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500; color: #14794f;
  background: linear-gradient(160deg, #f1fbf6 0%, #e8f7f0 100%);
  border: 1px solid #bfe7d4; padding: 11px 14px; border-radius: 12px;
}
.tt-ts-sent-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; font-size: 13px; font-weight: 700;
  color: #fff; background: #1D9E75; border-radius: 50%;
}
.tt-ts-sent-text strong { font-weight: 700; color: #0f5e3e; }

.tt-ts-status { font-size: 12px; color: #888; margin-top: 10px; }
.tt-ts-status:empty { display: none; }
.tt-ts-status.err { color: #C03A39; }

@media (max-width: 420px) {
  .tt-ts { padding: 14px; }
  .tt-ts-fields { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-ts { transition: none; }
}

/* ───────────────────────── the home wall ───────────────────────── */
/* Host stays empty until mountWall finds approved rows - no class, no padding,
   no heading, so the section collapses to nothing rather than showing a
   half-built shell. */
.tt-ts-wall {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem 1.5rem 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.tt-ts-wall.show { opacity: 1; transform: none; }

.tt-ts-wall-title {
  margin: 0 0 1.5rem;
  text-align: center;
  font-family: var(--fh, inherit);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #1c1c1e);
}

.tt-ts-wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.tt-ts-card {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: 0;
  padding: 1.25rem 1.35rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e3e1d8);
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tt-ts-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.tt-ts-card-quote {
  margin: 0;
  font-family: var(--fb, inherit);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text, #2b2b2b);
}
/* Decorative quote mark: aria-hidden by virtue of being a pseudo-element, so
   screen readers get the text only. */
.tt-ts-card-quote::before {
  content: "\201C";
  float: left;
  margin: -.15em .1em 0 -.1em;
  font-size: 2rem;
  line-height: 1;
  color: var(--r1, #185FA5);
  opacity: .5;
}

.tt-ts-card-by { display: flex; flex-direction: column; gap: 1px; margin-top: auto; }
.tt-ts-card-name {
  font-family: var(--fh, inherit);
  font-size: .85rem; font-weight: 700; color: var(--text, #1c1c1e);
}
.tt-ts-card-role {
  font-family: var(--fm, inherit);
  font-size: .72rem; color: var(--muted, #8a877c);
  text-transform: uppercase; letter-spacing: .05em;
}

@media (max-width: 560px) {
  .tt-ts-wall { padding: 2rem 1.1rem .5rem; }
  .tt-ts-wall-title { font-size: 1.3rem; margin-bottom: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-ts-wall, .tt-ts-card { transition: none; }
  .tt-ts-card:hover { transform: none; }
}