/*
 * The answers lane (items 22, 23, 24, 25, 27, 28, 30): what the page does when you do something.
 * Tones on status lines (ok, wait, error), the ruby pulse and the count tick on the control,
 * the bottom toast, the landing lift, a comment that arrives in place, and a closed comment bar.
 * Motion is transform and opacity only; reduced motion gets a static equivalent of each.
 */

/* ---------- Status lines: ok, wait and error read differently (VS-04, FR-09) ---------- */
body :is([role="status"], .pk-engage-status)[data-tone="ok"] { color: var(--pk-good); }
body :is([role="status"], .pk-engage-status)[data-tone="wait"] { color: var(--pk-muted); }
body :is([role="status"], .pk-engage-status)[data-tone="error"] { color: var(--pk-error); }
/* An error also carries a mark, so colour is never the only signal. */
body :is([role="status"], .pk-engage-status)[data-tone="error"]:not(:empty)::before,
.pk-field-error::before {
  content: "!";
  content: "!" / ""; /* a mark for the eye; the words already say it */
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  margin-inline-end: .45em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: .8em;
  font-weight: 700;
  line-height: 1;
  vertical-align: .05em;
}
/* Said aloud, not drawn: the control already shows the change. */
body [data-quiet] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* The profile's follow line was screen-reader only, so "Follow limit reached" never showed. */
.pk-profile-follow-status { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--pk-muted); }
.pk-profile-follow-status:empty { display: none; }

/* ---------- Field errors get a ring and a mark (VS-21) ---------- */
:is(input, textarea, select)[aria-invalid="true"] {
  border-color: var(--pk-error);
  box-shadow: 0 0 0 1px var(--pk-error);
}
.pk-field-error { margin: 4px 0 0; font-size: 13px; color: var(--pk-error); }

/* ---------- The confirmation lives on the control ---------- */
.is-confirmed { position: relative; }
.is-confirmed::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--pk-accent);
  border-radius: inherit;
  pointer-events: none;
  animation: pk-confirm-ring var(--pk-dur-slow, 440ms) var(--pk-ease-move, ease-out) both;
}
@keyframes pk-confirm-ring { from { opacity: .85; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } }
.is-ticking { display: inline-block; animation: pk-count-tick var(--pk-dur-base, 260ms) var(--pk-ease-settle, ease-out) both; }
@keyframes pk-count-tick { from { opacity: .3; transform: translateY(.45em); } to { opacity: 1; transform: none; } }

/* ---------- The toast (the styled notice that had no callers) ---------- */
.pk-toast-region { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 0; pointer-events: none; }
.pk-toast-region .fs-toast {
  /* The base notice centres with a transform that its own slide-in animation would cancel. */
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  transform: none;
  pointer-events: auto;
}
html.pk-motion .pk-toast-region .fs-toast { animation: pk-toast-rise var(--pk-dur-base, 260ms) var(--pk-ease-move, ease-out) both; }
@keyframes pk-toast-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pk-toast[data-tone="error"] { border-color: var(--pk-error-line); }
.pk-toast-text { min-width: 0; overflow-wrap: anywhere; }
.pk-toast-action {
  flex: none;
  min-height: var(--pk-hit, 44px);
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--pk-accent-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
@media (max-width: 759px) { .pk-toast-region .fs-toast { bottom: calc(82px + env(safe-area-inset-bottom)); } }

/* ---------- The landing: a new post rises in ---------- */
.pk-landing { animation: pk-landing-rise var(--pk-dur-slow, 440ms) var(--pk-ease-settle, ease-out) both; }
@keyframes pk-landing-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- A comment that arrived in place ---------- */
.pk-reply.is-new { background: color-mix(in srgb, var(--pk-accent) 12%, transparent); border-radius: 10px; animation: pk-landing-rise var(--pk-dur-slow, 440ms) var(--pk-ease-settle, ease-out) both; }
.pk-reply-send:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) { .pk-reply-send:disabled:hover { filter: brightness(1.08); } }
.pk-reply-closed { margin: 0; padding: 12px 16px; color: var(--pk-muted); font-size: 14px; text-align: center; border: 1px solid var(--pk-line, #2d3234); border-radius: 12px; }
.pk-reply-status { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--pk-muted); }
.pk-reply-status:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .is-confirmed::after { animation: none; opacity: .85; transform: none; }
  .is-ticking, .pk-landing, .pk-reply.is-new { animation: none; }
  html.pk-motion .pk-toast-region .fs-toast { animation: pk-toast-fade var(--pk-dur-fast, 120ms) linear both; }
}
@keyframes pk-toast-fade { from { opacity: 0; } to { opacity: 1; } }
html.pk-save-data .is-confirmed::after, html.pk-save-data .is-ticking, html.pk-save-data .pk-landing { animation: none; }

/* ---------- Block lives in the profile's ⋯ menu; a message that is still sending ---------- */
.pk-creator-more nav button {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e9ebea;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.pk-creator-more nav button:focus-visible { background: #272b2c; outline-offset: -2px; }
@media (hover: hover) { .pk-creator-more nav button:hover { filter: brightness(1.08); } }
.pk-creator-more nav button:disabled { opacity: .55; cursor: default; }
.pk-message-sending { opacity: .7; }

/* ---------- An address that is not confirmed yet: the reason beside the disabled control (A55) ---------- */
.pk-limited-note { margin: 6px 0 0; color: var(--pk-muted); font-size: 13px; }
.pk-limited-resend { display: inline; margin: 0; }
.pk-limited-link { padding: 0; border: 0; background: transparent; color: var(--pk-accent-ink); font: inherit; text-decoration: underline; cursor: pointer; }
[data-limited]:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- A reply shows its parent; the targeted or just-sent reply is lit (A62) ---------- */
.pk-reply-to { margin: 2px 0 6px; font-size: 13px; color: var(--pk-muted); }
.pk-reply-to a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pk-reply:target { background: color-mix(in srgb, var(--pk-accent) 12%, transparent); border-radius: 10px; }