/* ==========================================================================
   Components: class-based building blocks. Blazor components in
   Components/Shared render these classes; plain markup may use them too.
   Naming: .block, .block__element, .block--modifier.
   ========================================================================== */

/* ---- Button ------------------------------------------------------------ */

.button {
  --button-bg: var(--color-surface);
  --button-fg: var(--color-text);
  --button-border: var(--color-border-strong);
  --button-bg-hover: var(--color-surface-sunken);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem; /* 44px touch target */
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--button-border);
  border-radius: var(--radius-md);
  background: var(--button-bg);
  color: var(--button-fg);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing);
}

.button:hover {
  background: var(--button-bg-hover);
  text-decoration: none;
}

.button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.button--primary {
  --button-bg: var(--color-primary);
  --button-fg: var(--color-on-primary);
  --button-border: var(--color-primary);
  --button-bg-hover: var(--color-primary-hover);
}

.button--primary:hover {
  border-color: var(--color-primary-hover);
}

.button--secondary {
  --button-fg: var(--color-primary-text);
  --button-border: var(--color-primary);
  --button-bg-hover: var(--color-primary-subtle);
}

.button--ghost {
  --button-bg: transparent;
  --button-border: transparent;
  --button-fg: var(--color-primary-text);
  --button-bg-hover: var(--color-primary-subtle);
  padding-inline: var(--space-3);
}

.button--danger {
  --button-bg: var(--color-danger);
  --button-fg: var(--color-on-danger);
  --button-border: var(--color-danger);
  --button-bg-hover: var(--color-danger-text);
}

.button--sm {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.button--lg {
  min-height: 3.25rem;
  padding-inline: var(--space-6);
  font-size: var(--text-lg);
}

.button--block {
  display: flex;
  width: 100%;
}

/* ---- Auth form (login, sign-up, password pages) ----------------------- */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.auth-form__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth-form__title {
  font-size: var(--text-3xl);
}

.auth-form__switch {
  text-align: center;
}

.auth-form__switch a {
  font-weight: var(--weight-semibold);
}

.auth-form__help {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* Horizontal rule with a centred label, e.g. "or". */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border);
}

/* ---- Card -------------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

@media (min-width: 40rem) {
  .card {
    padding: var(--space-6);
  }
}

.card__title {
  color: var(--color-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
}

/* ---- Alert ------------------------------------------------------------- */

.alert {
  --alert-bg: var(--color-primary-subtle);
  --alert-fg: var(--color-primary-text);
  --alert-bar: var(--color-primary);

  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--alert-bar);
  border-radius: var(--radius-md);
  background: var(--alert-bg);
  color: var(--alert-fg);
}

.alert > :first-child { margin-top: 0; }

.alert a {
  color: inherit;
  font-weight: var(--weight-semibold);
}

.alert--info {
  --alert-bg: var(--color-primary-subtle);
  --alert-fg: var(--color-primary-text);
  --alert-bar: var(--color-primary);
}

.alert--success {
  --alert-bg: var(--color-success-subtle);
  --alert-fg: var(--color-success-text);
  --alert-bar: var(--color-success);
}

.alert--warning {
  --alert-bg: var(--color-warning-subtle);
  --alert-fg: var(--color-warning-text);
  --alert-bar: var(--color-warning);
}

.alert--danger {
  --alert-bg: var(--color-danger-subtle);
  --alert-fg: var(--color-danger-text);
  --alert-bar: var(--color-danger);
}

/* ---- Badge ------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}

.badge--primary { background: var(--color-primary-subtle); color: var(--color-primary-text); }
.badge--accent  { background: var(--color-accent-subtle);  color: var(--color-accent-text); }
.badge--success { background: var(--color-success-subtle); color: var(--color-success-text); }
.badge--warning { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.badge--danger  { background: var(--color-danger-subtle);  color: var(--color-danger-text); }

/* ---- Filter chips ------------------------------------------------------ */

/* A row of links that filter a list (e.g. guides by country). Plain links, so they work without JavaScript;
   the active one carries aria-current="page". */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing);
}

