/* "Prefer another language?" under the homepage form (assets/languages.js).
   Kept quiet: a small line that opens into the questions. Tokens from site.css. */

.lang-ask { margin: 1.4rem 0 0; max-width: var(--measure); }
.lang-ask[hidden], .lang-ask [hidden] { display: none; }

.lang-ask-box summary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--mist);
  list-style: none;
  border-bottom: 1px dotted var(--rule);
  padding-bottom: 0.1rem;
}
.lang-ask-box summary::-webkit-details-marker { display: none; }
.lang-ask-box summary::before { content: "\1F310"; font-size: 0.95em; margin-right: 0.1rem; }
.lang-ask-box summary:hover { color: var(--cream); }
.lang-ask-box summary:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-focus); }
.lang-ask-local { color: var(--cream); }

.lang-ask-step { margin-top: 1rem; }
.lang-ask-lead { margin: 0 0 0.8rem; font-weight: var(--weight-bold); color: var(--cream); }

.lang-ask-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lang-ask-list button,
.lang-ask-answers button {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--cream);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.95rem;
  cursor: pointer;
}
.lang-ask-list button:hover,
.lang-ask-answers button:hover { border-color: var(--amber); color: var(--amber); }
.lang-ask-list button:focus-visible,
.lang-ask-answers button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.lang-ask-answers { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.lang-ask-other { margin-top: 0.8rem; }
.lang-ask-other input[type="text"] {
  flex: 1 1 12rem;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--night);
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.1rem;
}
.lang-ask-other input[type="text"]::placeholder { color: var(--placeholder); opacity: 1; }
.lang-ask-other input[type="text"]:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-color: var(--amber); }
.lang-ask-other button { padding: 0.6rem 1.2rem; }

.lang-ask-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.9rem;
  font-size: var(--text-sm);
  color: var(--mist);
  cursor: pointer;
}
.lang-ask-consent input { margin-top: 0.25rem; accent-color: var(--amber); width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }