/* Figma 329:4502: shared compact, progressively disclosed family feedback. */
.task-feedback { --feedback-star-size: 24px; --feedback-star-gap: var(--space-10); direction: rtl; text-align: start; display: grid; gap: var(--feedback-star-gap); color: var(--primary-dark); margin: 0; font-size: var(--text-body-1); }
.task-feedback label { margin: 0; }
.task-feedback p { margin: 0; color: var(--primary-main-sub); line-height: 1.7; font-size: var(--text-body-2); }
.task-feedback [hidden], .task-feedback [role="status"]:empty { display: none; }
.task-feedback-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); min-width: 0; }
.task-feedback-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--feedback-star-gap); }
.task-feedback-label span { color: var(--primary-main-sub); }
.task-feedback-ratings { display: flex; gap: var(--feedback-star-gap); flex: 0 0 auto; direction: rtl; }
.task-feedback-ratings label { position: relative; display: grid; place-items: center; cursor: pointer; width: var(--feedback-star-size); height: var(--feedback-star-size); }
.task-feedback-ratings input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.task-feedback-ratings img { display: block; width: var(--feedback-star-size); height: var(--feedback-star-size); pointer-events: none; }
.task-feedback-ratings label:has(input:focus-visible) { outline: 2px solid var(--primary-main); outline-offset: var(--space-2); border-radius: var(--radius-sm); }
.task-feedback-details { display: grid; gap: var(--feedback-star-gap); }
.task-feedback textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: var(--text-body-2); line-height: 1.5; color: var(--primary-dark); background: var(--primary-white); border: 1px solid var(--primary-light); border-radius: var(--radius-control); padding: var(--feedback-star-gap); }
.task-feedback textarea::placeholder { color: var(--primary-main-sub); opacity: 1; }
.task-feedback textarea:focus-visible { outline: 2px solid var(--primary-main); outline-offset: var(--space-2); }
.task-feedback button { justify-self: start; }
#parentTaskFeedback { padding: var(--space-20); }
.account-preview-banner { padding: var(--space-14) var(--space-20); background: var(--primary-light); color: var(--primary-dark); text-align: center; }
.account-preview-banner a { color: var(--primary-main); }
@media (max-width: 760px) {
  .task-feedback-question { flex-wrap: wrap; gap: var(--space-8); }
  .task-feedback-ratings { gap: 0; }
  .task-feedback-ratings label { width: var(--space-40); height: var(--space-40); }
}

.task-feedback-controls { display:flex; align-items:center; gap:var(--space-10); flex:0 0 auto; }
.task-feedback .task-feedback-clear { border:0; background:transparent; color:var(--primary-main); padding:var(--space-2) var(--space-6); font:inherit; font-size:var(--text-body-2); cursor:pointer; box-shadow:none; }
.task-feedback .task-feedback-clear:hover { text-decoration:underline; }
.task-feedback .task-feedback-clear:focus-visible { outline:2px solid var(--primary-main); outline-offset:var(--space-2); border-radius:var(--radius-sm); }

#parentTaskFeedback.feedback-delivered, #childReviewFeedback.feedback-delivered, #childTaskFeedback.feedback-delivered { padding:0; background:transparent; box-shadow:none; direction:rtl; text-align:start; }
.feedback-delivered p { margin:0; color:var(--primary-main-sub); }
#parentTaskFeedback[hidden], #childReviewFeedback[hidden], #childTaskFeedback[hidden] { display:none; }

.preview-saved-feedback { padding:var(--space-20); margin-block:var(--space-20); border-radius:var(--radius-card); background:var(--primary-white); box-shadow:var(--shadow-card); direction:rtl; text-align:start; }
.preview-saved-feedback p { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--primary-main-sub); }

/* Figma heading and explicit submission disclosure share the existing type scale. */
.task-feedback .task-feedback-heading { margin:0; font-size:var(--text-body-2); font-weight:400; line-height:1.5; color:var(--primary-dark); }
.task-feedback .task-feedback-disclosure { font-size:var(--text-sub); color:var(--primary-dark); }
.feedback-delivered .task-feedback-delivery-chip { display:inline-block; max-width:100%; padding:var(--space-6) var(--space-14); border-radius:var(--radius-pill); background:var(--primary-light); color:var(--primary-dark); font-size:var(--text-body-2); line-height:1.5; animation:feedback-delivery-pulse 800ms ease-in-out 2; }
@keyframes feedback-delivery-pulse { 50% { background:var(--primary-background); } }
@media (prefers-reduced-motion:reduce) { .feedback-delivered .task-feedback-delivery-chip { animation:none; } }