/*
 * Every way in, one pane (owner brief, 6 October 2026): the Join / Sign in sheet under the header pill (shell.ts), the Join and
 * Sign in pages (login-wall.ts, join-form.ts), the Join card on a page (home.ts), the sign-in dialog (inline-auth.ts) and the apps'
 * first-run welcome (app-welcome.ts). Loaded last, after finish.css and app-feel.css, so a tie goes to this sheet.
 *
 *   tint      a misty teal-green, the owner's colour for arriving: the pane, its fields and its words carry it and nothing else on the
 *             page does. The ruby fill is the one primary action under the picture (the shared --paint-fill, else --pk-accent-strong).
 *   shape     radius 26 for a pane, 18 for the picture (12 on a sheet), 12 for a field, a capsule for a button; spacing 4 / 8 / 12 / 16 /
 *             24; a target is never under 44. Hover only where a pointer can hover; focus is the shared ring (--pk-focus-width, --pk-focus).
 *   the sheet the header pill's <nav> is a popover in the top layer (menu-pop.js, finish.css). In WebKit a top-layer box whose height is
 *             fit-content resolved to its max-height, and the generic menu's grid then stretched its two rows across it (the owner's
 *             tall empty panel). Here the pane is a flex column with an explicit height: auto, so no engine can stretch it.
 */

:root {
  --pk-arrive-pane: #11302a; --pk-arrive-deep: #0c2420; --pk-arrive-ink: #f1f7f3; --pk-arrive-muted: #b4d2c4;
  --pk-arrive-line: rgba(159, 211, 184, .32); --pk-arrive-well: rgba(6, 20, 16, .55); --pk-arrive-shadow: 0 16px 46px rgba(0, 0, 0, .45);
}
:root[data-look="matinee"] {
  --pk-arrive-pane: #e1f0e8; --pk-arrive-deep: #d1e8db; --pk-arrive-ink: #0f2620; --pk-arrive-muted: #3b6153;
  --pk-arrive-line: rgba(47, 111, 94, .4); --pk-arrive-well: #ffffff; --pk-arrive-shadow: 0 16px 40px rgba(31, 74, 64, .22);
}

/* ---------------------------------------------------------------- the two actions, wherever the pane is */
.pk-join-go, .pk-join-back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 16px; border: 0; border-radius: 999px; font: inherit; text-align: center; text-decoration: none; cursor: pointer; }
.pk-join-go { background: var(--paint-fill, var(--pk-accent-strong)); color: var(--paint-on-fill, var(--pk-on-accent)); font-weight: var(--pk-weight-bold, 700); }
.pk-join-back { min-height: 44px; background: transparent; color: var(--pk-arrive-ink); font-weight: var(--pk-weight-semibold, 600); }
.pk-join-go strong, .pk-join-back strong { font-size: 17px; font-weight: var(--pk-weight-bold, 700); letter-spacing: -.02em; line-height: 1.2; }
.pk-join-go small { font-size: 13px; font-weight: var(--pk-weight-semibold, 600); line-height: 1.3; opacity: .92; }
.pk-join-back small { font-size: 13px; font-weight: var(--pk-weight-regular, 400); line-height: 1.3; color: var(--pk-arrive-muted); }
.pk-join-go:focus-visible, .pk-join-back:focus-visible, .pk-welcome-skip:focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: var(--pk-focus-offset); }
.pk-join-go:active { scale: var(--pk-press-scale, .98); }
/* Hover is the one subtle brightness shift on a button (F11), only where a pointer can hover; a text link does nothing on hover. */
@media (hover: hover) {
  .pk-join-go:hover { filter: brightness(1.07); }
  .pk-join-back:hover { filter: brightness(1.12); }
}

/* The legal line: a lock, two links; the sentence is read out (fs-sr) and not shown. */
.pk-join-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 12px; margin: 0; color: var(--pk-arrive-muted); font-size: var(--pk-type-meta, 12px); line-height: 1.4; }
.pk-join-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pk-arrive-muted); text-decoration: underline; text-underline-offset: 3px; }
.pk-join-lock { flex: none; opacity: .85; }

/* The age line: one short row, the box 20 px, the row 44. */
.pk-join-card .pk-adult, section.pk-home-join .pk-adult, dialog.pk-inline-auth .pk-adult { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; color: var(--pk-arrive-ink); font-size: var(--pk-type-ui, 14px); font-weight: var(--pk-weight-semibold, 600); line-height: 1.3; }
.pk-join-card .pk-adult input, section.pk-home-join .pk-adult input, dialog.pk-inline-auth .pk-adult input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--pk-accent); }

