/*
 * GOLF-153 A2-S2b — coach invitation activation.
 *
 * Adds only what activation needs on top of request-access.css, which A2-S1
 * built as the reusable public shell. Tokens, grain, fonts, bevelled CTA,
 * focus ring, and error language all come from there unchanged, so a coach
 * moving homepage -> request access -> invitation feels no visual reset.
 *
 * One calm operating surface. No hero, no wizard chrome, no card farm.
 */

.access-column {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.access-panel { min-width: 0; }

.access-legend { margin-bottom: 14px; }

.access-heading {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  /* Sits deliberately below the page title so the operating surface stays
     calm: this is a state label, not a second hero. */
  font-size: clamp(1.5rem, 4.2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--cream);
}

.access-body {
  margin: 0 0 20px;
  color: rgba(250, 246, 237, 0.78);
  font-size: 1rem;
  max-width: 44ch;
}

/* ------------------------------------------------- fixed invited identity */
/* A trusted FACT, never an input. Rendered as a bordered plate so it reads as
   record rather than field, and it can never be mistaken for something the
   coach is expected to change. */
.access-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--gold);
  background: rgba(250, 246, 237, 0.04);
}

.access-identity[hidden] { display: none; }

.access-identity-label {
  font-family: "DM Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 246, 237, 0.56);
}

.access-identity-value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--cream);
  /* Long addresses wrap instead of forcing the page sideways. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.access-identity-value[hidden] { display: none; }

/* --------------------------------------------------------------- password */
.access-password {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.access-password .request-input {
  flex: 1;
  min-width: 0;
}

/* >=44px in both axes, and a real text label rather than an icon-only glyph. */
.access-password-toggle {
  flex: 0 0 auto;
  min-width: 64px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--field-bg);
  color: rgba(250, 246, 237, 0.82);
  font-family: "DM Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.access-password-toggle:hover:not(:disabled) { border-color: rgba(250, 246, 237, 0.3); color: var(--cream); }
.access-password-toggle:disabled { opacity: 0.6; cursor: not-allowed; }

.access-password-toggle:focus-visible,
.access-quiet-button:focus-visible {
  outline: 2px solid var(--gold-warm);
  outline-offset: 2px;
}

/* ------------------------------------------------------ secondary actions */
/* Quiet by construction: exactly one primary action is ever gold. */
.access-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
}

.access-quiet-button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(250, 246, 237, 0.66);
  font-family: "DM Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.access-quiet-button[hidden] { display: none; }
.access-quiet-button:hover:not(:disabled) { color: var(--gold-warm); }
.access-quiet-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ------------------------------------------------------------------ legal */
.legal-list { display: grid; gap: 12px; margin: 0 0 22px; }

.legal-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: rgba(250, 246, 237, 0.03);
}

.legal-row input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--gold);
}

.legal-row span { display: grid; gap: 2px; min-width: 0; }
.legal-row a { color: var(--cream); text-underline-offset: 3px; }
.legal-row a:hover { color: var(--gold-warm); }
.legal-row small { color: rgba(250, 246, 237, 0.54); font-size: 0.8rem; }

/* ----------------------------------------------------------------- notice */
.access-notice {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  color: rgba(250, 246, 237, 0.8);
  font-size: 0.92rem;
}

.access-notice[hidden] { display: none; }
.access-notice[data-kind="error"] {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
  color: var(--cream);
}

/* --------------------------------------------------------------- desktop */
@media (min-width: 62rem) {
  .access-column { gap: 24px; }
}

/* Busy is communicated by cursor + aria-busy + honest status text, never by a
   spinner that outlives the operation. */
[data-invitation-submit][aria-busy="true"],
[data-invitation-resend][aria-busy="true"] { cursor: progress; }

@media (forced-colors: active) {
  .access-identity,
  .access-password-toggle,
  .legal-row,
  .access-notice { border: 1px solid CanvasText; }
  .access-quiet-button { color: LinkText; }
}

/* The status slot reserves no space until there is something to announce, so a
   quiet state (verification sent) does not carry an empty band. */
.access-panel .request-status { margin: 0; }
.access-panel .request-alert[data-visible="true"] { margin-bottom: 18px; }

/* ------------------------------------------------- primary action states */
/* The A2-S1 shell styles :disabled as `cursor: progress` because its only
   disabled state is mid-submit. The legal gate adds a second, different
   disabled state -- "not yet available, you have not ticked both boxes" --
   which must not claim work is in flight or look identical to an enabled CTA. */
.access-panel .request-cta:disabled {
  cursor: not-allowed;
  opacity: 1;
  /* The distinction is carried by the RULE, not by dimming the label: the gold
     text stays fully legible (measured 8.58:1) while the frame recedes. */
  border-color: rgba(196, 144, 58, 0.34);
  background: rgba(5, 12, 8, 0.18);
}

/* Busy is the other case, and it keeps the progress cursor and a solid frame. */
.access-panel .request-cta[aria-busy="true"]:disabled {
  cursor: progress;
  border-color: var(--gold);
}

@media (forced-colors: active) {
  .access-panel .request-cta:disabled { border: 1px solid GrayText; color: GrayText; }
}

/* ------------------------------------------------------- A2-S2d recovery */
/* Quiet return links reuse the secondary-action language exactly; recovery adds
   no new visual vocabulary. */
.access-quiet-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: rgba(250, 246, 237, 0.66);
  font-family: "DM Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-underline-offset: 4px;
}

.access-quiet-link[hidden] { display: none; }
.access-quiet-link:hover { color: var(--gold-warm); }
.access-quiet-link:focus-visible { outline: 2px solid var(--gold-warm); outline-offset: 2px; }

/* The confirm field's label sits under the first control, so it needs the same
   top rhythm a fresh field would have. */
.access-relabel { margin-top: 18px; }

[data-recovery-submit][aria-busy="true"] { cursor: progress; }

/* Both password controls must be the SAME width. The Show control shares row 1
   with the first field; hint, label, and the confirm field each span the input
   column, so the two inputs align exactly instead of one running short. */
.access-password-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.access-password-group .request-input { grid-column: 1; min-width: 0; }
.access-password-group .access-password-toggle { grid-column: 2; grid-row: 1; }
.access-password-group .access-password-hint,
.access-password-group .access-relabel { grid-column: 1 / -1; margin-top: 0; }