.survey,
.survey--done {
--s-accent:      var(--accent, #1f6f8b);
--s-accent-dark: var(--accent-dark, #134453);
--s-accent-soft: var(--accent-soft, #e3eef3);
--s-border:      var(--border, #e2e6ea);
--s-fg:          var(--fg, #1d242b);
--s-fg-soft:     var(--fg-soft, #4a5560);
--s-fg-muted:    var(--fg-muted, #7a8590);
--s-radius:      var(--radius-lg, 8px);
--s-radius-sm:   var(--radius, 4px);
--s-field-bg:    var(--surface, #fff);
max-width: 40rem;
margin: 1.5rem 0 2.5rem;
}
.survey__title {
font-size: 1.4rem;
line-height: 1.3;
margin: 0 0 1.25rem;
color: var(--s-fg);
}
.survey__q {
border: 1px solid var(--s-border);
border-radius: var(--s-radius);
padding: 1rem 1.1rem 1.05rem;
margin: 0 0 1rem;
background: var(--s-field-bg);
min-inline-size: 0;
}
.survey__prompt {
display: block;
padding: 0;
font-weight: 600;
font-size: 1.02rem;
color: var(--s-fg);
margin-bottom: .7rem;
}
.survey__opt {
display: flex;
align-items: center;
gap: .6rem;
padding: .55rem .7rem;
border: 1px solid var(--s-border);
border-radius: var(--s-radius-sm);
margin-bottom: .4rem;
cursor: pointer;
transition: background-color .12s ease, border-color .12s ease;
}
.survey__opt:last-child { margin-bottom: 0; }
.survey__opt:hover { background: var(--s-accent-soft); }
.survey__opt input {
accent-color: var(--s-accent);
inline-size: 1.1rem; block-size: 1.1rem;
margin: 0; flex: none;
}
.survey__opt:has(input:checked) { background: var(--s-accent-soft); border-color: var(--s-accent); }
.survey__opt:has(input:focus-visible) { outline: 2px solid var(--s-accent); outline-offset: 1px; }
.survey__scale {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 2.5rem;
padding: .5rem .45rem;
margin: 0 .4rem .4rem 0;
border: 1px solid var(--s-border);
border-radius: var(--s-radius-sm);
cursor: pointer;
transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.survey__scale input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.survey__scale span { font-variant-numeric: tabular-nums; line-height: 1; }
.survey__scale:hover { background: var(--s-accent-soft); }
.survey__scale:has(input:checked) { background: var(--s-accent); border-color: var(--s-accent); color: #fff; }
.survey__scale:has(input:focus-visible) { outline: 2px solid var(--s-accent); outline-offset: 1px; }
.survey__textarea,
.survey__email input[type="email"] {
inline-size: 100%;
padding: .55rem .65rem;
border: 1px solid var(--s-border);
border-radius: var(--s-radius-sm);
font: inherit;
color: var(--s-fg);
background: var(--s-field-bg);
}
.survey__textarea { resize: vertical; min-block-size: 4.5rem; }
.survey__textarea:focus,
.survey__email input[type="email"]:focus {
outline: none;
border-color: var(--s-accent);
box-shadow: 0 0 0 3px var(--s-accent-soft);
}
.survey__email {
border: 1px solid var(--s-border);
border-radius: var(--s-radius);
padding: .9rem 1.1rem 1rem;
margin: 0 0 1rem;
background: var(--s-accent-soft);
}
.survey__consent {
display: flex;
align-items: flex-start;
gap: .6rem;
cursor: pointer;
}
.survey__consent input {
accent-color: var(--s-accent);
inline-size: 1.1rem; block-size: 1.1rem;
margin: .15rem 0 0; flex: none;
}
.survey__email .survey__consent { margin-bottom: .65rem; }
.survey__email input[type="email"]:disabled {
background: color-mix(in srgb, var(--s-fg-muted) 12%, #fff);
color: var(--s-fg-muted);
cursor: not-allowed;
}
.survey__purpose {
margin: .55rem 0 0;
font-size: .85rem;
color: var(--s-fg-soft);
}
.survey > form > .survey__consent { margin: 0 0 1rem; }
.survey__submit {
appearance: none;
border: 0;
background: var(--s-accent);
color: #fff;
font: inherit;
font-weight: 600;
padding: .65rem 1.5rem;
border-radius: var(--s-radius-sm);
cursor: pointer;
transition: background-color .12s ease;
}
.survey__submit:hover { background: var(--s-accent-dark); }
.survey__submit:focus-visible { outline: 2px solid var(--s-accent-dark); outline-offset: 2px; }
.survey__note {
margin: .85rem 0 0;
font-size: .8rem;
color: var(--s-fg-muted);
line-height: 1.55;
}
.survey__thanks {
margin: 1.5rem 0;
padding: 1rem 1.2rem;
border: 1px solid var(--success, #2d7a4f);
border-radius: var(--s-radius);
background: var(--success-soft, #e6f4ec);
color: var(--s-fg);
font-size: 1.05rem;
}