/* ---------------------------------------------------------------- the sheet under the header pill */
.pk-join-menu > nav { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; height: auto; width: min(360px, calc(100vw - 24px)); padding: 12px; border: 0; border-radius: 26px; background: var(--pk-arrive-pane); color: var(--pk-arrive-ink); box-shadow: var(--pk-arrive-shadow); }
html body.pk-obsidian .pk-join-menu > nav { border: 0; background: var(--pk-arrive-pane); box-shadow: var(--pk-arrive-shadow); }
.pk-join-menu > nav .pk-join-stage { margin-bottom: 4px; }
/* In the top layer (menu-pop.js): the same pane, not the generic menu's grid of rows; height: auto so WebKit cannot stretch it. */
html body.pk-obsidian details.pk-join-menu[data-menu] > nav[popover]:popover-open { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; height: auto; width: min(360px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 12px; border: 0; border-radius: 26px; background: var(--pk-arrive-pane); color: var(--pk-arrive-ink); box-shadow: var(--pk-arrive-shadow); }
@media (max-width: 759px) {
  html body.pk-obsidian details.pk-join-menu[data-menu] > nav[popover].is-sheet:popover-open { width: auto; height: auto; max-height: none; padding: 12px; border-radius: 26px; }
}
html body.pk-obsidian details.pk-join-menu[data-menu] > nav a.pk-join-go,
html body.pk-obsidian details.pk-join-menu[data-menu] > nav a.pk-join-back { display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto; min-height: 52px; margin: 0; padding: 8px 16px; border: 0; border-radius: 999px; font-size: 17px; text-align: center; }
html body.pk-obsidian details.pk-join-menu[data-menu] > nav a.pk-join-go { background: var(--paint-fill, var(--pk-accent-strong)); color: var(--paint-on-fill, var(--pk-on-accent)); font-weight: var(--pk-weight-bold, 700); }
html body.pk-obsidian details.pk-join-menu[data-menu] > nav a.pk-join-back { min-height: 44px; background: transparent; color: var(--pk-arrive-ink); font-weight: var(--pk-weight-semibold, 600); }
html body.pk-obsidian details.pk-join-menu[data-menu] > nav a.pk-join-go:focus-visible { background: var(--paint-fill, var(--pk-accent-strong)); outline-offset: var(--pk-focus-offset); }
html body.pk-obsidian details.pk-join-menu[data-menu] > nav a.pk-join-back:focus-visible { background: color-mix(in srgb, var(--pk-arrive-ink) 8%, transparent); outline-offset: var(--pk-focus-offset); }
html body.pk-obsidian details.pk-join-menu[data-menu] > nav a.pk-join-back small { color: var(--pk-arrive-muted); }

/* ---------------------------------------------------------------- the Join and Sign in pages (the wall) */
.pk-wall .pk-card.pk-join-card { padding: 12px 12px 16px; border: 0; border-radius: 26px; background: var(--pk-arrive-pane); color: var(--pk-arrive-ink); }
.pk-wall .pk-join-card .pk-join-stage { margin-bottom: 12px; }
.pk-wall .pk-join-card form { gap: 8px; padding: 0 4px; }
.pk-wall .pk-join-card h2 { margin: 0 0 4px; color: var(--pk-arrive-ink); font-size: var(--pk-type-lead, 20px); font-weight: var(--pk-weight-bold); letter-spacing: -.02em; line-height: 1.2; text-align: center; }
.pk-wall .pk-join-card .pk-join-note { margin: -4px 0 0; color: var(--pk-arrive-muted); font-size: var(--pk-type-ui); line-height: 1.4; text-align: center; }
.pk-wall .pk-join-card .pk-control { border: 1px solid var(--pk-arrive-line); border-radius: 12px; background: var(--pk-arrive-well); color: var(--pk-arrive-ink); }
.pk-wall .pk-join-card .pk-control::placeholder { color: var(--pk-arrive-muted); opacity: 1; }
.pk-wall .pk-join-card .pk-show { color: var(--pk-arrive-muted); }
.pk-wall .pk-join-card .pk-show:focus-visible { color: var(--pk-arrive-ink); background: color-mix(in srgb, var(--pk-arrive-ink) 10%, transparent); }
/* The one primary: ruby, a capsule, and it stays in view while the pane scrolls. */
.pk-wall .pk-join-card .pk-submit, .pk-wall .pk-join-card #create .pk-submit { position: sticky; bottom: 8px; z-index: 1; border: 0; border-radius: 999px; background: var(--paint-fill, var(--pk-accent-strong)); color: var(--paint-on-fill, var(--pk-on-accent)); }
.pk-wall .pk-join-card .pk-join-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 16px; margin: 0; }
.pk-wall .pk-join-card .pk-join-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pk-arrive-ink); font-size: var(--pk-type-ui); font-weight: var(--pk-weight-semibold); text-decoration: none; }
.pk-wall .pk-join-card .pk-resend-link { display: inline-flex; align-items: center; justify-self: center; min-height: 44px; margin: -8px 0 0; color: var(--pk-arrive-muted); font-size: var(--pk-type-meta); text-decoration: none; }
.pk-wall .pk-join-card .pk-turnstile-retry:not([hidden]) { color: var(--pk-arrive-ink); }
.pk-wall .pk-join-card .pk-notice { border: 0; background: var(--pk-arrive-deep); color: var(--pk-arrive-ink); }
.pk-wall .pk-legal, .pk-wall .pk-back { color: var(--pk-muted); }
/* A short viewport (a phone with the keyboard up, a small window): the picture gives way to the form. */
@media (max-height: 560px) { .pk-wall .pk-join-card .pk-join-stage { display: none; } }

