/* The fork at /invite, and the link at /refer */

.invite-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

/* A whole card as the target rather than a card with a button in it: there are
   two things to pick between and nothing else on the page to do. */
.invite-choice {
  display: grid;
  gap: var(--spacing-md);
  align-content: start;
  padding: var(--spacing-xl);
  background: var(--theme-bg);
  border: 1px solid var(--theme-border);
  border-radius: var(--border-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

a.invite-choice:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

/* The colleague card with nothing behind it: an admin's job, shown so the page
   still reads as a choice between two things rather than one unexplained one. */
.invite-choice.is-unavailable {
  opacity: 0.6;
}

.invite-choice-icon {
  font-size: var(--font-size-xl);
  line-height: 1;
}

.invite-choice-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text-bright);
}

.invite-choice-description {
  font-size: var(--font-size-base);
  color: var(--theme-text-secondary);
  line-height: 1.5;
}

.referral-note {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--theme-text-secondary);
  line-height: 1.5;
}

.referral-link {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  margin-top: var(--spacing-lg);
}

/* Readable at a glance, because the link is what the page is for: it is read
   as often as it is copied. */
.referral-link-url {
  flex: 1;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
  .invite-choices {
    grid-template-columns: 1fr;
  }

  .referral-link {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---- /refer ---------------------------------------------------------------
   Two doors, then the list of ways to send. Every box is a headed card from
   components/cards.css; only the arrangement lives here. */

.refer-screen {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.refer-doors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--spacing-lg);
}

.refer-door {
  display: flex;
  flex-direction: column;
}

.refer-door-icon {
  display: flex;
  align-items: center;
  color: var(--theme-accent);
}

/* Each door's glyph carries a hue, so the two cards are told apart before the
   heading is read. The values are the chrome's, not the body's: on navy a hue
   has to be the light end of its ramp to be a colour at all. */
.refer-door-icon--refer { color: #f2b544; }
.refer-door-icon--team { color: var(--color-primary); }
.refer-door-icon--locked { color: var(--theme-text-muted); }

.refer-door-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--spacing-lg);
  flex: 1;
}

.refer-door-copy {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--theme-text-secondary);
}

/* Pinned to the floor of the card, so both doors' actions line up however long
   the copy above them runs. */
.refer-door-action,
.refer-door-footer {
  margin-top: auto;
}

.refer-door-action {
  display: block;
  padding: 10px 20px;
  text-align: center;
}

.refer-door-footer {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
}

.refer-door-footer strong {
  color: var(--theme-text);
  font-weight: var(--font-weight-semibold);
}

.refer-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--spacing-lg);
  border-bottom: 1px solid var(--theme-border);
}

.refer-row:last-of-type {
  border-bottom: none;
}

.refer-row-icon {
  display: flex;
  flex: none;
  color: var(--light-accent);
}

.refer-row-icon--whatsapp {
  color: var(--light-success);
}

.refer-row-name {
  flex: none;
  width: 96px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text);
}

.refer-row-note {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--theme-text-secondary);
}

.refer-row-action {
  flex: none;
}

.refer-link-url {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--theme-text-secondary);
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  text-overflow: ellipsis;
}

.refer-link-url:focus {
  outline: none;
}

/* Outlined control, the page's quiet button. The filled one is reserved for
   the single thing a screen wants you to do. */
.btn-outline {
  padding: 7px 16px;
  background: none;
  border: 1px solid var(--light-border-strong);
  border-radius: var(--border-radius-sm);
  color: var(--theme-text);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-outline:hover {
  border-color: var(--theme-text-muted);
  background: var(--theme-bg-subtle);
}

/* --color-primary is drawn for a black label, so a filled control that has to
   carry a white one takes the deep blue instead. */
.btn-deep {
  padding: 8px 18px;
  background: var(--color-primary-deep);
  border: 1px solid var(--color-primary-deep);
  border-radius: var(--border-radius-sm);
  color: #ffffff;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-deep:hover {
  background: var(--light-accent);
  border-color: var(--light-accent);
}

.link-button {
  padding: 0;
  background: none;
  border: none;
  color: var(--light-accent);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .refer-doors {
    grid-template-columns: 1fr;
  }
}

/* ---- the Change dialog ---------------------------------------------------- */

.refer-dialog {
  /* The UA centres a modal with auto margins; the reset zeroes them. */
  margin: auto;
  padding: 0;
  border: none;
  background: none;
  max-width: 460px;
  width: calc(100% - var(--spacing-2xl));
}

/* Navy rather than black, per the design system: the scrim belongs to Chief. */
.refer-dialog::backdrop {
  background: rgba(15, 31, 56, 0.45);
}

.refer-dialog-card {
  box-shadow: 0 24px 48px rgba(15, 31, 56, 0.35);
}

.refer-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
}

.refer-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Sentence case, unlike .form-label: this reads as a question about the name,
   not as a column heading. */
.refer-field-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text);
}

/* .form-input is drawn for the navy chrome: a translucent white fill and a
   white-ish border, which on this card is an invisible field with invisible
   text in it. Everything here is named from the light ramp instead. */
