/* Alfred's private invitation pages. Shared, dependency-free presentation. */
:root {
  color-scheme: dark;
  --page: #131514;
  --surface: #1b1e1c;
  --inset: #161917;
  --line: #363c37;
  --text: #f1f3ed;
  --muted: #b1b8b0;
  --accent: #b9d8be;
  --error: #ffb79e;
  --hover: #292e29;
  --hover-line: #626a61;
  --soft-hover: #252a25;
  --button-text: #1b221c;
  --button-hover: #dbe4d8;
  --error-line: #6a4234;
  --error-surface: #30211c;
  --face-line: #4d6553;
  --face-bg: #293a2e;
  --face-text: #c0dac5;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .6);
  --shadow-button: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .3), 0 10px 22px -10px rgba(0, 0, 0, .55);
  --radius-control: 10px;
  --radius-panel: 20px;
  font-family: "Hanken Grotesk", "Avenir Next", Avenir, sans-serif;
  font-synthesis: none;
}
/* The same palette for people whose phone or browser is set to light. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --page: #f3f5f1;
    --surface: #ffffff;
    --inset: #f7f8f5;
    --line: #d8ddd5;
    --text: #18201a;
    --muted: #586259;
    --accent: #2f6b3c;
    --error: #a3361a;
    --hover: #eaeee8;
    --hover-line: #aeb6ac;
    --soft-hover: #f0f3ee;
    --button-text: #ffffff;
    --button-hover: #2e3a31;
    --error-line: #e3b6a6;
    --error-surface: #fbefe9;
    --face-line: #b9d0be;
    --face-bg: #e6efe7;
    --face-text: #2f6b3c;
    --shadow-card: 0 1px 2px rgba(24, 32, 26, .04), 0 18px 40px -18px rgba(24, 32, 26, .16);
    --shadow-button: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(24, 32, 26, .16), 0 10px 22px -10px rgba(24, 32, 26, .45);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
main { width: min(100%, 580px); margin: 0 auto; padding: clamp(24px, 7vh, 72px) 24px 32px; display: grid; gap: 20px; }
.brand { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 18px; font-weight: 650; letter-spacing: -.03em; }
/* The mark is inline SVG: an animation inside an SVG loaded as an image doesn't run in every browser. */
.mark-rings { flex-shrink: 0; overflow: visible; }
.mark-rings .ring { fill: none; stroke-width: 2.2; animation: 4s cubic-bezier(.65, 0, .35, 1) infinite; }
.mark-rings .ring-left { stroke: var(--text); animation-name: rings-meet-left; }
.mark-rings .ring-right { stroke: var(--accent); animation-name: rings-meet-right; }
@keyframes rings-meet-left { 0%, 15%, 85%, 100% { transform: translateX(0); } 45%, 55% { transform: translateX(3px); } }
@keyframes rings-meet-right { 0%, 15%, 85%, 100% { transform: translateX(0); } 45%, 55% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .mark-rings .ring { animation: none; } }
.brand span { margin-left: auto; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.card, .send-shell, .action-shell { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-panel); padding: clamp(22px, 4vw, 32px); display: grid; gap: 24px; }
.mark, .eyebrow { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
h1 { margin: 0; font-size: clamp(26px, 4vw, 34px); font-weight: 600; letter-spacing: -.045em; line-height: 1.18; text-wrap: pretty; overflow-wrap: anywhere; }
p { margin: 0; }
h1[tabindex="-1"]:focus { outline: none; }
.muted { color: var(--muted); font-size: 15px; line-height: 1.65; }
.fine, .page-footer { font-size: 13px; color: var(--muted); line-height: 1.6; }
.page-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding: 0 4px; }
.why { padding: 0 4px; margin-top: -8px; }
.why b { font-weight: 600; }
.person { display: flex; gap: 12px; align-items: center; min-width: 0; }
.person > div { min-width: 0; overflow-wrap: anywhere; }
.person b { font-size: 14px; font-weight: 600; }
.person .muted { font-size: 13px; }
.face { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--face-line); background: var(--face-bg); color: var(--face-text); border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; position: relative; overflow: hidden; }
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
details .buttons { justify-items: start; }
details button.secondary { padding-left: 0; padding-right: 0; text-align: left; }
.facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: 14px; }
.facts > div + div { border-top: 1px solid var(--line); }
.facts span, .facts label { color: var(--muted); flex-shrink: 0; }
.facts b { text-align: right; font-weight: 550; overflow-wrap: anywhere; min-width: 0; }
.email-fact > div { display: grid; gap: 6px; }
/* Candidate review: the introducer's face sits with the headline, one idea per screen. */
.intro-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; }
.intro-head .face { width: 44px; height: 44px; font-size: 14px; }
.role-link { justify-self: start; color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; }
.role-link:hover { text-decoration: underline; text-underline-offset: 4px; }
#yes-note { margin-top: -4px; text-align: center; }
.whats-next { margin-top: -14px; }
.whats-next summary { min-height: 0; }
.whats-next ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); font-size: 14px; line-height: 1.55; }
/* One quiet way back on every step after the first; it follows browser history. */
.back-link { justify-self: start; min-height: 32px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 500; }
.back-link:hover { background: none; color: var(--text); }
.card > .back-link { margin-bottom: -12px; }
/* Invitation page: role in one line, the link as a chip, descriptions only on the main option. */
.subtitle { display: grid; gap: 4px; margin-top: -8px; }
.link-chip { display: inline-block; margin-top: 2px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--inset); color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.choice:not(.primary) small { display: none; }
/* Status steps: a check when done, a turning ring while pending, a cross if it failed. */
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; }
.steps li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; box-sizing: border-box; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.steps li.done::before { content: "✓"; background: var(--accent); color: var(--button-text); }
.steps li.pending { color: var(--muted); }
.steps li.pending::before { border: 2px solid var(--line); border-top-color: var(--accent); animation: spin 900ms linear infinite; }
.steps li.failed { color: var(--error); }
.steps li.failed::before { content: "×"; border: 1.5px solid var(--error); color: var(--error); font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .steps li.pending::before { animation: none; } }
/* Privacy questions: one line each, open one to read the answer. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; list-style: none; color: var(--text); font-size: 15px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform 160ms ease-out; }
.faq details[open] summary { margin-bottom: 0; }
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq summary:hover { color: var(--accent); }
.faq details p { padding: 0 24px 18px 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
/* Pilot terms: numbered sections in one card. */
.terms h2 { margin: 6px 0 -12px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.terms ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.terms p, .terms li { color: var(--muted); font-size: 15px; line-height: 1.65; }
.terms a { color: inherit; text-underline-offset: 3px; }
/* Install page: three points, Slack's own button, one action on every other screen. */
.points { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.points li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.points b { font-size: 15px; font-weight: 600; }
.points span { color: var(--muted); font-size: 14px; line-height: 1.55; }
.install-action { display: grid; gap: 12px; justify-items: center; text-align: center; }
.install-action a:not(.slack-button), .fine a { color: inherit; text-underline-offset: 3px; }
.slack-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 236px; height: 48px; border: 1px solid #dddddd; border-radius: 4px; background: #ffffff; color: #000000; font-size: 16px; font-weight: 600; text-decoration: none; transition: background-color 140ms ease-out; }
.slack-button:hover { background: #f4f4f4; }
.install .card { box-shadow: var(--shadow-card); }
.install .page-footer { display: flex; flex-wrap: nowrap; align-items: baseline; }
.install .page-footer a { font-size: 12px; }
.button-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 12px; background: var(--text); color: var(--button-text); box-shadow: var(--shadow-button); font-size: 15px; font-weight: 600; text-decoration: none; transition: transform 160ms ease-out, background-color 160ms ease-out; }
.button-link:hover { background: var(--button-hover); transform: translateY(-1px); }
.button-link:active { transform: translateY(0); }
.button-link .slack-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #ffffff; }
.button-link .arrow { transition: transform 160ms ease-out; }
.button-link:hover .arrow { transform: translateX(3px); }
/* One-message screens: centred, with the joined rings when the install worked. */
.message { justify-items: center; text-align: center; gap: 14px; padding-block: clamp(36px, 6vw, 48px); }
.message .muted { max-width: 34ch; }
.message .button-link { margin-top: 12px; }
.success-badge { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 6px; border: 1px solid var(--face-line); border-radius: 50%; background: var(--face-bg); }
.success-badge svg { overflow: visible; }
/* The rings slide in, then keep meeting like the header mark, a little further at this size. */
.success-badge .ring { fill: none; stroke-width: 2.4; animation-duration: 900ms, 4s; animation-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(.65, 0, .35, 1); animation-delay: 150ms, 1050ms; animation-iteration-count: 1, infinite; animation-fill-mode: both, none; }
.success-badge .ring-left { stroke: var(--text); animation-name: rings-join-left, badge-meet-left; }
.success-badge .ring-right { stroke: var(--accent); animation-name: rings-join-right, badge-meet-right; }
@keyframes rings-join-left { from { transform: translateX(-6px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes rings-join-right { from { transform: translateX(6px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes badge-meet-left { 0%, 15%, 85%, 100% { transform: translateX(0); } 45%, 55% { transform: translateX(4px); } }
@keyframes badge-meet-right { 0%, 15%, 85%, 100% { transform: translateX(0); } 45%, 55% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .success-badge .ring { animation: none; } .button-link, .button-link .arrow { transition: none; } }
.email-fact input { width: 100%; min-width: 0; }
.verified-email { font-size: 16px; font-weight: 550; overflow-wrap: anywhere; word-break: normal; }
/* The verified address reads as a confirmed fact, not a field to fill in. */
#confirm-email-box { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--inset); }
#confirm-email-box small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.verified-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--button-text); font-size: 12px; font-weight: 700; }
.buttons, .verify-form, .ready { display: grid; gap: 12px; }
button, .choice { font: inherit; cursor: pointer; transition: background-color 140ms ease-out, border-color 140ms ease-out; }
button { min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-control); background: transparent; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.45; }
button:hover { background: var(--hover); border-color: var(--hover-line); }
button.yes, #confirm { background: var(--text); color: var(--button-text); border-color: var(--text); }
button.yes:hover, #confirm:hover { background: var(--button-hover); border-color: var(--button-hover); }
button.secondary, #back, #no-contact { background: transparent; border-color: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; font-size: 13px; font-weight: 450; }
button.secondary:hover, #back:hover, #no-contact:hover { color: var(--text); background: var(--soft-hover); }
button:active:not(:disabled), .choice:active { filter: brightness(.92); }
button:disabled { opacity: .5; cursor: wait; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.verify-form label { font-size: 13px; color: var(--muted); }
input, textarea { font: inherit; color: var(--text); background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 12px; }
.verify-input { width: 100%; font-size: 25px; letter-spacing: .23em; font-variant-numeric: tabular-nums; padding: 12px 16px; }
.verification-help { padding-top: 18px; border-top: 1px solid var(--line); }
summary { cursor: pointer; font-size: 13px; color: var(--muted); min-height: 44px; }
details[open] summary { margin-bottom: 10px; color: var(--text); }
.error { color: var(--error); }
#error:not([hidden]), #email-error:not([hidden]) { border: 1px solid var(--error-line); border-radius: var(--radius-control); padding: 12px 16px; background: var(--error-surface); }
.ic { width: 32px; height: 32px; display: grid; place-items: center; color: var(--accent); }
.ic svg { width: 26px; height: 26px; }
.ic svg path { stroke: currentColor; }
.ic.neutral { color: var(--muted); }
.toast:empty, #verify-status:empty { display: none; }
.toast:not(:empty) { border-left: 2px solid var(--accent); padding: 4px 0 4px 14px; color: var(--accent); font-size: 14px; }
.toast.neutral { color: var(--muted); border-color: var(--line); }
.toast.error { color: var(--error); border-color: var(--error); }
.send-shell { gap: 20px; }
.ready { gap: 22px; }
label[for="draft"], .section-label, label[for="complete-message"] { display: block; color: var(--muted); font-size: 12px; font-weight: 550; margin-bottom: 8px; }
textarea { display: block; width: 100%; min-height: 160px; font-size: 15px; line-height: 1.6; resize: vertical; }
#link-note { margin-top: 10px; }
.choices { display: grid; gap: 0; }
.choices > .choice:first-child:not(.primary), .choice.primary + .choice, #sent { border-top: 1px solid var(--line); }
.choice { width: 100%; min-height: 72px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; padding: 14px 0; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 550; }
.choice small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 2px; }
.choice:hover { background: var(--soft-hover); }
.choice.copied { color: var(--accent); background: var(--soft-hover); }
/* The one send option most likely to work on this device. */
.choice.primary { margin-bottom: 12px; padding: 14px 16px; border: 0; border-radius: var(--radius-control); background: var(--text); color: var(--button-text); }
.choice.primary:hover, .choice.primary.copied { background: var(--button-hover); color: var(--button-text); }
.choice.primary small, .choice.primary .ico { color: inherit; opacity: .8; }
.choice:disabled { opacity: .5; cursor: default; }
.ico { width: 32px; height: 32px; display: grid; place-items: center; background: transparent; color: var(--muted); }
.ico svg [stroke] { stroke: currentColor; }
.ico svg [fill="#fff"] { fill: currentColor; }
.action-shell { width: 100%; }
.action-shell p { color: var(--muted); font-size: 15px; }
@media (max-width: 420px) {
  main { padding: 20px 16px 24px; gap: 16px; }
  .card, .send-shell, .action-shell { padding: 22px 20px; border-radius: 16px; gap: 20px; }
  .fine, .page-footer, .muted, .person .muted, .person b,
  .choice small, .verify-form label, summary, button.secondary, #back, #no-contact,
  label[for="draft"], .section-label, label[for="complete-message"], .eyebrow,
  .brand span { font-size: 14px; }
  .brand { flex-wrap: wrap; }
  .brand span { flex-basis: 100%; margin-left: 0; }
  .page-footer { display: grid; }
}
@media (max-width: 360px) {
  .facts > div { flex-direction: column; gap: 4px; }
  .facts b { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }