/* Base styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f5f8fa;
  color: #0f1419;
  margin: 0;
  padding: 20px;
}

form { max-width: 640px; margin: 0 auto; }

button {
  background: #1d9bf0; border: none; border-radius: 9999px;
  color: #fff; padding: 10px 18px; font-weight: 600; cursor: pointer;
}
button:hover { background: #1a8cd8; }

/* --- Start page (centered card) --- */
.start-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px;
}
.start-card {
  background: #fff; border: 1px solid #eff3f4; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  max-width: 520px; width: 100%;
  padding: 8px 16px; text-align: center;
}
.start-card .instructions {
  color: #536471; font-size: 13px; line-height: 1.3; margin-bottom: 6px;
}
.start-card label { display:block; margin-bottom:3px; font-weight:600; font-size:14px; }
.start-card input[type="text"] {
  width:100%; padding:6px 8px; border:1px solid #eff3f4; border-radius:6px;
  font-size:14px; margin-bottom:6px;
}
.start-card button { padding:5px 12px; font-size:13px; }

/* --- One-at-a-time posts --- */
.post { display: none; }       /* hide all by default */
.post.active { display: block; } /* JS toggles this */

.post {
  background:#fff; border:1px solid #eff3f4; border-radius:16px;
  padding:12px 16px; margin:20px auto; max-width:640px;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
}
.post iframe, .post blockquote { width:100% !important; border-radius:12px; margin-top:8px; }

/* Progress */
.progress {
  display:flex; align-items:center; gap:12px; color:#536471;
  font-size:14px; max-width:640px; margin:12px auto 4px;
}
.bar { flex:1; height:6px; background:#e6ecf0; border-radius:999px; overflow:hidden; }
.bar > span { display:block; height:100%; width:0%; background:#1d9bf0; transition:width .25s ease; }

/* Rating controls (tappable chips) */
.rate-wrap { margin-top:10px; border-top:1px solid #eff3f4; padding-top:10px; }
.rate-label { display:block; font-size:14px; color:#536471; margin-bottom:8px; }

.scale { display:flex; justify-content:space-between; gap:8px; }
.scale input { position:absolute; opacity:0; pointer-events:none; }

/* keep chip + label stacked */
.scale-option {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scale .chip {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px; border-radius:999px;
  border:1px solid #eff3f4; background:#fff; color:#0f1419; font-weight:600;
  cursor:pointer; user-select:none; transition:transform .06s, background .2s, border-color .2s;
}
.scale .chip:hover { background:#f7fafc; }
.scale input:checked + .chip { background:#1d9bf0; border-color:#1d9bf0; color:#fff; transform:scale(0.98); }

/* helper text under 1 and 7 */
.scale-label {
  font-size: 11px;
  line-height: 1.2;
  margin-top: 4px;
  text-align: center;
  color: #555;
  max-width: 70px;
  word-wrap: break-word;
}

/* Submit fallback button */
form > button { display:block; margin:20px auto; }