/*
 * Traffic Light public teaser: page layout on top of /css/site.css. The verdict and progress
 * styles come from /dashboard/tools/traffic-light.css.
 */
h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(28px, 5.6vw, 38px); line-height: 1.25;
  color: var(--ink); margin: 0 0 20px;
}
.lede { font-family: var(--serif); font-size: 18px; line-height: 1.75; }
.lede p { margin: 0 0 12px; }
.tl-free { font-family: var(--sans); font-size: 14px; color: var(--muted); }

.tl-teaser-form { margin-top: 24px; }
.tl-hint { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; line-height: 1.55; }
.tl-teaser-form textarea {
  display: block; width: 100%; min-height: 140px; resize: vertical;
  font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--text);
  background: var(--card); border: 1px solid var(--field-border); border-radius: 8px; padding: 10px 14px;
}
.tl-teaser-form textarea:hover { border-color: var(--ink); }
.tl-teaser-form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.tl-teaser-form textarea::placeholder { color: var(--muted); opacity: 1; }
.tl-teaser-form textarea[aria-invalid="true"] { border-color: var(--danger); }
.tl-count { font-size: 12px; color: var(--muted); text-align: right; margin: 4px 0 0; }
.tl-phi { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; background: var(--tint); border-radius: 10px; padding: 10px 12px; margin: 12px 0 6px; }
.tl-phi-icon { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 12px; line-height: 15px; text-align: center; margin-top: 1px; }
.tl-teaser-form .btn { margin-top: 12px; }

.tl-teaser .card { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px 16px; margin: 20px 0 16px; }
.tl-teaser .section { font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
.tl-teaser .sub { font-size: 14.5px; color: var(--muted); margin: 0 0 10px; }
.tl-teaser .fine { font-size: 12.5px; color: var(--muted); }
.tl-teaser .notice.soft { font-size: 14px; background: var(--tint); border-radius: 10px; padding: 12px 14px; margin: 16px 0; }
.tl-teaser .btn-link { font: inherit; font-size: 14px; color: var(--ink); background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer; min-height: 44px; }
.tl-teaser .btn-secondary { font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--field-border); border-radius: 8px; min-height: 44px; padding: 0 16px; cursor: pointer; }

.tl-takes { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 14px 0 0; }
.tl-teaser-form .tl-takes + .btn { margin-top: 8px; }

/* Copy verdict as text: built by teaser.js inside the verdict card. */
.tl-copy-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; }
.tl-copy-verdict .btn { width: auto; margin: 0; padding: 0 16px; min-height: 44px; font-size: 14px; }
.tl-copy-status { font-size: 13.5px; color: var(--muted); }
.tl-copy-fallback {
  display: block; width: 100%; margin: 10px 0 0; min-height: 120px; resize: vertical;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--text);
  background: var(--tint); border: 1px solid var(--field-border); border-radius: 8px; padding: 8px 10px;
}

/* The verdict card and the invitation sit together: the card's last line leads into it. */
.tl-teaser .tl-verdict { margin-bottom: 12px; }
.tl-join { margin-top: 12px; border: 1px solid var(--hairline); border-left: 3px solid var(--gold); background: var(--card); border-radius: 10px; padding: 18px 20px; }
.tl-join h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); margin: 0 0 8px; }
.tl-join p { margin: 0 0 10px; font-size: 15px; }
.tl-join-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-join-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; flex: 1 1 160px; margin: 0; text-decoration: none; }
.tl-join .link-button { min-height: 44px; }
.tl-example { margin-top: 28px; }
.tl-about { margin-top: 36px; font-size: 15px; }
.tl-about summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ink); }
footer.site { margin-top: 64px; }

@media print {
  .tl-copy-verdict, .tl-join-actions { display: none !important; }
}