/* per-page polish: join
   Scoped exclusively to structures in join.html.
   Layers steel-system overrides on the proto's page-specific CSS.
*/

/* Card: pop shadow, glassy paper */
main.jn .join-card {
  box-shadow: var(--shadow-pop) !important;
}

/* CANON sec 10.1 (R15)  -  branded pill eyebrow. */
main.jn .join-card .eyebrow.chip {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
  color: var(--accent) !important;
  font-weight: 500;
  letter-spacing: .12em;
  font-size: 10.5px;
  text-transform: uppercase;
}

/* Workspace mark: accent-tinted in steel, not the legacy forest green */
main.jn .join-wm {
  background: var(--accent) !important;
  color: var(--ink-on-accent, #fff) !important;
  box-shadow: var(--shadow-sm);
}

/* CANON sec 10  -  auth-card h1 = 28 / 660 / -.025em. Override proto's 22px. */
main.jn .join-ws h1 {
  font-size: 28px !important;
  letter-spacing: -.025em !important;
  font-weight: 660 !important;
  line-height: 1.12 !important;
}
main.jn .join-ws .ws-meta {
  color: var(--ink-mute) !important;
}

/* Member stack: paper-coloured ring matches the card surface */
main.jn .join-mem .av,
main.jn .join-mem .more {
  border-color: var(--paper) !important;
}
main.jn .join-mem .more {
  background: var(--bg-2) !important;
  color: var(--ink-mute) !important;
}

/* Inviter row: glass paper, soft border */
main.jn .join-invite {
  background: var(--surface-3) !important;
  border-color: color-mix(in srgb, var(--accent) 14%, var(--line)) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
main.jn .join-invite .ji-line {
  color: var(--ink) !important;
  font-weight: 580;
}
main.jn .join-invite .ji-email {
  color: var(--ink-mute) !important;
}

/* Body blurb */
main.jn .join-card .blurb {
  color: var(--ink-soft) !important;
  line-height: 1.55;
}

/* Access bullets list: glass paper, accent checkmarks */
main.jn .join-bullets {
  background: var(--surface-3) !important;
  border-color: color-mix(in srgb, var(--accent) 12%, var(--line)) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
main.jn .join-bullets li {
  color: var(--ink-soft);
}
main.jn .join-bullets li svg {
  color: var(--accent) !important;
}

/* CANON sec 3 / sec 5  -  primary = 46h, ghost = 40h. */
main.jn .join-ctas .btn-primary { height: 46px; font-weight: 600; padding: 0 28px; }
main.jn .join-ctas .btn:not(.btn-primary) { height: 40px; font-weight: 600; padding: 0 16px; }

/* Decline link: muted, climbs to soft on hover */
main.jn .join-decline {
  color: var(--ink-mute);
}
main.jn .join-decline:hover {
  color: var(--ink-soft);
}

/* Switch-account footnote */
main.jn .join-switch {
  border-top-color: var(--line) !important;
  color: var(--ink-mute);
}
main.jn .join-switch a {
  color: var(--ink-soft);
  border-bottom-color: var(--line-strong);
}
main.jn .join-switch a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-line);
}

/* Mobile */
@media (max-width: 480px) {
  main.jn .join-card {
    padding: 24px 20px 20px !important;
  }
  /* R1  -  mobile h1 = 24. */
  main.jn .join-ws h1 {
    font-size: 24px !important;
  }
  main.jn .join-ctas .btn {
    width: 100%;
  }
}