/* A chip that's a button (the checklist's countries when changing would ask first): looks the same as a link chip. */
button.filter-chip {
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.filter-chip:hover {
  border-color: var(--color-primary);
}

.filter-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.filter-chip[aria-current="page"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.filter-chip__count {
  color: inherit;
  opacity: 0.75;
}

/* Guide finder on the home page: country chips (radios, hidden) choose which procedure chips show, without a script
   or a page load. Matched by position, so the markup puts the radios first, then the country labels, then the panels
   in the same order (up to six countries). The chosen country is a filled chip; procedures stay outlined. */
.guide-finder {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.guide-finder__countries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.guide-finder__countries .filter-chip {
  cursor: pointer;
}

.guide-finder__panel {
  display: none;
}

.guide-finder > input:nth-of-type(1):checked ~ .guide-finder__panels > .guide-finder__panel:nth-child(1) {
  display: flex;
}

.guide-finder > input:nth-of-type(1):checked ~ .guide-finder__countries > .filter-chip:nth-child(1) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.guide-finder > input:nth-of-type(1):focus-visible ~ .guide-finder__countries > .filter-chip:nth-child(1) {
  box-shadow: var(--focus-ring);
}

.guide-finder > input:nth-of-type(2):checked ~ .guide-finder__panels > .guide-finder__panel:nth-child(2) {
  display: flex;
}

.guide-finder > input:nth-of-type(2):checked ~ .guide-finder__countries > .filter-chip:nth-child(2) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.guide-finder > input:nth-of-type(2):focus-visible ~ .guide-finder__countries > .filter-chip:nth-child(2) {
  box-shadow: var(--focus-ring);
}

.guide-finder > input:nth-of-type(3):checked ~ .guide-finder__panels > .guide-finder__panel:nth-child(3) {
  display: flex;
}

.guide-finder > input:nth-of-type(3):checked ~ .guide-finder__countries > .filter-chip:nth-child(3) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.guide-finder > input:nth-of-type(3):focus-visible ~ .guide-finder__countries > .filter-chip:nth-child(3) {
  box-shadow: var(--focus-ring);
}

.guide-finder > input:nth-of-type(4):checked ~ .guide-finder__panels > .guide-finder__panel:nth-child(4) {
  display: flex;
}

.guide-finder > input:nth-of-type(4):checked ~ .guide-finder__countries > .filter-chip:nth-child(4) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.guide-finder > input:nth-of-type(4):focus-visible ~ .guide-finder__countries > .filter-chip:nth-child(4) {
  box-shadow: var(--focus-ring);
}

.guide-finder > input:nth-of-type(5):checked ~ .guide-finder__panels > .guide-finder__panel:nth-child(5) {
  display: flex;
}

.guide-finder > input:nth-of-type(5):checked ~ .guide-finder__countries > .filter-chip:nth-child(5) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.guide-finder > input:nth-of-type(5):focus-visible ~ .guide-finder__countries > .filter-chip:nth-child(5) {
  box-shadow: var(--focus-ring);
}

.guide-finder > input:nth-of-type(6):checked ~ .guide-finder__panels > .guide-finder__panel:nth-child(6) {
  display: flex;
}

.guide-finder > input:nth-of-type(6):checked ~ .guide-finder__countries > .filter-chip:nth-child(6) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.guide-finder > input:nth-of-type(6):focus-visible ~ .guide-finder__countries > .filter-chip:nth-child(6) {
  box-shadow: var(--focus-ring);
}

/* Moving checklist: numbered steps with a tick box; done steps fade a little. */
.checklist-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.checklist-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.checklist-step input[type="checkbox"] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--color-primary);
}

.checklist-step__title {
  font-weight: var(--weight-semibold);
}

.checklist-step__when {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

/* The dated plan: a step's date (deadline bold, suggested and "from" quieter). */
.checklist-step__date {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.checklist-step__date--suggested,
.checklist-step__date--from {
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

/* An organisation's own note on a step (B2B): its name, then its words, on a quiet tint. */
.checklist-step__note {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-primary-subtle);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.checklist-arrival .input {
  max-width: 14rem;
}

.checklist-step--done {
  background: var(--color-surface-sunken);
}

.checklist-step--done .checklist-step__title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* "More guides" at the end of a guide: set apart like "Spot a mistake?" below it. */
.guide__more {
  max-width: var(--container-narrow);
  margin-top: var(--space-7);
}

/* "Spot a mistake?" at the end of a guide: set apart from the content above it. */
.guide-report {
  max-width: var(--container-narrow);
  margin-top: var(--space-2);
}

/* "Spot a mistake? Let us know": a quiet link that opens the form. */
.guide-report__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  list-style: none;
  cursor: pointer;
}

.guide-report__toggle::-webkit-details-marker {
  display: none;
}

.guide-report__toggle:hover {
  text-decoration: underline;
}

.guide-report__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.guide-report__body {
  margin-top: var(--space-4);
}

.guide__sources-line {
  margin-top: var(--space-5);
}

.guide__sources-line a {
  overflow-wrap: anywhere;
}

/* Share a guide: a small row under the title. */
.guide-share {
  gap: var(--space-1) var(--space-2);
}

.guide-share__label {
  margin-right: var(--space-1);
}

/* More guides: the rest, folded. */
.guide__more-all summary {
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  cursor: pointer;
}

.guide__more-all .item-list {
  margin-top: var(--space-2);
}

/* ---- Ratings ----------------------------------------------------------- */

/* Star picker: real radios (keyboard and screen readers work), drawn as stars. Stars up to the choice get .is-on. */
.star-input {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0;
}

.star-input__stars {
  display: flex;
  gap: var(--space-1);
}

.star-input input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.star-input label {
  display: inline-flex;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--color-border-strong);
  cursor: pointer;
  transition: color var(--duration-fast) var(--easing);
}

.star-input label:hover,
.star-input label.is-on {
  color: var(--color-accent);
}

.star-input label.is-on .icon {
  fill: currentColor;
}

.star-input input:focus-visible + label {
  box-shadow: var(--focus-ring);
}

.star-input input:disabled + label {
  cursor: default;
  opacity: 0.6;
}

/* Average rating display: "★ 4.8 (12)". */
.stars {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.stars__icon {
  color: var(--color-accent);
  fill: currentColor;
}

.stars__icon--off {
  color: var(--color-border-strong);
  fill: none;
}

/* ---- Forms ------------------------------------------------------------- */

/* A field groups label, control and validation. The label is shown above the
   control even when it comes after the input in markup (Identity pages). */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field > label,
.field__label {
  order: -1;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
}

/* Label with an inline action on the right (e.g. "Forgot password?"). */
.field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  order: -1;
}

.field__row > label {
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
}

.field__hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--easing), box-shadow var(--duration-fast) var(--easing);
}

.input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.8;
}

/* File fields (organisation invites from a spreadsheet): a quiet secondary button, not the browser's grey one. */
.input[type="file"] {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.input:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring);
}

.input:disabled,
.input[readonly] {
  background: var(--color-surface-sunken);
}

.input.invalid,
.input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

