/* engage.css: styles for the comments and newsletter blocks. Inherits the site's font and colour (currentColor, no hard-coded theme).
   Override with CSS variables on :root or on .engage:  --engage-accent  --engage-accent-fg  --engage-radius  --engage-gap */
.engage {
  --e-accent: var(--engage-accent, #2563eb);
  --e-accent-fg: var(--engage-accent-fg, #fff);
  --e-radius: var(--engage-radius, 8px);
  --e-gap: var(--engage-gap, 1rem);
  --e-line: color-mix(in srgb, currentColor 22%, transparent);
  --e-muted: color-mix(in srgb, currentColor 68%, transparent);
  display: block; margin: 2.5rem 0; font: inherit; color: inherit; line-height: 1.5;
  content-visibility: auto; contain-intrinsic-size: auto 20rem;
}
/* Reserve the space the block will take so building it never moves what is on screen (CLS). */
[data-engage="comments"] { min-height: 24rem; }
[data-engage="newsletter"][data-variant="article"], [data-engage="newsletter"]:not([data-variant]) { min-height: 19rem; }
[data-engage="newsletter"][data-variant="footer"] { min-height: 9rem; margin: 1rem 0; }
[data-engage="newsletter"][data-variant="page"] { min-height: 14rem; }
.engage *, .engage *::before, .engage *::after { box-sizing: border-box; }
.engage-h { font-size: 1.35rem; margin: 0 0 var(--e-gap); }
.engage-h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.engage-count { font-weight: 400; color: var(--e-muted); }
.engage-muted, .engage-hint, .engage-small { color: var(--e-muted); }
.engage-hint { margin: 0 0 var(--e-gap); font-size: .95rem; }
.engage-small { font-size: .8rem; margin: .75rem 0 0; }
.engage-small a, .engage-body a, .engage-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.engage-list { min-height: 4rem; margin-bottom: calc(var(--e-gap) * 1.5); }
.engage-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-gap); }
.engage-item { border: 1px solid var(--e-line); border-radius: var(--e-radius); padding: var(--e-gap); }
.engage-meta { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .9rem; }
.engage-meta time { color: var(--e-muted); font-size: .85rem; }
.engage-body { margin: .5rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.engage-actions { margin: .5rem 0 0; font-size: .8rem; }
.engage-link { background: none; border: 0; padding: .5rem 0; min-height: 44px; cursor: pointer; font: inherit; font-size: .8rem; color: var(--e-muted); }
.engage-form { border: 1px solid var(--e-line); border-radius: var(--e-radius); padding: var(--e-gap); display: grid; gap: .75rem; }
.engage-form[hidden] { display: none; }
.engage-field { display: grid; gap: .25rem; }
.engage-field label { font-size: .9rem; font-weight: 600; }
.engage-field input, .engage-field textarea {
  width: 100%; min-height: 44px; padding: .55rem .75rem; font: inherit; color: inherit; background: transparent;
  border: 1px solid var(--e-line); border-radius: calc(var(--e-radius) - 2px);
}
.engage-field textarea { min-height: 7rem; resize: vertical; }
.engage-field input:focus-visible, .engage-field textarea:focus-visible, .engage-btn:focus-visible, .engage-link:focus-visible {
  outline: 2px solid var(--e-accent); outline-offset: 2px;
}
.engage-btn {
  justify-self: start; min-height: 44px; padding: .55rem 1.25rem; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--e-accent-fg); background: var(--e-accent); border: 0; border-radius: 999px;
}
.engage-btn:disabled { opacity: .55; cursor: progress; }
.engage-status { margin: 0; min-height: 1.5em; font-size: .9rem; }
.engage-status.is-ok { color: color-mix(in srgb, #15803d 80%, currentColor); }
.engage-status.is-err { color: color-mix(in srgb, #b91c1c 80%, currentColor); }
.engage-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.engage-nl-article { border: 1px solid var(--e-line); border-radius: var(--e-radius); padding: var(--e-gap); }
.engage-nl-article .engage-form, .engage-nl-footer .engage-form { border: 0; padding: 0; }
/* Footer: email field and Subscribe button on ONE row at every width down to 360 px; the check box, status and consent text take full-width rows below. */
.engage-nl-footer .engage-form { grid-template-columns: minmax(0, 1fr) auto; column-gap: .5rem; row-gap: .5rem; align-items: end; }
.engage-nl-footer .engage-field { grid-column: 1; grid-row: 1; min-width: 0; }
.engage-nl-footer .engage-btn { grid-column: 2; grid-row: 1; justify-self: stretch; white-space: nowrap; padding-inline: 1rem; }
.engage-nl-footer .engage-ts { grid-column: 1 / -1; grid-row: 2; }
.engage-nl-footer .engage-ts:empty { display: none; }
.engage-nl-footer .engage-status, .engage-nl-footer .engage-small { grid-column: 1 / -1; margin: 0; }
.engage-nl-footer .engage-status:empty { min-height: 0; }
.engage-nl-footer .engage-h { font-size: 1rem; }
.engage-nl-footer .engage-field label { font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .engage * { transition: none !important; scroll-behavior: auto !important; } }

/* CrushRated: site tokens (src/styles/tokens.css) and widths. Kept in this file so the site's own stylesheets stay untouched. */
.engage { --engage-accent: var(--crush); --engage-accent-fg: var(--on-crush); --engage-radius: var(--r); }
.engage-field input, .engage-field textarea { background: var(--card-2); border-color: var(--rule-strong); }
.engage-status.is-ok { color: var(--good); }
.engage-status.is-err { color: var(--bad); }
[data-engage="comments"], [data-engage="newsletter"][data-variant="article"] { max-width: var(--measure); }
.engage-nl-article { background: var(--card); }
[data-engage="newsletter"][data-variant="footer"] { max-width: 34rem; margin: 0 0 var(--s5); }