/* Styles unique to the invitation page (/join/).
   Everything else comes from assets/css/app.css, which is generated by
   tools/build-app-sites.mjs in the main Gide site repo. */

.secure-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.join-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.invite-card { gap: var(--sp-4); padding: var(--sp-10); }
.invite-card h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); }

.code-box {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  padding: var(--sp-6);
  margin-block: var(--sp-4);
  background: var(--gold-wash);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.code-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}
#invite-code {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  word-break: break-all;
}

.key-note,
.missing-note {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.key-note {
  background: #e7f4ec;
  color: #1d6b3f;
  border: 1px solid #c6e5d3;
}
.key-note::before { content: "\2713  "; font-weight: 700; }
.missing-note {
  background: #fdf0ed;
  color: #8a3220;
  border: 1px solid #f2cfc7;
}

.installed-help {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.installed-help h2 { font-family: Inter, sans-serif; font-size: var(--fs-base); font-weight: 600; }
.installed-help p { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--sp-2); }

.join-assurance { padding: var(--sp-8); background: var(--cream); }
.join-assurance h2 {
  font-family: Inter, sans-serif;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}

@media (max-width: 820px) {
  .join-layout { grid-template-columns: 1fr; }
  .invite-card { padding: var(--sp-6); }
}