/* ===== Feedback page — form styles layered on legal.css ===== */

.feedback-subtitle {
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.6;
  margin: 16px 0 0;
  max-width: 56ch;
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Same [hidden] cascade trap as `.feedback-success` — `display: flex`
   above ties with the UA's `[hidden] { display: none }` rule, and the
   author wins on tie. Without this the form keeps occupying space even
   after JS sets `form.hidden = true`. */
.feedback-form[hidden] {
  display: none;
}

.feedback-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feedback-row label {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.feedback-optional {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.16);
}
body.labels-sans .feedback-optional {
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  font-size: 12px;
  font-weight: 600;
}

.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form textarea {
  font: inherit;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(120, 120, 128, 0.16);
  border: 1px solid transparent;
  border-radius: 20px;
  /* Continuous (iOS-style) corners; falls back to plain round corners
     in browsers that don't yet ship the property. */
  corner-shape: squircle;
  padding: 14px 18px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.feedback-form textarea {
  resize: vertical;
  min-height: 180px;
  /* Resize-grabber, painted on the textarea itself rather than via
     ::-webkit-resizer. The native resizer lives in the bottom-right
     corner, which is exactly where corner-shape: squircle clips most
     aggressively — anything drawn there ends up looking broken. By
     painting on the textarea bg ~10px in from the corner, the dots
     sit inside the squircle's safe area and stay crisp.

     Three small dots in an L-pattern pointing into the corner: subtle,
     unmistakably a "drag here" affordance, and quiet enough to not
     compete with the field content. */
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.36) 0.9px, transparent 1.1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.36) 0.9px, transparent 1.1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.36) 0.9px, transparent 1.1px);
  background-position:
    calc(100% - 10px) calc(100% - 10px),
    calc(100% - 16px) calc(100% - 10px),
    calc(100% - 10px) calc(100% - 16px);
  background-size: 4px 4px;
  background-repeat: no-repeat;
}

/* Hide the native resizer entirely — its position in the squircle's
   clipped corner makes any indicator look mangled. The drag
   functionality stays (cursor still changes on hover), and the L of
   dots above tells the user it's draggable. */
.feedback-form textarea::-webkit-resizer {
  background: transparent;
}
.feedback-form input::placeholder,
.feedback-form textarea::placeholder {
  /* Equivalent of UIColor.tertiaryLabel on dark mode (~30% opacity). */
  color: rgba(245, 245, 247, 0.3);
}
.feedback-form input:hover,
.feedback-form textarea:hover {
  /* Use longhand so the textarea's background-image (resize-dot grabber)
     isn't reset to none by the shorthand. */
  background-color: rgba(120, 120, 128, 0.22);
}
.feedback-form input:focus-visible,
.feedback-form textarea:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  /* Longhand: see hover comment. */
  background-color: rgba(120, 120, 128, 0.22);
}

.feedback-help {
  font-size: 13px;
  color: var(--text-mute);
  margin: 0;
  line-height: 1.4;
}
.feedback-counter {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
body.labels-sans .feedback-counter {
  font-family: var(--font-sans);
  letter-spacing: 0;
  font-size: 12px;
}

.feedback-actions {
  /* Horizontal row: submit button on the left, Turnstile widget tucked
     to its right. flex-wrap so the captcha drops below the button on
     narrow screens where they can't fit side-by-side. The error message
     spans the full row above both via flex-basis: 100%. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Toast — fixed at the bottom-center of the viewport. Out of flow so
   it never adds empty space to the form layout. JS toggles `.is-visible`
   to slide + fade it in, and an 8s timer slides + fades it back out.
   Styling mirrors the original pastel inline-error look (subtle red
   tint over dark, salmon text) so it stays on-brand instead of feeling
   like an iOS system alert. */
.feedback-error {
  --error-tone: rgb(255, 165, 158);
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 100;
  margin: 0;
  padding: 13px 18px 13px 14px;
  /* Wide enough that all of the user-facing error strings fit on a
     single line at the default font size. */
  width: min(560px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, #ff453a 14%, #161616);
  color: var(--error-tone);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.003em;
  border: 1px solid color-mix(in srgb, #ff453a 24%, transparent);
  border-radius: 18px;
  corner-shape: squircle;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateX(-50%) translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(.3, .65, .4, 1);
}
.feedback-error.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
/* Salmon-filled circle with a near-black "!" — echoes SF Symbols'
   `exclamationmark.circle.fill` while staying on the pastel palette. */
.feedback-error::before {
  content: "!";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--error-tone);
  color: #1a0a08;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

.feedback-submit {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--text);
  color: #0a0a0a;
  font: inherit;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 10px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  justify-content: center;
  position: relative;
}
.feedback-submit:hover { transform: translateY(-1px); }
.feedback-submit:active { transform: translateY(0); }
.feedback-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.feedback-submit:disabled:hover { transform: none; }
.feedback-submit.is-loading,
.feedback-submit.is-loading:disabled {
  opacity: 0.85;
  cursor: progress;
}
.feedback-submit-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, #0a0a0a 25%, transparent);
  border-top-color: #0a0a0a;
  border-radius: 50%;
  animation: feedback-spin 0.7s linear infinite;
}
.feedback-submit.is-loading .feedback-submit-label { opacity: 0.55; }
.feedback-submit.is-loading .feedback-submit-spinner { display: inline-block; }

@keyframes feedback-spin {
  to { transform: rotate(360deg); }
}

/* Stage wrapper holds both the form and the success card. Its inline
   `height` is driven by JS during the transition (form-height -> success-
   height) so the page doesn't collapse, then released back to auto. */
.feedback-stage {
  position: relative;
}

/* Cross-fade between the form and the success card.
   The form fades up-and-out; once it's gone, the success card fades up-and-in. */
.feedback-form {
  transition: opacity 0.32s ease, transform 0.36s cubic-bezier(.5,.05,.4,.95);
}
.feedback-form.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.feedback-success {
  scroll-margin-top: 100px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.3,.65,.4,1);
}

/* Terminal CTA on the success card. Same visual weight as the submit
   button so the user has a satisfying matching action to close the loop.
   The button itself tries window.close(); when blocked, JS falls back
   to navigating home (../../). */
.feedback-close {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--text);
  color: #0a0a0a;
  font: inherit;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 10px 28px;
  border-radius: 999px;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 8px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.feedback-close:hover { transform: translateY(-1px); }
.feedback-close:active { transform: translateY(0); }
@media (max-width: 720px) {
  .feedback-close { width: 100%; align-self: stretch; }
}
/* The success card uses .legal-footer-card which sets display: flex.
   That overrides the hidden attribute's UA-stylesheet display: none
   (same specificity, author rule wins on tie), so without this the
   card sits in the layout invisible-but-occupying-space. Adding the
   [hidden] attribute selector bumps specificity above .legal-footer-card
   so the card is removed from the flow until JS unhides it. */
.feedback-success[hidden] {
  display: none;
}
.feedback-success.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.feedback-success a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-2);
  text-underline-offset: 3px;
}
.feedback-success a:hover {
  text-decoration-color: var(--text);
}

@media (max-width: 720px) {
  .feedback-form { margin-top: 40px; gap: 24px; }
  .feedback-submit { width: 100%; align-self: stretch; }
  /* Captcha is wider than typical mobile content area; force it to its
     own row below the submit button. */
  .feedback-actions .cf-turnstile { flex-basis: 100%; }
}

/* Override the shared legal.css rule for this page only — feedback's
   header sits closer to the form than the privacy/terms layouts because
   there's no TOC chip list under the title. */
.legal-header {
  margin-bottom: 40px;
}