/* Candidate pages, on top of styles.css (the voicemail app's Koru Kids styles). */
h2.first { margin-top: 0; }
.btn { display: inline-block; text-decoration: none; }
.steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; flex-wrap: wrap; }
.steps li { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--ice); color: var(--muted); }
.steps li[aria-current] { background: var(--brand-green); color: var(--white); }
.steps li.done { background: var(--secondary-green); color: var(--brand-green); }
fieldset.basic { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
fieldset.basic legend { font-weight: 600; color: var(--brand-green); padding: 0; margin-bottom: 4px; }
.opts { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.opts label { font-weight: 400; color: var(--ink); display: flex; gap: 6px; align-items: center; margin: 2px 0; }
.opts input { accent-color: var(--primary-green); }
textarea { min-height: 150px; resize: vertical; }
.count { text-align: right; margin-top: 4px; }
.count.over { color: var(--bad); font-weight: 600; }
.q { margin-top: 26px; }
.q:first-child { margin-top: 0; }
.optional { font-weight: 400; color: var(--muted); }
.saved { font-size: 13px; color: var(--muted); }
.rec { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.rec .time { font: 600 20px/1 Inter, Arial, sans-serif; font-variant-numeric: tabular-nums; color: var(--brand-green); min-width: 4em; }
.rec .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rose); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.status { font-size: 14px; font-weight: 600; }
.status.ok { color: var(--primary-green); }
.status.bad { color: var(--bad); }
.taskcard h2 { margin-top: 0; }
.taskcard .state { font-weight: 600; color: var(--primary-green); }