textarea.input {
  min-height: 7rem;
  resize: vertical;
}

/* Input with an attached addon (e.g. "verified" tick). */
.input-group {
  display: flex;
}

.input-group > .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group__addon {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-left: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface-sunken);
  color: var(--color-success-text);
  font-weight: var(--weight-bold);
}

.checkbox,
.checkbox > label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.checkbox input[type="checkbox"] {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-primary);
}

/* A checkbox with a title and a line of explanation: the box sits by the first line. */
.checkbox--top {
  align-items: flex-start;
}

.checkbox--top input[type="checkbox"] {
  margin-top: 0.2rem;
}

/* Choice: a checkbox or radio presented as a selectable card with title + description. */
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing), background-color var(--duration-fast) var(--easing);
}

.choice:hover {
  background: var(--color-surface-sunken);
}

.choice:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.choice:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}

.choice input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

.choice__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Choice chips: one short answer per chip (a hidden radio carries the full wording for screen readers), e.g. the
   moving checklist's questions. The chosen one is filled, like an active filter chip. */
.choice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.choice-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing);
}

.choice-chip:hover {
  border-color: var(--color-primary);
}

.choice-chip:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}

.choice-chip:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* The checklist's answers folded into one line ("UK · Work · Málaga") with Change, inside the questions card. */
.checklist-answers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

/* Blazor's built-in validation output (ValidationMessage / ValidationSummary). */
.validation-message,
.validation-errors {
  color: var(--color-danger-text);
  font-size: var(--text-sm);
}

.validation-errors {
  margin: 0;
  padding-left: var(--space-5);
}

.validation-errors:empty {
  display: none;
}

/* Form layout: a column of fields with consistent spacing. */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---- Item list: rows of content + actions (e.g. helper experiences) ---- */

.item-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.item-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* ---- Organisation pages (B2B) -------------------------------------------- */

/* Things that open in place (the invite form, "Manage" on a row, the emails a manager gets). */
details.card > summary,
.org-manage > summary,
.org-emails > summary,
.org-link > summary,
.org-cost > summary {
  cursor: pointer;
}

details.card[open] > summary {
  margin-bottom: var(--space-4);
}

.org-manage > summary {
  list-style: none;
  white-space: nowrap;
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.org-manage > summary::-webkit-details-marker {
  display: none;
}

.org-manage > summary::after {
  content: " ▾";
}

.org-manage[open] > summary::after {
  content: " ▴";
}

.org-manage[open] > summary {
  margin-bottom: var(--space-2);
}

.org-emails > summary,
.org-link > summary,
.org-cost > summary {
  color: var(--color-primary-text);
  font-weight: var(--weight-semibold);
}

.org-emails[open] > summary,
.org-link[open] > summary {
  margin-bottom: var(--space-3);
}

/* Dates to remember: who to give one to (the follow-on choices indented under their option). */
.date-give__sub {
  margin-inline-start: var(--space-6);
}

.date-give__people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

/* The moving checklist for someone an organisation covers: its country, said once, instead of the country chips. */
.checklist-organisation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  color: var(--color-text-muted);
}

.checklist-organisation > span {
  flex: 1 1 12rem;
}

.checklist-organisation svg {
  color: var(--color-primary-text);
}

/* "What needs you": the line, then its one action. */
.org-todo > span {
  flex: 1 1 16rem;
}

/* An announcement before it's sent, and messages as members see them: a quiet tint, no border. */
.org-preview,
.org-message {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.org-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-message > * + * {
  margin-top: var(--space-2);
}

/* A step the organisation does for them: done, with a tick in place of the checkbox. */
.checklist-step__handled {
  flex: none;
  margin-top: var(--space-1);
  color: var(--color-success);
}

/* ---- Table ------------------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.table th {
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}

.table-scroll {
  overflow-x: auto;
}

/* ---- Sub-navigation (vertical, e.g. account settings) ----------------- */

.subnav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
}

.subnav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.subnav a:hover {
  background: var(--color-surface-sunken);
}

.subnav a.active {
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
}

/* ---- Page header ------------------------------------------------------- */

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.page-header__eyebrow {
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-header__lead {
  max-width: 42rem;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

/* ---- Disclaimer (trust & safety rule 3, CLAUDE.md §6) ---------------- */

.disclaimer {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.disclaimer__icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  color: var(--color-primary);
}

/* ---- Theme switcher (segmented control) ------------------------------ */

.theme-switch {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}

.theme-switch__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.theme-switch__option:hover {
  color: var(--color-text);
}

.theme-switch__option[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-primary-text);
  box-shadow: var(--shadow-sm);
}

.theme-switch__option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Misc -------------------------------------------------------------- */

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-family: var(--font-mono);
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-xs);
}

.swatch__chip {
  height: 3.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Blazor's unhandled-error bar. */
#blazor-error-ui {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1000;
  padding: var(--space-3) var(--gutter);
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
  box-shadow: var(--shadow-md);
}

#blazor-error-ui .reload {
  color: inherit;
  font-weight: var(--weight-semibold);
}

#blazor-error-ui .dismiss {
  position: absolute;
  top: var(--space-3);
  right: var(--gutter);
  cursor: pointer;
}

.blazor-error-boundary {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}

.blazor-error-boundary::after {
  content: "Something went wrong.";
}

/* ---- Guides (roadmap 2.2) --------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.guide__meta {
  margin-bottom: var(--space-6);
}

.guide__layout {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 64rem) {
  .guide__layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
  }

  .guide__aside {
    position: sticky;
    top: var(--space-5);
  }
}

.guide__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.guide__sources {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-5);
  font-size: var(--text-sm);
}

/* A whole card that is a link (e.g. guide listings). */
.card--link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--easing), box-shadow var(--duration-fast) var(--easing);
}

