/* -----------------------------------------------------------------------------
   MFTD 2027 - ambassador programme (2026-09-25)

   Loaded on top of base.css by Ambassador::index() and ::space(). The hero,
   the .page-intro block and the form widgets are shared - only the tier grid,
   the steps strip and the ambassador's own space live here.
   ----------------------------------------------------------------------------- */

/* --- Small status chip (2026-09-25: base.css has no .pill component -
   scoped here since only the ambassador pages use it so far). ------------- */

.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
.pill--on { background: var(--c-accent-soft); color: var(--c-primary-dark); }

/* --- Hero (2026-09-25 redesign): a bold gradient card, closer to the
   reference the ambassador programme was modelled on, in MFTD's own palette
   instead of that site's purple/orange. Page-specific on purpose - .home-hero
   (base.css) stays untouched for every other page. -------------------------- */

.amb-hero {
  position: relative;
  overflow: hidden;
  margin-top: var(--s-6);
  padding: var(--s-8) var(--gutter);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-primary) 55%, var(--c-secondary) 100%);
  box-shadow: var(--shadow-hover);
}
.amb-hero::before {
  content: '';
  position: absolute;
  top: -45%;
  right: -12%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
  pointer-events: none;
}
.amb-hero__inner { position: relative; max-width: 40rem; }
.amb-hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-accent-soft);
  margin-bottom: var(--s-3);
}
.amb-hero h1 { color: #fff; margin: var(--s-2) 0 var(--s-3); }
.amb-hero__lead { color: rgba(255, 255, 255, .85); font-size: var(--fs-lead); margin: 0 0 var(--s-6); }
.amb-hero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.amb-hero .btn--primary { background: #fff; color: var(--c-primary-dark); }
.amb-hero .btn--primary:hover { background: var(--c-accent-soft); box-shadow: none; }
.amb-hero .pill--on { background: rgba(255, 255, 255, .16); color: #fff; }

/* Compact variant: the ambassador's own space is a private dashboard, not a
   landing page - same gradient card, centred, no big corner glow, less air. */
.amb-hero--center { padding-block: var(--s-6); text-align: center; }
.amb-hero--center::before { display: none; }
.amb-hero--center .amb-hero__inner { max-width: none; }
.amb-hero--center .pill { margin-bottom: var(--s-3); }
.amb-hero--center h1 { margin-top: 0; }
.amb-hero--center .amb-hero__lead { margin-bottom: 0; }

/* --- How it works ---------------------------------------------------------- */

.amb-steps-band { background: var(--c-surface); }
.amb-steps-band .container { padding-block: var(--section-y); }

.amb-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.amb-step {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--c-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.amb-step__num {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-accent-text);
  line-height: 1;
}
.amb-step__text { color: var(--c-ink); }

/* --- Reward tiers ----------------------------------------------------------- */

.amb-rewards { padding-block: var(--section-y); }

.amb-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}

.amb-tier {
  --tier-color: var(--c-primary);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--tier-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.amb-tier__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.75rem;
  line-height: 1;
  background: var(--c-bg);
  border: 2px solid var(--tier-color);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.amb-tier__icon--sm { width: 1.75rem; height: 1.75rem; font-size: 1rem; margin-right: var(--s-2); vertical-align: -6px; box-shadow: none; }
.amb-tier__name { font-size: var(--fs-h4); color: var(--c-primary); margin: 0; }
.amb-tier__range {
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--tier-color);
}
.amb-tier__list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); flex: 1; }
.amb-tier__list li { position: relative; padding-left: var(--s-5); margin-bottom: var(--s-2); }
.amb-tier__list li::before { content: '✓'; position: absolute; left: 0; color: var(--tier-color); }
.amb-tier__note {
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-tiny);
  color: var(--c-muted);
}


/* --- Leaderboard ------------------------------------------------------------ */