/* ---------------------------------------------------------------- the Join card on a page (Home, a post's comment box) */
html body.pk-obsidian section.pk-home-join { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: stretch; margin: 2px 0 8px; padding: 12px; border: 0; border-radius: 26px; background: var(--pk-arrive-pane); color: var(--pk-arrive-ink); box-shadow: none; }
html body.pk-obsidian section.pk-home-join h2 { margin: 4px 0 0; color: var(--pk-arrive-ink); font-size: var(--pk-type-lead, 20px); font-weight: var(--pk-weight-bold); letter-spacing: -.02em; line-height: 1.2; white-space: normal; text-align: center; }
html body.pk-obsidian section.pk-home-join .pk-home-join-form { display: grid; gap: 8px; min-width: 0; }
html body.pk-obsidian section.pk-home-join .pk-home-join-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
html body.pk-obsidian section.pk-home-join .pk-home-join-row .pk-control { width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--pk-arrive-line); border-radius: 12px; background: var(--pk-arrive-well); color: var(--pk-arrive-ink); font-size: 16px; }
html body.pk-obsidian section.pk-home-join .pk-home-join-row .pk-control::placeholder { color: var(--pk-arrive-muted); opacity: 1; }
html body.pk-obsidian section.pk-home-join .pk-home-join-row .pk-control:focus { border-color: var(--pk-arrive-line); }
html body.pk-obsidian section.pk-home-join .pk-home-join-row .pk-email-continue { width: 100%; min-height: 48px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--paint-fill, var(--pk-accent-strong)); color: var(--paint-on-fill, var(--pk-on-accent)); font-size: var(--pk-type-body); font-weight: var(--pk-weight-bold); line-height: 1.25; box-shadow: none; }
@media (min-width: 600px) { html body.pk-obsidian section.pk-home-join .pk-home-join-row { grid-template-columns: minmax(0, 1fr) auto; } }
html body.pk-obsidian section.pk-home-join .pk-turnstile { min-height: 0; }
html body.pk-obsidian section.pk-home-join .pk-turnstile-retry:not([hidden]) { justify-self: start; min-height: 44px; padding: 6px 0; border: 0; background: none; color: var(--pk-arrive-ink); font: inherit; font-size: var(--pk-type-ui); cursor: pointer; }
html body.pk-obsidian section.pk-home-join .pk-form-status { margin: 0; color: var(--pk-error); font-size: var(--pk-type-ui); }
html body.pk-obsidian section.pk-home-join .pk-form-status:empty { display: none; }
html body.pk-obsidian section.pk-home-join .pk-home-join-fine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin: 0; color: var(--pk-arrive-muted); font-size: var(--pk-type-meta); }
html body.pk-obsidian section.pk-home-join .pk-join-switch { display: inline-flex; align-items: center; min-height: 44px; color: var(--pk-arrive-ink); font-size: var(--pk-type-ui); font-weight: var(--pk-weight-semibold); text-decoration: none; }
.pk-feed-join section.pk-home-join { margin: 0; }