.card--link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.card--link .badge {
  align-self: flex-start;
}

/* Long-form text rendered from Markdown. */
.prose {
  max-width: 42rem;
  font-size: var(--text-lg);
  line-height: 1.7;
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2 {
  margin-top: var(--space-6);
  font-size: var(--text-xl);
}

.prose h3 {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
}

.prose h2 + *,
.prose h3 + * {
  margin-top: var(--space-3);
}

.prose ul,
.prose ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prose blockquote {
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.prose th,
.prose td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.prose strong {
  font-weight: var(--weight-semibold);
}

/* ---- Marketing pages (roadmap 2.3) ------------------------------------ */

/* Brand hero: gradient panel with white text. */
.hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--brand-gradient);
  color: var(--color-on-brand);
}

@media (min-width: 48rem) {
  .hero {
    padding: var(--space-8) var(--space-7);
  }
}

.hero__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}

.hero__title {
  max-width: 40rem;
  color: inherit; /* stays white on the brand gradient */
  font-size: var(--text-display);
}

.hero__lead {
  max-width: 38rem;
  font-size: var(--text-lg);
  opacity: 0.92;
}

/* A short line under the hero's button (Become a helper: helpers never pay, the founding badge). */
.hero__note {
  max-width: 38rem;
  font-size: var(--text-sm);
  opacity: 0.85;
}

/* Button for use on the brand gradient. */
.button--inverse {
  --button-bg: var(--color-on-brand);
  --button-fg: var(--color-brand-ink);
  --button-border: var(--color-on-brand);
  --button-bg-hover: color-mix(in srgb, var(--color-on-brand) 88%, transparent);
}

.button--outline-inverse {
  --button-bg: transparent;
  --button-fg: var(--color-on-brand);
  --button-border: color-mix(in srgb, var(--color-on-brand) 70%, transparent);
  --button-bg-hover: color-mix(in srgb, var(--color-on-brand) 12%, transparent);
}

/* Section heading block used down marketing pages. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 40rem;
}

/* Numbered steps. */
.steps {
  display: grid;
  gap: var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.steps > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
  font-weight: var(--weight-bold);
}

/* List with check marks. Pair each item's text with an <Icon Name="check" />. */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.checklist .icon {
  flex: none;
  margin-top: 0.15rem;
  color: var(--color-primary);
}

/* Pricing plans. */
.plans {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}

@media (min-width: 48rem) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 26rem));
  }
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.plan--featured {
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}

.plan__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.plan__price {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan__price small {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}

.plan .checklist {
  flex: 1;
}

/* Feature row with an icon (trust points). */
.feature {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.feature > .icon {
  flex: none;
  padding: 0.4rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
}

/* FAQ using <details>: works without JavaScript. */
.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.faq details {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.faq summary {
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.faq details > :not(summary) {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

/* ---- Icon button: square, icon-only (always give it an aria-label) ---- */

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}

.icon-button:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.icon-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Account menu (top bar dropdown, <details>-based) ----------------- */

.account-menu {
  position: relative;
}

.account-menu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  list-style: none;
  cursor: pointer;
}

.account-menu__trigger::-webkit-details-marker {
  display: none;
}

.account-menu__trigger:hover,
.account-menu[open] .account-menu__trigger {
  background: var(--color-surface-sunken);
}

.account-menu__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.account-menu__name {
  display: none;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .account-menu__name {
    display: inline;
  }
}

.account-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 14rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.account-menu__header {
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.account-menu__header strong {
  color: var(--color-text);
}

.account-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-menu__item:hover {
  background: var(--color-surface-sunken);
}

.account-menu__item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Language menu: the account-menu dropdown with the current language marked. */
.language-menu__code {
  font-weight: var(--weight-semibold);
}

.language-menu .account-menu__panel {
  min-width: 11rem;
}

.language-menu .account-menu__item[aria-current="true"] {
  font-weight: var(--weight-semibold);
}

.language-menu__check {
  margin-left: auto;
  color: var(--color-primary-text);
}

/* ---- Chat (Ask page, and later helper chat) --------------------------- */

.chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 48rem;
  margin-inline: auto;
}

.chat__title {
  font-size: var(--text-xl);
}

.chat__thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 40vh;
}

.chat__empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-6);
}

.chat__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.suggestion {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing), background-color var(--duration-fast) var(--easing);
}

.suggestion:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.suggestion:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.message {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(36rem, 88%);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  line-height: var(--leading-normal);
}

.message--user {
  align-self: flex-end;
  border-bottom-right-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.message--assistant {
  align-self: flex-start;
  border: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
  background: var(--color-surface);
}

.message--escalation {
  border-color: var(--color-accent-subtle);
  background: color-mix(in srgb, var(--color-accent-subtle) 45%, var(--color-surface));
}

.message__sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.source-chip:hover {
  text-decoration: underline;
}

.source-chip__date {
  font-weight: var(--weight-regular);
  opacity: 0.8;
}

.prose--compact {
  max-width: none;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.prose--compact > * + * {
  margin-top: var(--space-2);
}

/* Typing indicator. */
.typing {
  display: inline-flex;
  gap: 4px;
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
  animation: typing 1.2s infinite ease-in-out;
}

.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Composer pinned to the bottom of the viewport (above the phone tab bar). */
.chat__composer {
  position: sticky;
  bottom: calc(var(--tabbar-height, 0px) + env(safe-area-inset-bottom) + var(--space-2));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  background: linear-gradient(to top, var(--color-bg) 75%, transparent);
}

@media (min-width: 48rem) {
  .chat__composer {
    bottom: var(--space-4);
  }
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.composer:focus-within {
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring), var(--shadow-md);
}

.composer__input {
  flex: 1;
  min-height: 2.5rem;
  max-height: 10rem;
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  field-sizing: content; /* grows with the text where supported */
  resize: none;
}

.composer__input:focus {
  outline: none;
}

.composer__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
}

.composer__send:hover {
  background: var(--color-primary-hover);
}

.composer__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.composer__send:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.chat__note {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

/* ---- Notifications (the bell in the top bar and /notifications) ------- */

.notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--color-text);
}

