/* portal-review: styles owned by the review screens. Tokens and base components are in portal.css. */

/* Designs (base .design, .design-frame and .said are in portal.css) */
.review-placeholders { margin: -8px 0 12px; }
.review-tip { margin: 0 0 24px; }
.review-tip .tip-wide { display: none; }
@media (min-width: 720px) {
  .review-tip .tip-wide { display: inline; }
  .review-tip .tip-narrow { display: none; }
}
.designs { min-width: 0; }
.design-head { flex-wrap: wrap; }
.design-head h2 { overflow-wrap: anywhere; }
.design-count { font-size: 14px; color: var(--muted); white-space: nowrap; }
.design-blurb { margin: -6px 0 16px; padding: 0 clamp(16px, 4vw, 24px); color: var(--muted); max-width: 62ch; }
.design-view { min-width: 0; }
/* No scroll containment: at either end of a scrolling frame, the page carries on scrolling. */
.design-frame:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
/* Phones: the preview fades out at the bottom, so it reads as the top of a longer page. */
.design-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, transparent, var(--card-2)); pointer-events: none; }
@media (min-width: 720px) {
  .design-frame::after { display: none; }
}
.design-open {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 16px;
  border: 1px solid var(--field-border); border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.design-open:hover { border-color: var(--ink); }
.design-open:focus-visible { border-radius: 999px; }

/* Forms */
.form-error { margin: 0 0 20px; }
.review-form .choice-name { display: block; font-weight: 600; }
.review-form .choice span { min-width: 0; overflow-wrap: anywhere; }
.review-after { margin: 14px 0 0; }
.review-approve { border-color: color-mix(in srgb, var(--spark) 45%, var(--line)); }
.review-approve h2 { margin-bottom: 10px; }
.review-approve form { margin-top: 18px; }

/* What you told us */
.said-list { display: grid; gap: 22px; margin-top: 18px; }
.said-item h3 { margin-bottom: 8px; }
.said { margin: 0; overflow-wrap: anywhere; }
.said-when { margin: 6px 0 0; }

/* The approval record */
.review-record h2 { margin-bottom: 14px; }
.record { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0 0 16px; }
.record dt { color: var(--muted); }
.record dd { margin: 0; overflow-wrap: anywhere; }

/* Change requests */
.requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.request { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px clamp(16px, 4vw, 22px); }
.request-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.request-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.badge-progress { color: var(--ink); border-color: color-mix(in srgb, var(--spark) 45%, transparent); }
.badge-declined { color: var(--faint); }