/* ---------------------------------------------------------------- the sign-in dialog over a post */
dialog.pk-inline-auth { padding: 12px 12px 16px; border: 0; border-radius: 26px; background: var(--pk-arrive-pane); color: var(--pk-arrive-ink); }
dialog.pk-inline-auth .pk-join-stage { margin-bottom: 12px; }
dialog.pk-inline-auth > header { margin: 0 4px 12px; }
dialog.pk-inline-auth h2 { font-size: var(--pk-type-lead, 20px); letter-spacing: -.02em; }
dialog.pk-inline-auth header p { margin-top: 4px; color: var(--pk-arrive-muted); font-size: 14px; }
dialog.pk-inline-auth form { gap: 8px; padding: 0 4px; }
dialog.pk-inline-auth .pk-control { border: 1px solid var(--pk-arrive-line); border-radius: 12px; background: var(--pk-arrive-well); color: var(--pk-arrive-ink); }
dialog.pk-inline-auth .pk-control::placeholder { color: var(--pk-arrive-muted); opacity: 1; }
dialog.pk-inline-auth .pk-submit { border: 0; border-radius: 999px; background: var(--paint-fill, var(--pk-accent-strong)); color: var(--paint-on-fill, var(--pk-on-accent)); }
body.pk-obsidian dialog.pk-inline-auth .pk-email-entry { grid-template-columns: minmax(0, 1fr); }
body.pk-obsidian dialog.pk-inline-auth .pk-email-entry .pk-email-continue { border: 0; border-radius: 999px; background: var(--paint-fill, var(--pk-accent-strong)); color: var(--paint-on-fill, var(--pk-on-accent)); box-shadow: none; }
dialog.pk-inline-auth .pk-inline-auth-switch { min-height: 44px; color: var(--pk-arrive-ink); font-weight: var(--pk-weight-semibold); }
dialog.pk-inline-auth a { color: var(--pk-arrive-muted); }
dialog.pk-inline-auth[data-mode="card"] .pk-join-stage { display: none; }

/* ---------------------------------------------------------------- the sent state: the mail is on its way (Forgot password, Verify your email) */
/* The fields give way (login-wall.ts renders them, inline-auth.js keeps them, so Send again brings them back with the email);
   the title says "Check your email", one line says what happens next, Back to sign in and Send again stay. */
.pk-form-sent > :is(.pk-field, label, .pk-control, .pk-turnstile, .pk-turnstile-retry, .pk-submit) { display: none; }
.pk-sent-note, .pk-wall .pk-join-card .pk-sent-note { margin: 0; color: var(--pk-arrive-muted); font-size: var(--pk-type-ui, 14px); line-height: 1.4; text-align: center; }
/* Inside the apps the mail's link opens in the phone's browser (the apps' web view allows the account site for nothing a page
   loads), so one more sentence says to come back here; paint-boot.js sets html.pk-app before first paint. */
.pk-sent-app { display: none; }
html.pk-app .pk-sent-app { display: inline; }
/* A status that confirms is said in the pane's ink, not the error colour. */
.pk-wall .pk-form-status[data-tone="ok"], dialog.pk-inline-auth .pk-form-status[data-tone="ok"] { color: var(--pk-arrive-ink); text-align: center; }
dialog.pk-inline-auth .pk-inline-auth-again:not([hidden]) { display: inline-block; }

/* ---------------------------------------------------------------- the apps' first-run welcome (html.pk-welcoming, paint-boot.js) */
.pk-welcome { display: none; }
html.pk-welcoming .pk-welcome { position: fixed; inset: 0; z-index: 70; display: grid; align-content: center; justify-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
html.pk-welcoming body.pk-obsidian.fs-page :is(.pk-top, .pk-frame, .pk-mobile-nav, .pk-foot, .pk-android-nudge, .pk-wall, .pk-chat-dock) { display: none; }
.pk-welcome-pane { display: grid; gap: 8px; width: min(100%, 420px); padding: 12px 12px 12px; border-radius: 26px; background: var(--pk-arrive-pane); color: var(--pk-arrive-ink); box-shadow: var(--pk-arrive-shadow); }
.pk-welcome-pane h1 { margin: 8px 0 4px; color: var(--pk-arrive-ink); font-size: 26px; font-weight: var(--pk-weight-bold); letter-spacing: -.03em; line-height: 1.15; text-align: center; }
.pk-welcome-pane .pk-join-go { font-size: 17px; }
.pk-welcome-skip { justify-self: center; min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: var(--pk-arrive-muted); font: inherit; font-size: var(--pk-type-meta, 12px); cursor: pointer; }
@media (hover: hover) { .pk-welcome-skip:hover { filter: brightness(1.15); } }

/* ---------------------------------------------------------------- the soft keyboard, Matinee's paper, forced colours, stillness */
html.pk-kbd :is(section.pk-home-join, dialog.pk-inline-auth) .pk-join-stage { display: none; }
@media (forced-colors: active) {
  .pk-join-go, .pk-wall .pk-join-card .pk-submit { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .pk-join-back, .pk-welcome-skip { color: LinkText; }
  :is(.pk-join-menu > nav, .pk-wall .pk-card.pk-join-card, section.pk-home-join, dialog.pk-inline-auth, .pk-welcome-pane) { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) { .pk-join-go:active { scale: none; } }
