/* "Did a campus ambassador send you?": the one-off recovery card
   (/assets/ambassador-claim.js), on /profile/ and /ambassador-code/.
   Redone 20 Oct on the Figma account redo: on the profile a teal card with the
   waving kid, between Make it yours and your details; on its own page the
   question is the hero (title at y 148, the waving kid right of it) and the
   field sits in the teal scalloped band beside the campus lanyard model.
   The one deliberate detail stays: the code sets in the label face, bold and
   in capitals, the way the ambassador's own pass prints it, so what the
   student types looks like what they were shown. */

.ac-title:focus-visible, .ac-done:focus-visible { outline: none; }
.ac-input {
  min-width: 0;
  font-family: var(--tud-font-secondary);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ls-paper, #FFFFFF);
}
/* A message under the field means the code was not taken: the field says so too (with the message, never alone). */
.ac-form:has(.ac-msg:not(:empty)) .ac-input { border-color: var(--tud-color-status-error-text); box-shadow: 0 0 0 1px var(--tud-color-status-error-text); }
.ac-form .sr-only[for="ac-code"] { position: static; display: block; width: auto; height: auto; margin: 0 0 8px; overflow: visible; clip: auto; white-space: normal; font-weight: 800; }
.ac-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.ac-row .btn { min-height: 52px; padding-inline: 24px; font-size: 16px; }
.ac-msg:not(:empty) { max-width: 52ch; margin-top: 10px; }
.ac-done { overflow-wrap: anywhere; }

