/* Centuries feedback page. Builds on the studio-theme form components in design-system.css. */
#psc-studio.studio-theme .feedback-hero { display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; padding-block: 28px 36px; }
#psc-studio.studio-theme .feedback-logo { display: inline-block; }
#psc-studio.studio-theme .feedback-logo img { width: 150px; height: auto; margin-bottom: 18px; }
#psc-studio.studio-theme .feedback-hero .studio-lead { max-width: 54ch; margin-top: 18px; }
#psc-studio.studio-theme .feedback-tips {
  align-self: end;
  padding: 22px 24px;
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  background: radial-gradient(ellipse at 100% 0, rgba(224,178,92,.10), transparent 70%), var(--theme-card);
}
#psc-studio.studio-theme .feedback-tips h2 { font: 700 13px/1.5 var(--theme-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--studio-blue); }
#psc-studio.studio-theme .feedback-tips ol { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 6px; }
#psc-studio.studio-theme .feedback-tips li::marker { color: var(--studio-blue); font-weight: 700; }
#psc-studio.studio-theme .feedback-tips p { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--studio-line); color: var(--studio-muted); font-size: 14px; }
#psc-studio.studio-theme .feedback-tips a { color: var(--studio-ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Numbered steps share one heading treatment whether they are legends or group headings. */
#psc-studio.studio-theme .feedback-form .feature-fieldset legend,
#psc-studio.studio-theme .studio-page h2.feedback-step-title {
  display: flex; align-items: center; gap: 12px; grid-column: 1 / -1;
  font: 600 17px/1.4 var(--theme-sans); letter-spacing: 0; color: var(--studio-ink);
}
#psc-studio.studio-theme .feedback-step-number {
  display: inline-grid; place-items: center; flex: 0 0 30px; height: 30px;
  border: 1px solid var(--theme-border); border-radius: 50%; background: var(--theme-tint);
  color: var(--studio-blue); font: 700 13px/1 var(--theme-sans);
}
#psc-studio.studio-theme .feedback-optional { color: var(--studio-muted); font-weight: 400; font-size: 14px; }
#psc-studio.studio-theme .feedback-form .studio-field-help { margin: -6px 0 0; }
#psc-studio.studio-theme .feedback-count:empty { display: none; }
#psc-studio.studio-theme .feedback-count { margin-top: 0; text-align: right; }

/* Choice cards: native radios stay in the tab order; the card shows the checked state. */
#psc-studio.studio-theme :is(.feedback-kinds,.feedback-rating) { clear: both; display: grid; gap: 10px; }
#psc-studio.studio-theme .feedback-kinds { grid-template-columns: minmax(0,1fr); }
#psc-studio.studio-theme .feedback-rating { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
#psc-studio.studio-theme :is(.feedback-kinds,.feedback-rating) label { position: relative; display: block; cursor: pointer; }
#psc-studio.studio-theme :is(.feedback-kinds,.feedback-rating) input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
#psc-studio.studio-theme :is(.feedback-kinds,.feedback-rating) label > span {
  display: block; height: 100%; padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: #201a15;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#psc-studio.studio-theme :is(.feedback-kinds,.feedback-rating) strong { display: block; font-weight: 600; color: var(--studio-ink); }
#psc-studio.studio-theme :is(.feedback-kinds,.feedback-rating) small { display: block; margin-top: 2px; color: var(--studio-muted); font-size: 13px; line-height: 1.45; }
#psc-studio.studio-theme .feedback-kinds label > span { padding-right: 44px; }
#psc-studio.studio-theme .feedback-kinds label > span::after {
  content: ''; position: absolute; top: 16px; right: 16px; width: 20px; height: 20px;
  border: 1px solid var(--theme-border); border-radius: 50%; background: var(--theme-tint);
}
#psc-studio.studio-theme .feedback-rating label > span { padding: 12px 4px; text-align: center; }
#psc-studio.studio-theme .feedback-rating strong { font: 500 26px/1.1 var(--theme-serif); }
#psc-studio.studio-theme :is(.feedback-kinds,.feedback-rating) label:hover > span { border-color: var(--theme-border); }
#psc-studio.studio-theme :is(.feedback-kinds,.feedback-rating) input:checked + span {
  border-color: var(--theme-accent); background-color: #2a2118; box-shadow: 0 0 0 3px rgba(224,178,92,.14);
}
#psc-studio.studio-theme .feedback-kinds input:checked + span::after { background: var(--theme-tint) var(--theme-check) center / 16px no-repeat; border-color: var(--theme-accent); }
#psc-studio.studio-theme .feedback-rating input:checked + span strong { color: var(--studio-blue); }
#psc-studio.studio-theme :is(.feedback-kinds,.feedback-rating) input:focus-visible + span { outline: 2px solid var(--theme-accent); outline-offset: 3px; }
#psc-studio.studio-theme :is(.feedback-kinds,.feedback-rating) input:disabled + span { opacity: .6; cursor: default; }

@container (min-width:651px) {
  #psc-studio.studio-theme .feedback-kinds { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #psc-studio.studio-theme .feedback-rating { gap: 10px; }
  #psc-studio.studio-theme .feedback-rating label > span { padding: 14px 8px; }
}
@container (min-width:951px) {
  #psc-studio.studio-theme .feedback-hero { grid-template-columns: minmax(0,1.35fr) minmax(300px,1fr); gap: 56px; padding-block: 56px 48px; }
  #psc-studio.studio-theme .feedback-logo img { width: 180px; }
  #psc-studio.studio-theme .feedback-kinds { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #psc-studio.studio-theme .feedback-form { max-width: 980px; }
}
@media (forced-colors:active) {
  #psc-studio.studio-theme :is(.feedback-kinds,.feedback-rating) input { position: static; opacity: 1; width: auto; height: auto; }
  #psc-studio.studio-theme :is(.feedback-kinds,.feedback-rating) input:checked + span { border: 2px solid Highlight; }
}