/*
 * The rater page (WP08, rate/layouts/shell.html.erb), on the shared brand tokens in tokens.css. The --pl-*
 * names map to those tokens so the rules read as before. Scoped under body.rate / .rate because the console's
 * layout links every stylesheet. (Was an inline <style> block; a stylesheet keeps it working under a strict
 * content security policy.)
 */
body.rate {
  --pl-bg: var(--bg); --pl-surface: var(--surface); --pl-ink: var(--ink); --pl-muted: var(--muted);
  --pl-rule: var(--rule); --pl-accent: var(--accent); --pl-bad: var(--bad); --pl-good: var(--good);
}
body.rate *, body.rate *::before, body.rate *::after { box-sizing: border-box; }
body.rate { margin: 0; background: var(--pl-bg); color: var(--pl-ink); font: 16px/1.5 var(--f-body); }
.rate-top { display: flex; justify-content: space-between; align-items: center; padding: .75rem 16px; border-bottom: 1px solid var(--pl-rule); background: var(--pl-surface); }
.rate-brand { font-size: 1.05rem; }
.rate h1, .rate h2 { font-family: var(--f-display); letter-spacing: -.01em; }
.rate-main { width: min(100%, 72rem); margin: 0 auto; padding: 1.25rem 16px 2rem; display: grid; gap: 1rem; }
.rate-footer { text-align: center; color: var(--pl-muted); font-size: .85rem; padding: 1.5rem 16px; }
.rate h1 { font-size: 1.5rem; margin: 0; }
.rate h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.rate a { color: var(--pl-accent); }
.rate-card { background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 10px; padding: 1rem; }
.rate-muted { color: var(--pl-muted); }
.rate-notice { color: var(--pl-good); margin: 0; }
.rate-alert { color: var(--pl-bad); margin: 0; }
.rate form.rate-form { display: grid; gap: 1rem; }
.rate label { cursor: pointer; }
.rate input[type=email], .rate input[type=text], .rate textarea {
  font: inherit; color: var(--pl-ink); background: var(--pl-surface); border: 1px solid var(--pl-rule);
  border-radius: 6px; padding: .45rem .6rem; width: 100%;
}
.rate textarea { min-height: 5rem; }
.rate-button, .rate input[type=submit], .rate button.rate-button {
  font: inherit; font-weight: 600; background: var(--pl-accent); color: var(--on-accent); border: 0; border-radius: 6px;
  padding: .55rem 1rem; cursor: pointer; justify-self: start; text-decoration: none; display: inline-block;
}
.rate a.rate-button { color: var(--on-accent); } /* .rate a is more specific than .rate-button alone */
.rate-link-button { font: inherit; background: none; border: 0; color: var(--pl-accent); cursor: pointer; padding: 0; }
.rate-progress { display: grid; gap: .3rem; }
.rate-progress progress { width: 100%; height: .6rem; accent-color: var(--pl-accent); }
.rate-prompt { white-space: pre-wrap; }
.rate-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rate-answer { white-space: pre-wrap; overflow-wrap: anywhere; }
.rate-answer h2 { color: var(--pl-muted); }
.rate-choice { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.rate fieldset { border: 1px solid var(--pl-rule); border-radius: 10px; padding: .75rem 1rem; margin: 0; background: var(--pl-surface); display: grid; gap: .5rem; }
.rate legend { font-weight: 600; padding: 0 .25rem; }
.rate-question { display: grid; gap: .4rem; }
.rate-legend { font-weight: 600; }
.rate-sliders { display: grid; grid-template-columns: auto 1fr 1fr; gap: .4rem 1rem; align-items: center; }
.rate-sliders input[type=range] { width: 100%; accent-color: var(--pl-accent); }
.rate-fields { display: grid; gap: .5rem; margin: 0; }
.rate-fields dt { font-weight: 600; }
.rate-fields dd { margin: 0; white-space: pre-wrap; }
@media (max-width: 700px) {
  .rate-answers { grid-template-columns: 1fr; }
  .rate-sliders { grid-template-columns: 1fr; }
}