/* ---------- on the profile ---------- */
.pf .ac-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  align-items: center;
  gap: 24px 48px;
  margin-top: 80px;
  padding: 48px 56px;
  border-radius: 24px;
  background: var(--ls-food, #C9E4DC);
  scroll-margin-top: 96px;
}
.pf .ac-card > [data-ac="ask"], .pf .ac-card > .ac-done { grid-column: 1; grid-row: 1; min-width: 0; }
.pf .ac-title { font-size: clamp(28px, 2.8vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; }
.pf .ac-line { margin-top: 10px; color: var(--ls-ink); font-size: 17px; line-height: 1.5; }
.pf .ac-form { max-width: 560px; margin-top: 24px; }
.pf .ac-done { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; }
.pf .ac-art { grid-column: 2; grid-row: 1; display: block; justify-self: center; width: 150px; height: 200px; }
.pf .ac-art img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- on its own page (/ambassador-code/) ---------- */
.acp { padding-bottom: 96px; }
.acp-hero { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-top: 71px; }
.acp-hero-copy { flex: 0 1 600px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.ls .ac-door-title { max-width: 16ch; font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; }
.ac-door-title:focus-visible { outline: none; }
.acp-art { flex: none; display: block; width: 220px; height: 296px; margin-right: 24px; }
.acp-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.acp-loading { padding-top: 71px; min-height: 360px; }
.ac-waiting { color: var(--ls-muted); font-size: 19px; }

/* The card is the whole page: the question in the hero, the field in the band. The ask wrapper lends
   its children to the card's grid, so the claimed line can take the question's place when it hides. */
.acp .ac-card {
  --acp-w: min(100% - (var(--ls-gutter) * 2), var(--ls-max));
  display: grid;
  grid-template-columns: [full-start] minmax(var(--ls-gutter), 1fr) [main-start] calc(var(--acp-w) / 2) [mid] calc(var(--acp-w) / 2) [main-end] minmax(var(--ls-gutter), 1fr) [full-end];
  grid-template-rows: 71px auto auto 88px auto;
  scroll-margin-top: 96px;
}
.acp .ac-card > [data-ac="ask"] { display: contents; }
.acp .ac-card > [data-ac="ask"].hidden { display: none !important; }
.acp .ac-title { grid-column: main-start / mid; grid-row: 2; align-self: end; max-width: 13ch; font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; }
.acp .ac-line { grid-column: main-start / mid; grid-row: 3; align-self: start; margin-top: 20px; color: var(--ls-soft); font-size: 19px; line-height: 1.5; }
.acp .ac-done { grid-column: main-start / mid; grid-row: 2 / 4; align-self: center; max-width: 16ch; font-size: clamp(36px, 3.8vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; }
.acp .ac-art { grid-column: mid / main-end; grid-row: 2 / 4; justify-self: end; align-self: center; display: block; width: 220px; height: 296px; margin-right: 24px; }
.acp .ac-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.acp-band { position: relative; grid-column: full-start / full-end; grid-row: 5; min-height: 440px; background: var(--ls-food, #C9E4DC); }
.acp-band::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: radial-gradient(circle at 12px 6px, var(--ls-food, #C9E4DC) 6px, transparent 6.5px) 0 0 / 24px 6px repeat-x; }
.acp-model-box { position: relative; z-index: 1; grid-column: main-start / mid; grid-row: 5; display: grid; place-items: center; padding-block: 56px; }
.acp-model { display: block; width: 150px; line-height: 0; transform-origin: 50% 100%; }
.acp-model img { display: block; width: 100%; height: auto; aspect-ratio: 300 / 680; object-fit: contain; -webkit-user-drag: none; }
:root:not([data-theme="dark"]) .acp-model-dark, :root[data-theme="dark"] .acp-model-light { display: none; }
.acp-model.is-before { transform: translateY(20px) scale(.9); }
@media (prefers-reduced-motion: no-preference) { .acp-model { transition: transform 700ms var(--ls-ease); } }
.acp .ac-form { position: relative; z-index: 1; grid-column: mid / main-end; grid-row: 5; align-self: center; width: 100%; }
/* Claimed: the band holds the lanyard alone, centred. */
.acp .ac-card:has(> [data-ac="ask"].hidden) .acp-model-box { grid-column: main-start / main-end; }

:root[data-theme="dark"] .ac-input { background: var(--ls-raised, #2E2822); }

@media (max-width: 899px) {
  .pf .ac-card { grid-template-columns: minmax(0, 1fr); padding: 36px 32px; }
  .pf .ac-art { grid-column: 1; grid-row: 1; width: 120px; height: 160px; }
  .pf .ac-card > [data-ac="ask"], .pf .ac-card > .ac-done { grid-row: 2; }

  .acp-hero { flex-direction: column; align-items: stretch; gap: 40px; }
  .acp-hero-copy { flex: none; }
  .acp-art { align-self: center; width: 180px; height: 242px; margin: 0; }
  .acp .ac-card { grid-template-columns: [full-start] var(--ls-gutter) [main-start mid] minmax(0, 1fr) [main-end] var(--ls-gutter) [full-end]; grid-template-rows: 71px auto auto auto 64px auto auto; }
  .acp .ac-title, .acp .ac-line { grid-column: main-start / main-end; }
  .acp .ac-done { grid-column: main-start / main-end; grid-row: 2 / 4; }
  .acp .ac-art { grid-column: main-start / main-end; grid-row: 4; justify-self: center; width: 180px; height: 242px; margin: 36px 0 0; }
  .acp-band { grid-row: 6 / 8; min-height: 0; }
  .acp-model-box { grid-column: main-start / main-end; grid-row: 6; padding-block: 44px 28px; }
  .acp-model { width: 110px; }
  .acp .ac-form { grid-column: main-start / main-end; grid-row: 7; padding-bottom: 48px; }
  .acp .ac-card:has(> [data-ac="ask"].hidden) .acp-model-box { grid-column: main-start / main-end; padding-bottom: 48px; }
}

@media (max-width: 600px) {
  .pf .ac-card { margin-top: 56px; padding: 28px 20px; border-radius: 20px; }
  .pf .ac-art { width: 104px; height: 140px; }
  .ac-row { grid-template-columns: minmax(0, 1fr); }
  .ac-row .btn { width: 100%; }
  .acp { padding-bottom: 80px; }
  .acp-hero { padding-top: 31px; gap: 36px; }
  .acp-hero-copy .btn { width: 100%; }
  .acp-loading { padding-top: 31px; min-height: 280px; }
  .acp .ac-card { grid-template-rows: 31px auto auto auto 56px auto auto; }
  .ls .ac-door-title, .ls .acp .ac-title { font-size: 40px; }
  .acp .ac-line { font-size: 17px; }
  .acp .ac-done { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) { .acp-model.is-before { transform: none; } }