/* The first minute (arrive lane): the one username form (the Home card and the sheet on every other page) and the one real post waiting for an answer. No motion. */

.pk-claim-form { display: contents; }
.pk-claim-row { display: flex; flex: 1 1 260px; gap: 6px; min-width: 0; }
.pk-claim-row .pk-control { flex: 1 1 120px; box-sizing: border-box; min-width: 0; width: 100%; min-height: 38px; padding: 7px 11px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(0, 0, 0, .35); color: var(--pk-ink); font: inherit; font-size: 14.5px; }
.pk-claim-row .pk-control:focus { border-color: var(--pk-go, #2fbf71); outline: none; }
.pk-claim-row .fs-button { flex: 0 0 auto; min-height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--pk-go, #2fbf71); color: #04140a; font-weight: var(--pk-weight-bold); }
@media (hover: hover) { .pk-claim-row .fs-button:hover { filter: brightness(1.08); } }
.pk-claim-row .fs-button:disabled { opacity: .6; cursor: wait; }
.pk-claim-at { position: relative; display: flex; flex: 1 1 110px; min-width: 0; }
.pk-claim-at::before { content: "@"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--pk-muted); pointer-events: none; }
.pk-claim-at .pk-control { padding-left: 24px; }
.pk-claim-verdict, .pk-claim-status { flex: 1 1 100%; margin: 0; color: var(--pk-muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pk-claim-verdict:empty, .pk-claim-status:empty { display: none; }
.pk-claim-verdict.is-good { color: var(--pk-good, #9cf2c4); }
.pk-claim-check { flex: 1 1 100%; display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--pk-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.pk-claim-check input { flex: none; margin-top: 2px; accent-color: var(--pk-accent); }
.pk-claim-check a { color: var(--pk-ink); text-decoration-color: var(--pk-accent); text-underline-offset: 3px; }

/* The sheet. It opens on whatever page the act happened on, and closes back onto it. */
.pk-claim-sheet { --pk-go: #2fbf71; --pk-go-strong: #27a862; box-sizing: border-box; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 24px; overflow-y: auto; color: var(--pk-ink, #f6f4f3); background: var(--pk-surface, #111315); border: 1px solid var(--pk-line, #424347); border-radius: 24px; box-shadow: 0 24px 96px #0009; }
.pk-claim-sheet::backdrop { background: #0009; }
.pk-claim-sheet > header { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.pk-claim-sheet h2 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -.03em; }
.pk-claim-sheet header p { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--pk-muted); }
.pk-claim-sheet-close { flex: none; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--pk-muted); font: inherit; font-size: 14px; cursor: pointer; }
.pk-claim-sheet-close:focus-visible { color: var(--pk-ink); }
.pk-claim-sheet .pk-claim-form { display: flex; flex-direction: column; gap: 10px; }
.pk-claim-sheet .pk-claim-row { flex-wrap: wrap; flex-basis: auto; }
.pk-claim-sheet .pk-claim-row .pk-control { flex-basis: 100%; min-height: 48px; font-size: 16px; }
.pk-claim-sheet .pk-claim-row .fs-button { flex: 1 1 100%; min-height: 48px; }
.pk-claim-sheet :focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: var(--pk-focus-offset); }
@media (max-width: 480px) { .pk-claim-sheet { padding: 20px 18px max(20px, env(safe-area-inset-bottom)); } }
@media (forced-colors: active) { .pk-claim-sheet, .pk-claim-sheet .pk-control { color: CanvasText; background: Canvas; border-color: CanvasText; } }

/* N6: after claiming, one real post that is waiting for an answer, before anything about inviting. */
.pk-welcome-ask { display: grid; gap: 8px; margin: 2px 0 4px; padding: 14px 16px; border: 1px solid var(--pk-line); border-radius: 14px; background: var(--pk-surface); }
.pk-welcome-ask h2 { margin: 0; font-size: var(--pk-type-body); font-weight: var(--pk-weight-bold); letter-spacing: -.01em; }
.pk-welcome-line { margin: 0; color: var(--pk-muted); line-height: 1.5; overflow-wrap: anywhere; }
.pk-welcome-line a { color: var(--pk-ink); text-decoration-color: var(--pk-accent); text-underline-offset: 3px; }
.pk-welcome-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.pk-welcome-later { color: var(--pk-muted); font-size: 13px; text-underline-offset: 3px; }
.pk-arrive-note { margin: 8px 0 0; color: var(--pk-good, #9cf2c4); font-size: 13.5px; }

/* N4: an invite is a person with work: their face, their craft, their latest World posts. */
.pk-invite-person { display: flex; gap: 16px; align-items: center; margin: 0 0 16px; }
.pk-invite-avatar { flex: none; display: block; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; }
.pk-invite-avatar .pk-avatar { width: 72px; height: 72px; font-size: 28px; }
.pk-invite-person-text { min-width: 0; }
.pk-invite-person-text h1 { margin: 0; overflow-wrap: anywhere; }
.pk-invite-craft { margin: 4px 0 0; color: var(--pk-muted); font-size: var(--pk-type-body); }
.pk-invite-person-text .pk-lede { margin: 8px 0 0; }
.pk-invite-handle { margin: 6px 0 0; font-size: 14px; }
.pk-invite-work { margin: 24px 0 8px; }
.pk-invite-work h2 { margin: 0 0 12px; font-size: var(--pk-type-body); font-weight: var(--pk-weight-bold); }