.notification-bell:hover {
  background: var(--color-surface-sunken);
}

.notification-bell:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The count pill, over the bell's top-right corner. */
.notification-bell__count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: calc(var(--space-4) + var(--space-1));
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: var(--color-on-danger);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: calc(var(--space-4) + var(--space-1));
  text-align: center;
  box-shadow: 0 0 0 2px var(--color-surface);
}

.notification-bell__count[hidden] {
  display: none;
}

.notification-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.notification-list > li + li {
  border-top: 1px solid var(--color-border);
}

/* A whole-row link: icon, title and line, time. Unread rows are tinted and bold. */
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}

.notification-item:hover {
  background: var(--color-surface-sunken);
}

.notification-item:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}

.notification-item__icon {
  display: inline-flex;
  flex-shrink: 0;
  padding: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.notification-item__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.notification-item__title {
  font-weight: var(--weight-medium);
}

.notification-item__line {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.notification-item__time {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Unread: a light tint, bold title and a dot before the time. */
.notification-item--unread {
  background: color-mix(in srgb, var(--color-primary-subtle) 55%, var(--color-surface));
}

.notification-item--unread:hover {
  background: var(--color-primary-subtle);
}

.notification-item--unread .notification-item__time::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.notification-item--unread .notification-item__title {
  font-weight: var(--weight-bold);
}

.notification-item--unread .notification-item__icon {
  background: var(--color-surface);
  color: var(--color-primary-text);
}

/* Expat demand on the helper's inbox card ("12 people in Málaga are working on TIE"). */
.dashboard-demand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary-text);
  font-weight: var(--weight-medium);
}

/* ---- Shortcut list (the dashboard's links after its one action) -------- */

/* Quiet rows with an icon, a label, an optional count and a chevron: links, not cards. */
.shortcut-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.shortcut-list > li {
  border-bottom: 1px solid var(--color-border);
}

.shortcut {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: var(--space-2) var(--space-1);
  color: var(--color-text);
  text-decoration: none;
}

.shortcut > span:first-of-type {
  flex: 1;
}

.shortcut > .icon:first-child {
  color: var(--color-primary-text);
}

.shortcut:hover {
  color: var(--color-primary-text);
}

.shortcut:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.shortcut__count {
  min-width: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-align: center;
}

.shortcut__go {
  color: var(--color-text-muted);
  transform: rotate(-90deg);
}

/* ---- Help requests (My requests, helper inbox, request chat) ----------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
}

.empty-state strong {
  color: var(--color-text);
}

.request-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A whole-row link to a request. */
.request-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--easing), box-shadow var(--duration-fast) var(--easing);
}