.amb-leaders-band { background: var(--c-surface); }
.amb-leaders-band .container { padding-block: var(--section-y); }
.amb-leaders { list-style: none; margin: 0 auto; padding: 0; max-width: var(--container-narrow); }
.amb-leader {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-3);
}
.amb-leader__rank {
  font-family: var(--font-title);
  font-size: var(--fs-h4);
  color: var(--c-accent-text);
  width: 1.5rem;
  flex: none;
}
.amb-leader__photo { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex: none; }
.amb-leader__body { display: flex; flex-direction: column; flex: 1; }
.amb-leader__body span { font-size: var(--fs-tiny); color: var(--c-muted); }
.amb-leader__points { font-weight: var(--fw-semibold); color: var(--c-primary); white-space: nowrap; }

/* --- Candidature (2026-09-25 redesign): the form and the reward tiers share
   one dark card, side by side on desktop - closer to the reference layout,
   in MFTD's own palette. --------------------------------------------------- */

.amb-candidature { padding-bottom: var(--section-y); }

/* 2026-09-27: dropped the reward-tiers sidebar that used to sit beside the
   form (duplicated what the tiers already shown higher up the page said) -
   just the form now, centred, so it reads as the page's one clear ask. */
.amb-candidature__card {
  max-width: 56rem;
  margin-inline: auto;
  padding: var(--s-7) var(--s-6);
  background: linear-gradient(160deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
}
@media (max-width: 700px) {
  .amb-candidature__card { padding: var(--s-6) var(--s-5); }
}

.amb-candidature__form > .pill { margin-bottom: var(--s-4); }
.amb-candidature__form > h2 { color: #fff; margin: 0 0 var(--s-6); }

/* The register form is shared with every other registration page on the
   site (badge/exhibit/sponsoring) - only these ambassador-scoped selectors
   touch its colours, so nothing else changes there. The extra ".register__form"
   / ".form-group" in each selector is not decorative: base.css's own rules
   are already scoped that way (".register__form .form-group label"...), so
   matching the same chain is what makes this win on specificity rather than
   just on being read later in the cascade. */
.amb-candidature__form .register__form {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.amb-candidature__form .form-section-title { color: #fff; border-color: rgba(255, 255, 255, .2); }
.amb-candidature__form .register__form .form-group label { color: rgba(255, 255, 255, .92); }
.amb-candidature__form .form-note { color: rgba(255, 255, 255, .65); }
.amb-candidature__form .register__form input:not([type="checkbox"]),
.amb-candidature__form .register__form select,
.amb-candidature__form .register__form textarea {
  background: rgba(255, 255, 255, .96);
  border-color: transparent;
}
/* .verify-result--valid keeps its own light background/text (base.css) even
   here - it is a self-contained confirmation banner, not part of the form's
   own colour scheme, so it must not be forced white-on-white. */

/* Bigger drag-and-drop photo field (2026-09-27), replacing the plain
   <input type=file> that used to sit where every other field on this dark
   form does. The real input still covers the box (opacity: 0) so a click
   anywhere opens the same file picker; only the visible chrome is custom. */
.amb-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 11rem;
  padding: var(--s-5);
  border: 2px dashed rgba(255, 255, 255, .35);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  text-align: center;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.amb-dropzone.is-dragover { border-color: var(--c-accent-soft); background: rgba(255, 255, 255, .1); }
.amb-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.amb-dropzone__content { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); pointer-events: none; }
.amb-dropzone__icon { width: 2.25rem; height: 2.25rem; color: var(--c-accent-soft); }
.amb-dropzone__text { margin: 0; color: #fff; font-weight: var(--fw-medium); }
.amb-dropzone__preview { max-width: 100%; max-height: 14rem; border-radius: var(--radius-sm); object-fit: contain; pointer-events: none; }

/* --- Application form (page without a candidature card, kept for safety) --- */

.amb-form-wrap { padding-bottom: var(--section-y); }
.amb-form-wrap .register__form { max-width: 56rem; margin-inline: auto; }

/* --- The ambassador's own space --------------------------------------------- */

.amb-space-hero { padding-block: var(--s-8) var(--s-5); text-align: center; }
.amb-space-hero h1 { margin: var(--s-3) 0 var(--s-2); }

.amb-space {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--s-6);
  align-items: start;
  padding-bottom: var(--section-y);
}
@media (max-width: 900px) { .amb-space { grid-template-columns: minmax(0, 1fr); } }

.amb-space__main { display: flex; flex-direction: column; gap: var(--s-5); }
.amb-space__side { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
@media (max-width: 900px) { .amb-space__side { position: static; } }

.amb-card {
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.amb-card__title { font-size: var(--fs-h4); color: var(--c-primary); margin: 0 0 var(--s-2); }

/* Feature variant (2026-09-25): the link/points card and the poster card are
   the two things an ambassador actually acts on - a coloured top edge sets
   them apart from the plain utility cards (photo upload, post text, history). */
.amb-card--feature { border-top: 3px solid var(--c-accent); }

/* 2026-09-27: the bare <input readonly> had no background/border/padding of
   its own (only width/font were set), so it fell back to the browser's plain
   text-field chrome - a "copier" button next to it needs the same visual
   weight as the rest of the card, not a native-looking box. */
.amb-link-row { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); flex-wrap: wrap; }
.amb-link {
  flex: 1 1 14rem;
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-tiny);
  color: var(--c-ink);
}
.amb-link-row .btn { flex: none; }

.amb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.amb-stat { display: flex; flex-direction: column; gap: 2px; }
.amb-stat__value { font-family: var(--font-title); font-size: var(--fs-h3); color: var(--c-primary); line-height: 1.1; }
.amb-stat__value--tier { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-semibold); display: flex; align-items: center; }
.amb-stat__label { font-size: var(--fs-tiny); color: var(--c-muted); }

.amb-photo-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.amb-photo { width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; background: var(--c-surface-2); display: flex; align-items: center; justify-content: center; flex: none; }
.amb-photo img { width: 100%; height: 100%; object-fit: cover; }
.amb-photo__empty { color: var(--c-muted); }
.amb-photo-form { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

/* Drag-to-pan / zoom photo cropper (2026-09-27): the circle here is display
   only (border-radius clips a <canvas> box exactly like it would an <img>) -
   the actual crop maths lives in assets/js/ambassador-photo-crop.js, mirroring
   drawPhoto() in ambassador-poster.js so this preview never lies about what
   the poster will show. */
.amb-crop { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--c-border); }
.amb-crop__label { margin: 0 0 var(--s-1); font-weight: var(--fw-semibold); color: var(--c-ink); }
.amb-crop__stage {
  width: 10rem;
  aspect-ratio: 1;
  margin-bottom: var(--s-3);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--c-surface-2);
}
.amb-crop__stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.amb-crop__stage canvas:active { cursor: grabbing; }
.amb-crop__zoom-label { display: block; font-size: var(--fs-tiny); color: var(--c-muted); margin-bottom: var(--s-1); }
.amb-crop input[type="range"] { width: 100%; max-width: 14rem; margin-bottom: var(--s-3); }
.amb-crop form { display: inline-block; }

.amb-post-text { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-small); line-height: 1.5; }

.amb-history { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.amb-history li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border); }
.amb-history li:last-child { border-bottom: 0; }
.amb-history__meta { color: var(--c-muted); white-space: nowrap; }

.amb-poster { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.amb-poster__status { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); background: var(--c-success-bg); color: var(--c-success); border-radius: var(--radius-sm); font-size: var(--fs-small); }
.amb-poster__actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.amb-poster__steps { margin: var(--s-4) 0 0 var(--s-5); padding: 0; font-size: var(--fs-tiny); color: var(--c-muted); }