/* ============================================================
   Global Voices — logo treatment and the registration form

   The logo becomes a white disc, matching the live site: the mark
   is drawn for light backgrounds, so on the dark navy nav it needs
   its own ground rather than sitting on the page colour.
   ============================================================ */

/* ---------- 1. The logo ------------------------------------- */

/* object-fit: contain, not cover — the base rule crops a square
   mark inside a circle, which clipped the ring of the badge. */
.nav__logo,
.footer__logo-img,
.brand__logo {
  background: #fff;
  border: 0;
  border-radius: 50%;
  object-fit: contain;
  padding: 3px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16),
              0 2px 10px rgba(0, 0, 0, 0.35);
}

/* The footer mark is a lettered circle rather than an image; it
   keeps the brand gradient and is left alone. */

/* ---------- 2. Registration form ---------------------------- */

/* The programme select leads the form, so it reads as the first
   decision rather than an afterthought below the name. */
#registerForm .field select,
#registerForm .field input,
#registerForm .field textarea {
  width: 100%;
}

/* A select showing its placeholder is dimmed like a text
   placeholder, so an unanswered question looks unanswered. */
#registerForm select:invalid,
#registerForm select.is-placeholder { color: rgba(255, 255, 255, 0.42); }
#registerForm select option { color: var(--ink); background: var(--bg-2); }

/* A field the visitor has been told about is marked on the field
   itself rather than only in the error message. */
#registerForm .field.is-bad input,
#registerForm .field.is-bad select,
#registerForm .field.is-bad textarea {
  border-color: rgba(255, 94, 126, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 94, 126, 0.15);
}

#registerForm .field__hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ---------- 3. The result message --------------------------- */

.form-msg {
  margin-bottom: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.92rem;
  line-height: 1.6;
}

.form-msg:empty { display: none; }

.form-msg.is-working {
  border-color: rgba(255, 210, 122, 0.35);
  background: rgba(255, 210, 122, 0.08);
  color: var(--gold);
}

.form-msg.is-success,
.form-msg.ok {
  border-color: rgba(75, 208, 122, 0.45);
  background: rgba(75, 208, 122, 0.12);
  color: #8fe9b0;
}

.form-msg.is-error,
.form-msg.err {
  border-color: rgba(255, 94, 126, 0.45);
  background: rgba(255, 94, 126, 0.1);
  color: #ffc2cf;
}

/* ---------- 4. Registrations in the moderation panel -------- */

.regs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.2rem;
}

.regs__count { margin: 0; font-size: 0.84rem; color: var(--ink-faint); }

/* Nine columns do not fit a reading-width panel, so the panel grows
   for this view only and the table scrolls inside it. */
.reader__panel.is-regs { width: min(74rem, 100%); }

.regs__wrap {
  position: relative;
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 138, 30, 0.55) transparent;
}

.regs__wrap::-webkit-scrollbar { height: 8px; }
.regs__wrap::-webkit-scrollbar-track { background: transparent; }
.regs__wrap::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255, 138, 30, 0.55); }

/* A fade on the right edge, so it is obvious there are more columns
   than the panel can show. It sits outside the scroller so it stays
   put while the table moves under it. */
.regs__scroller { position: relative; }

.regs__scroller::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 8px;
  width: 3rem;
  pointer-events: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: linear-gradient(to left, var(--bg-2), rgba(10, 19, 38, 0));
}

.regs__scroller.is-end::after { opacity: 0; transition: opacity 0.2s; }

.regs__hint {
  margin: 0.5rem 0 0;
  font-size: 0.76rem;
  color: var(--ink-faint);
}

.regs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  white-space: nowrap;
}

.regs__table th,
.regs__table td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.regs__table th {
  position: sticky;
  top: 0;
  background: var(--bg-2);
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.regs__table tr:last-child td { border-bottom: 0; }
.regs__table tbody tr:hover { background: rgba(255, 255, 255, 0.035); }
.regs__table td { color: var(--ink-soft); }
.regs__table td.regs__name { color: #fff; font-weight: 700; }

/* The motivation column is the only long one; it wraps rather
   than pushing the table sideways forever. */
.regs__table td.regs__why {
  white-space: normal;
  min-width: 16rem;
  max-width: 24rem;
  color: var(--ink-faint);
}

/* Whether the row also reached the Google Sheet. */
.regs__sync {
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.regs__sync--yes { color: #6fe09a; }
.regs__sync--no  { color: #ffb3c1; }

@media (max-width: 640px) {
  .regs__head { display: block; }
  .regs__head .mod__btn { width: 100%; margin-top: 0.7rem; }
}