/* Fields */
label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
input[type=email], input[type=text], textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 17px; /* >= 16px: no zoom on iOS */
  color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #8a8f94; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
[aria-invalid=true] { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 14px; min-height: 1.2em; }
.counter { color: var(--muted); font-size: 12px; text-align: right; min-height: 1.2em; }
.notice { color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }

/* Buttons */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; padding: 14px 20px;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--primary); color: #ffffff;
  font-size: 16px; font-weight: 600; letter-spacing: .01em;
  transition: opacity .2s, transform .1s;
}
.btn:not(:disabled):active { transform: scale(.985); }
.btn:disabled { opacity: .3; cursor: not-allowed; }
.btn:focus-visible, .link:focus-visible, .text-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn.light { background: #ffffff; color: var(--ink); }

.link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-size: 14px; font-weight: 600;
}
.text-link {
  min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer;
  color: var(--accent); font-size: 13px; font-weight: 600;
}
.text-link.on-dark { color: rgba(255,255,255,.85); font-size: 15px; }

/* Stars */
.star-svg { display: block; flex: none; }
.mini-stars { display: flex; gap: 3px; }
.mini-stars .star-svg { width: 14px; height: 14px; }

/* Brand medallion (the Q) */
.mark { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.mark.small { width: 34px; height: 34px; }
.loading .mark, .center-all .mark { width: 56px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; }
.program-name { font-size: 13px; font-weight: 600; color: var(--ink); }

/* Pillar ring: thin line, as on the programme slide */
.ring {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink); background: var(--card); color: var(--ink);
}
.ring .pillar-icon { width: 54%; height: 54%; }

/* Toast */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  max-width: 440px; margin: 0 auto; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff; font-size: 14px; text-align: center;
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }

/* Button busy state: small spinner before the label */
.btn.busy::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #ffffff;
  animation: spin .8s linear infinite;
}
.btn.busy:disabled { opacity: .85; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Sending status */
.sync { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 20px; font-size: 13px; color: var(--muted); text-align: center; transition: opacity .6s; }
.sync.fade { opacity: 0; }
.sync-icon { flex: none; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.sync.sending .sync-icon { border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.sync.saved .sync-icon { color: #1e7a4f; }
.sync.waiting .sync-icon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--star); }
.celebration .sync { color: rgba(255,255,255,.7); }
.celebration .sync.sending .sync-icon { border-color: rgba(255,255,255,.25); border-top-color: #ffffff; }
.celebration .sync.saved .sync-icon { color: #8fe0b5; }