.refer-field .form-input {
  padding: 10px 12px;
  background: var(--light-bg);
  border: 1px solid var(--light-border-strong);
  border-radius: var(--border-radius-sm);
  color: var(--light-text);
}

.refer-field .form-input:hover {
  border-color: var(--theme-text-muted);
  background: var(--light-bg);
}

.refer-field .form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
}

.refer-field .form-help {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
}

.refer-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* The landing page in miniature, so the name is changed against the thing it
   changes rather than against a description of it. */
.refer-preview-head {
  font-size: 10px;
  letter-spacing: 0.09em;
}

.refer-preview-body {
  background: var(--bg-dark);
}

.refer-preview-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  background: var(--bg-section);
}

.refer-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.refer-preview-url {
  margin-left: 8px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
}

.refer-preview-page {
  padding: 24px 20px;
}

.refer-preview-wordmark {
  position: relative;
  display: inline-block;
  margin-bottom: var(--spacing-lg);
  color: #ffffff;
  font-size: 18px;
  font-weight: var(--font-weight-black);
  letter-spacing: -0.5px;
}

.refer-preview-wordmark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 20%;
  height: 2px;
  background: var(--color-primary);
}

.refer-preview-headline {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.refer-preview-sub {
  margin: 0 0 var(--spacing-lg);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
}

.refer-preview-cta {
  display: inline-block;
  padding: 7px 14px;
  background: var(--color-primary);
  border-radius: var(--border-radius-sm);
  color: var(--color-on-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* ---- the locked door and its answer ---------------------------------------- */

.refer-door-action.is-locked {
  color: var(--theme-text-muted);
  border-color: var(--theme-border);
  cursor: pointer;
}

.refer-locked-copy {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--theme-text-secondary);
}

.refer-locked-copy strong {
  color: var(--theme-text);
}

.refer-locked-row {
  gap: var(--spacing-lg);
}

.refer-locked-text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.refer-locked-text strong {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text);
}

.refer-locked-text span {
  font-size: 12.5px;
  color: var(--theme-text-secondary);
}

/* ---- the lead card --------------------------------------------------------
   Full width, because it is what the page is for. The preview sits beside the
   copy rather than under it, so the fold still reaches the send card. */

/* The miniature rides up over the navy head. It is a picture of another
   screen, so letting it break the band reads as depth rather than as a
   misaligned box, and it buys back the height the band costs. */
.refer-lead-card {
  overflow: visible;
}

/* The card's own overflow did the rounding; letting the miniature out of it
   also let the head's corners go square. */
.refer-lead-card .card-head {
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.refer-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
  gap: var(--spacing-2xl);
  padding: var(--spacing-lg);
}

.refer-lead .refer-preview {
  margin-top: -44px;
  box-shadow: 0 8px 20px rgba(15, 31, 56, 0.28);
}

/* The settled name, drawn as a value you can act on. */
.refer-from {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 8px 8px 8px 12px;
  background: var(--theme-bg-subtle);
  border: 1px solid var(--theme-border);
  border-radius: var(--border-radius-sm);
}

.refer-from-text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.refer-from-label {
  font-size: 12.5px;
  color: var(--theme-text-secondary);
}

.refer-from-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text);
}

.btn-outline--sm {
  flex: none;
  padding: 5px 12px;
  font-size: 12.5px;
}

.refer-lead-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.refer-preview--small .refer-preview-page {
  padding: 12px 12px 14px;
}

.refer-preview--small .refer-preview-wordmark {
  margin-bottom: 8px;
  font-size: 12px;
}

.refer-preview--small .refer-preview-headline {
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.3;
}

.refer-preview--small .refer-preview-sub {
  margin-bottom: 10px;
  font-size: 10px;
}

.refer-preview--small .refer-preview-cta {
  padding: 5px 10px;
  font-size: 10.5px;
}

/* The other door, quieter than the thing above it: a single row rather than a
   card with a footer of its own. */
.refer-colleague-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg);
}

.refer-colleague-body .refer-door-copy {
  flex: 1;
  min-width: 0;
}

.refer-colleague-body .btn-outline {
  flex: none;
}

.btn-outline.is-locked {
  color: var(--theme-text-muted);
  border-color: var(--theme-border);
}

@media (max-width: 720px) {
  .refer-lead {
    grid-template-columns: 1fr;
  }

  /* The overlap belongs to the two-column layout. Stacked, it pulls the
     miniature over the copy above it instead of over the band. */
  .refer-lead .refer-preview {
    margin-top: 0;
  }

  /* Stretched, the action fills the card and stops reading as a button. */
  .refer-colleague-body {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* The link above the channels rather than under them: copying is the way most
   people send it, so it stops being the footnote to three buttons. */
.card-foot--top {
  border-top: none;
  border-bottom: 1px solid var(--theme-border);
}

/* The two sentences are one thought, so they sit closer to each other than the
   block sits to the field under it. Without the wrapper they were three equal
   siblings of the same flex column. */
.refer-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}