.request-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.request-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.request-card__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.request-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.request-card__title {
  color: var(--color-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.request-card__description {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.request-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.request-header__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.request-header__description summary {
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  cursor: pointer;
}

.request-header__description p {
  margin-top: var(--space-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.request-actions {
  justify-content: flex-end;
}

/* The helper's stars, resolved count and badges in one row (request page). */
.request-header__badges {
  gap: var(--space-2);
}

.message__meta {
  font-size: var(--text-xs);
  opacity: 0.8;
}

.message__body {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.message__report {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
}

.message__report:hover {
  color: var(--color-danger-text);
}

.message__report:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.report-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* A single checkbox filter, without the card look of .choice. */
.choice--inline {
  align-self: flex-start;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.message__escalate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.message__escalate:hover {
  text-decoration: underline;
}

.message__escalate:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Email previews (style guide, Development only) -------------------- */

.email-preview {
  display: block;
  width: 100%;
  height: 44rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.email-preview__text {
  margin-top: var(--space-2);
  padding: var(--space-3);
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre-wrap;
}

/* ---- Landing page (pre-launch interest) --------------------------------- */

.landing {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.landing-hero {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 60rem) {
  .landing-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.landing-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.landing-hero__title {
  max-width: 40rem;
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
}

.landing-hero__lead {
  max-width: 38rem;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.interest-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  scroll-margin-top: calc(var(--topbar-height, 0px) + var(--space-4));
}

.interest-card__title {
  font-size: var(--text-xl);
}

.role-options {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 36rem) {
  .role-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* In the landing page's side card the column is too narrow for three cards: stack them. */
  .interest-card .role-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

.interest-row {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 36rem) {
  .interest-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.interest-done {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}

.interest-done__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

/* Example conversation in the hero (reuses the chat bubbles). */
.example-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

.example-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.example-chat__who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.example-chat__who .avatar {
  width: 1.75rem;
  height: 1.75rem;
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
}

.landing-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pains {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .pains {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pains > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 3px solid var(--color-accent);
}

.pains h3 {
  font-size: var(--text-lg);
}

.pains p {
  color: var(--color-text-muted);
}

.benefits {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 52rem) {
  .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.benefit-card--helper {
  background: color-mix(in srgb, var(--color-accent-subtle) 35%, var(--color-surface));
}

.benefit-card h3 {
  font-size: var(--text-2xl);
}

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefit-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.benefit-list .icon {
  flex: none;
  margin-top: 0.15rem;
  color: var(--color-primary-text);
}

.benefit-card--helper .benefit-list .icon {
  color: var(--color-accent-text);
}

.benefit-list strong {
  color: var(--color-heading);
}

.cta-band {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--brand-gradient);
  color: var(--color-on-brand);
}

.cta-band h2 {
  color: inherit;
}

/* Home page: why subscribe. Four short lines, two by two from tablet up; no card borders (quiet). */
.perks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.perks li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.perks strong {
  color: var(--color-heading);
}

.perks p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.perks__icon {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: calc(var(--space-6) + var(--space-1));
  height: calc(var(--space-6) + var(--space-1));
  border-radius: var(--radius-pill);
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
}

/* Home page: the one line for helpers (their full story is on Become a helper). */
.helper-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-accent-subtle);
}

.helper-band p {
  flex: 1 1 18rem;
  margin: 0;
}

.helper-band strong {
  color: var(--color-heading);
}

.helper-band__icon {
  display: inline-flex;
  color: var(--color-accent-text);
}

.guide-finder__more {
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}

/* Home page: one quiet line for organisations under the hero's reassurance line. */
.landing-hero__org {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Home page: organisations (B2B), after the sign-up form: what they get in three points, then a quiet way in. */
.org-band {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
}

.org-band .perks__icon {
  background: var(--color-surface);
}

/* Three points side by side only when the band itself is wide enough (the sidebar takes room on tablets). */
.org-band {
  container-type: inline-size;
}

.org-band .perks--three {
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 46rem) {
  .org-band .perks--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* /for-organisations: who's reading (employer, or university and school), on the brand gradient. */
.audience-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  align-self: flex-start;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-on-brand) 16%, transparent);
}

.audience-switch a {
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  text-align: center;
  color: var(--color-on-brand);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.audience-switch a:hover {
  background: color-mix(in srgb, var(--color-on-brand) 14%, transparent);
}

.audience-switch a[aria-current="page"] {
  background: var(--color-on-brand);
  color: var(--color-brand-ink);
}

.audience-switch a:focus-visible {
  outline: 2px solid var(--color-on-brand);
  outline-offset: 2px;
}

/* /for-organisations: places the page jumps to land below the sticky top bar; the form keeps a readable width. */
#see-it,
#pays,
#pilot {
  scroll-margin-top: calc(var(--topbar-height, 0px) + var(--space-4));
}

.org-form {
  max-width: var(--container-narrow);
}

/* Become a helper: "What you could earn" (the figure large, the basis right under it). */
#earnings {
  scroll-margin-top: calc(var(--topbar-height, 0px) + var(--space-4));
}


.earnings__input {
  max-width: 8rem;
}

.earnings__figure {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--text-2xl);
}

/* A form in a window over the page (native <dialog>, opened by js/modal.js; links to "#id" open it). Without script
   the <noscript> rule on the page shows it in place. */
.modal {
  inset: 0;
  margin: auto; /* the base reset sets margin: 0; a modal centres on auto margins */
  width: min(36rem, calc(100% - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-4));
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

.modal::backdrop {
  background: color-mix(in srgb, var(--color-brand-ink) 60%, transparent);
}

.modal__panel {
  padding: var(--space-5);
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.modal__head h2 {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .modal[open] {
    animation: modal-in 0.18s ease-out;
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    translate: 0 var(--space-3);
  }
}

/* /for-organisations: the page and the example are two views; js/org-demo.js fades between them. */
.org-view {
  transition: opacity 0.2s ease;
}

.org-view.is-faded {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .org-view {
    transition: none;
  }
}

/* The example's top line: Back, then who's reading. */
.org-demo__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

#see-it h1:focus {
  outline: none;
}

/* /for-organisations: three reasons side by side when there's room (as the home band). */
.org-why.perks--three {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64rem) {
  .org-why.perks--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* /for-organisations: the privacy promise, one quiet line. */
.org-privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-success-subtle);
  color: var(--color-heading);
  font-weight: var(--weight-medium);
}

.org-privacy svg {
  flex: none;
  color: var(--color-success-text);
}

/* /for-organisations: the product shown. The manager's page in a browser frame, a person's plan in a phone frame,
   drawn with the app's own classes (ProductShowcase); a little smaller than the app so it reads as a picture. */
.showcase-wrap {
  container-type: inline-size;
}

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--space-6);
  align-items: start;
}

/* Wide: the two pictures side by side. In between: the phone beside its caption. Narrow: one under the other. */
@container (min-width: 62rem) {
  .showcase {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

@container (min-width: 40rem) and (max-width: 61.99rem) {
  .showcase .showcase__item--person {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }

  .showcase .showcase__item--person .showcase__frame--phone {
    flex: none;
    width: 21rem;
    margin-inline: 0;
  }
}

/* The pilot report: under both, across the width, beside its caption from tablet up. */
.showcase .showcase__item--report {
  grid-column: 1 / -1;
}

@container (min-width: 40rem) {
  .showcase .showcase__item--report {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    gap: var(--space-6);
  }
}

.showcase__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

.showcase__frame {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
}

.showcase__frame--phone {
  width: 100%;
  max-width: 23rem;
  margin-inline: auto;
  padding-top: var(--space-3);
  border-radius: calc(var(--radius-lg) * 2);
}

.showcase__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}

.showcase__dots {
  display: inline-flex;
  gap: var(--space-1);
}

.showcase__dots span {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.showcase__address {
  flex: 1;
  overflow: hidden;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showcase__screen {
  min-width: 0;
  padding: var(--space-4);
}

/* The manager's frame: the organisation's menu on the left, as in the app; a bar along the bottom when narrow. */
.showcase__frame {
  container-type: inline-size;
}

.showcase__app {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
}

.showcase__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-3) var(--space-2);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  list-style: none;
}

.showcase__nav li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-xs);
  line-height: 1.2;
}

.showcase__nav li.is-current,
.showcase__tabbar li.is-current {
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
  font-weight: var(--weight-semibold);
}

.showcase__nav svg,
.showcase__tabbar svg {
  flex: none;
}

.showcase__tabbar {
  display: none;
  justify-content: space-around;
  margin: 0;
  padding: var(--space-2) var(--space-1);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  list-style: none;
}

.showcase__tabbar li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

@container (max-width: 32rem) {
  .showcase__app {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase__nav {
    display: none;
  }

  .showcase__tabbar {
    display: flex;
  }
}

.showcase__title {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.showcase__card {
  padding: var(--space-3) var(--space-4) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.showcase__card-title {
  margin: 0 0 var(--space-1);
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}

.showcase__card .item-list {
  margin: 0;
}

.showcase__card .item-list__item:last-child {
  border-bottom: 0;
}

.showcase .stat {
  justify-content: space-between;
  padding: var(--space-3);
}

.showcase .stat__value {
  font-size: var(--text-xl);
  white-space: nowrap;
}

.showcase .stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.showcase .stat__label {
  font-size: var(--text-xs);
}

.showcase .checklist-step {
  padding: var(--space-3);
}

.showcase__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
}

.showcase__notice svg {
  flex: none;
  margin-top: 0.15em;
  color: var(--color-primary-text);
}

/* The tick box, drawn (the example isn't a form). */
.showcase__tick {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.showcase__tick--done {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.showcase__caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.showcase__caption > strong {
  color: var(--color-heading);
  font-size: var(--text-lg);
}

/* ---- Owner dashboard ----------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.stat__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* The pilot report: printed or saved as a PDF from the browser, only the page's content (js/print.js). */
@media print {
  .sidebar,
  .topbar,
  .tabbar,
  .site-footer,
  [data-print-hide],
  .skip-link {
    display: none !important;
  }

  .app,
  .app__body,
  .app__main {
    display: block;
    margin: 0;
    padding: 0;
  }

  body {
    background: none;
  }

  .stat {
    break-inside: avoid;
  }
}

/* Three figures that stay in one row on a phone (an organisation's Overview). */
@media (max-width: 39.99rem) {
  .stat-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .stat-grid--compact .stat {
    padding: var(--space-3);
  }

  .stat-grid--compact .stat__label {
    font-size: var(--text-xs);
  }

  .stat-grid--compact .stat__value {
    font-size: var(--text-xl);
    white-space: nowrap;
  }
}

.stat__value {
  color: var(--color-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.stat__hint {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.day-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 8rem;
  padding-top: var(--space-2);
}

.day-bars__bar {
  flex: 1;
  min-width: 0;
  height: max(2px, var(--h));
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-primary);
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- App install and notifications (InstallOptions, settings row, AppNudge) ---- */

.setting-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.setting-row__label {
  font-weight: var(--weight-semibold);
}

.install-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.install-panel--hero {
  justify-items: start;
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.install-panel__icon img {
  display: block;
  border-radius: var(--radius-md);
}

.install-panel--split {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 40rem) {
  .install-panel--split {
    grid-template-columns: minmax(0, 1fr) 11rem;
  }
}

.install-panel--done {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  color: var(--color-success-text);
  background: var(--color-success-subtle);
  border-color: transparent;
}

.install-panel--done p {
  color: var(--color-text);
}

.install-steps {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.install-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.install-steps__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
}

/* iPhone Safari: Share sits in the bottom toolbar; point at it. */
.share-hint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-2) + var(--tabbar-height) + env(safe-area-inset-bottom));
  z-index: 20;
  translate: -50% 0;
  color: var(--color-accent);
  animation: share-hint 1.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes share-hint {
  50% { translate: -50% var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .share-hint { animation: none; }
}

.qr {
  width: 100%;
  max-width: 11rem;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-qr-light);
  color: var(--color-qr-dark);
}

.qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.copy-link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.copy-link__url {
  flex: 1 1 14rem;
  min-width: 0;
}

.nudge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
}

.nudge[hidden] {
  display: none;
}

.nudge__icon {
  color: var(--color-primary-text);
}

/* ---- Guides list (Guides.razor): grouped, compact rows, search ---------- */

/* Cities with local guides, folded into a small menu under the country chips. */
.city-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--text-sm);
  list-style: none;
  cursor: pointer;
}

.city-menu__toggle::-webkit-details-marker {
  display: none;
}

.city-menu__toggle:hover {
  background: var(--color-surface-sunken);
}

.city-menu__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.city-menu[open] .city-menu__toggle .icon:last-child {
  transform: rotate(180deg);
}

.city-menu .filter-chips {
  margin-top: var(--space-2);
}

/* Cities under the country chips: a step quieter. */
.filter-chips--quiet .filter-chip {
  font-size: var(--text-sm);
}

.guides-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}

.guides-tools__checklist {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
}

.guides-tools__jump {
  flex: 0 1 20rem;
  min-width: 0;
}

.guides-tools__jump[hidden] {
  display: none;
}

.guides-tools__jump .input {
  width: 100%;
}

.guide-group__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}

.guide-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.guide-list > li {
  border-bottom: 1px solid var(--color-border);
}

/* A whole-row link: title, one line of summary, when it was checked. */
.guide-row {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}

.guide-row:hover {
  background: var(--color-surface-sunken);
}

.guide-row:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}

.guide-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary-text);
  font-weight: var(--weight-semibold);
}

.guide-row__summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.guide-row__meta {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* ---- Moving checklist: "Email me this list" ---------------------------- */

.checklist-mail {
  flex-wrap: wrap;
}

.checklist-mail .input {
  flex: 1 1 14rem;
  min-width: 0;
}

/* ---- Moving between pages: a slim bar along the top (js/busy.js) ---------- */

/* Grows towards 85% while the next page loads, then fills and fades. Waits 0.15 s first: quick moves show nothing. */
.nav-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 3px;
  background: var(--color-primary);
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
  animation: nav-progress 4s cubic-bezier(0.1, 0.6, 0.3, 1) 0.15s forwards;
}

.nav-progress[hidden] {
  display: none;
}

.nav-progress--done {
  animation: nav-progress-done 0.25s ease-out forwards;
}

@keyframes nav-progress-done {
  from { opacity: 1; transform: scaleX(0.85); }
  60% { opacity: 1; transform: scaleX(1); }
  to { opacity: 0; transform: scaleX(1); }
}

@keyframes nav-progress {
  from { opacity: 1; transform: scaleX(0.08); }
  to { opacity: 1; transform: scaleX(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-progress { animation: nav-progress-still 0s linear 0.15s forwards; }

  @keyframes nav-progress-still {
    to { opacity: 1; transform: scaleX(0.85); }
  }
}

/* ---- Interactive pages before their live connection is up (InteractiveReady) ---- */

/* A tap before the connection would be lost (a box looks ticked but the server never hears it), so controls wait. */
body:has([data-interactive="false"]) .app__main :is(button, input, select, textarea, label.choice) {
  pointer-events: none;
}

.connecting {
  /* Only on a slow connection: usually the page is live before this would appear. */
  opacity: 0;
  animation: connecting-in 0.2s ease-out 0.8s forwards;
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index: 30;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 47.99rem) {
  .connecting {
    bottom: calc(var(--space-4) + var(--tabbar-height) + env(safe-area-inset-bottom));
  }
}

.connecting__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  animation: connecting 1s ease-in-out infinite alternate;
}

@keyframes connecting {
  to { opacity: 0.3; }
}

@keyframes connecting-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .connecting__dot { animation: none; }
}

/* ---- Region picker: country, then that country's regions (RegionPicker) ---- */

.region-picker {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-2);
}

.region-picker--one-country {
  grid-template-columns: minmax(0, 1fr);
  max-width: 24rem;
}

/* The narrowest phones: one under the other, so long region names stay readable. */
@media (max-width: 23.99rem) {
  .region-picker {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Landing page: founding offer, trust strip, reasons, join section ---- */

.landing-hero__reassure {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.founding-callout {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  max-width: 38rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
  color: var(--color-text);
}

.founding-callout .icon {
  flex: none;
  margin-top: 0.15em;
  color: var(--color-accent-text);
}

.trust-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

/* Three short facts: one row as soon as there's room. */
@media (min-width: 40rem) {
  .trust-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.trust-strip li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.trust-strip .icon {
  flex: none;
  color: var(--color-primary-text);
}

.reasons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

/* Two by two, then four in a row: never one card alone on a line. */
@media (min-width: 40rem) {
  .reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .reasons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.reason {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.reason h3 {
  font-size: var(--text-lg);
}

.reason p {
  color: var(--color-text-muted);
}

.reason__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
}

.join {
  scroll-margin-top: var(--space-4);
}

.interest-card--wide {
  max-width: 44rem;
}

@media (min-width: 36rem) {
  .interest-card.interest-card--wide .role-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- "Working on it…" (App.razor #busy, wwwroot/js/busy.js) ------------- */

.busy {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  cursor: progress;
  opacity: 0;
  animation: busy-in 0.2s ease-out 0.35s forwards; /* quick actions finish before it's seen */
}

@keyframes busy-in {
  to { opacity: 1; }
}

.busy__card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.busy__mark {
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
  animation: busy-pulse 1.1s ease-in-out infinite;
}

@keyframes busy-pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-0.2rem) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .busy__mark { animation: none; }
  .busy { animation-duration: 0s; }
}

/* A submit button waiting for the server. */
.button[aria-busy="true"] {
  cursor: progress;
}

/* ---- Earned helper badges (HelperBadge) and progress (Earnings) ---------- */

.earned-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.earned-badge--trusted {
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}

.earned-badge--foundinghelper {
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.earned-badge--fastreplies,
.earned-badge--recentexperience {
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
}

.badge-progress {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.badge-progress li {
  display: grid;
  gap: var(--space-1);
}

.badge-progress__bar {
  display: block;
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  overflow: hidden;
}

.badge-progress__bar > span {
  display: block;
  width: var(--fill);
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

/* ---- City circles (/community) ------------------------------------------- */

.circle-feed {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.circle-post {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.circle-post--highlight {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-subtle);
}

.circle-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.circle-post__body {
  margin: 0;
}

.circle-post__actions {
  gap: var(--space-1);
}

.circle-post__replies {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0 0 0 var(--space-4);
  border-left: 2px solid var(--color-border);
  list-style: none;
}

.circle-post--reply {
  padding: var(--space-3);
  border: 0;
  background: var(--color-surface-sunken);
}

.circle-post__reply-form,
.circle-post__report {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.rule-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}