/*
 * The Kit, by hand (13 October 2026, docs/proposals/next-round-spec-20261013.md 1.1 and 1.2). Linked after kit-snap.css only
 * while PUBLIKA_KIT is on; every rule sits under html[data-kit]. Seven sizes (--pk-kit-11 to --pk-kit-40), three corners
 * (--pk-kit-control 12, --pk-kit-sheet 18, --pk-kit-pane 26), one icon stroke (2), no blur but the top and bottom bars, panes
 * as a tint on the paint and never a pane inside a pane, the paint stroke (one a screen) or the ghost for actions.
 * test/web/design-lint.test.mjs holds the six screens to it.
 */

/* ---- Type: the body reads at 15; what the browser sizes by itself (small, q, sub, sup, a bare h1) lands on the Kit. ---- */
html[data-kit] body.pk-obsidian { font-size: var(--pk-kit-15); }
:where(html[data-kit]) :is(small, q, sub, sup) { font-size: var(--pk-kit-13); }
:where(html[data-kit]) h1 { font-size: var(--pk-kit-28); }
/* A page's title is carved, never in a box: 28 on a phone, 40 wide. */
html[data-kit] body.pk-obsidian main :is(h1, .pk-door-title, .pk-page-title):not(.pk-poster) { font-size: var(--pk-kit-28); font-variation-settings: var(--pk-carved); font-weight: var(--pk-weight-bold); letter-spacing: -.02em; line-height: 1.05; }
@media (min-width: 760px) { html[data-kit] body.pk-obsidian main :is(h1, .pk-door-title, .pk-page-title):not(.pk-poster) { font-size: var(--pk-kit-40); } }
/* A words post: 21, weight 600, Flare 40 (the identity review). */
html[data-kit] body.pk-obsidian :is(.pk-post-card--text, .pk-words-stage) .pk-post-text { font-size: var(--pk-kit-21); font-weight: var(--pk-weight-semibold); font-variation-settings: var(--pk-words-cut); line-height: 1.32; }

/* ---- One icon stroke: 2. ---- */
html[data-kit] body.pk-obsidian :is(.pk-mobile-nav, .pk-rail, .pk-top, main) svg:not([class*="portrait"]):not([class*="scene"]):not([class*="mark"]) :is(path, circle, rect, line, polyline, polygon, ellipse)[stroke]:not([stroke="none"]) { stroke-width: var(--pk-kit-stroke); }
html[data-kit] body.pk-obsidian :is(.pk-mobile-nav, .pk-rail, .pk-top, main) svg[stroke]:not([stroke="none"]) { stroke-width: var(--pk-kit-stroke); }

/* ---- Panes: a tint on the paint, never a pane inside a pane. ---- */
/* Settings: the page is the one sheet; its groups are a carved title and a gap. */
html[data-kit] body.pk-obsidian .pk-settings-hub .pk-settings-group { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html[data-kit] body.pk-obsidian .pk-settings-hub .pk-settings-group h2 { padding-inline: 0; font-size: var(--pk-kit-17); font-variation-settings: var(--pk-carved); }
html[data-kit] body.pk-obsidian .pk-stage > main.pk-settings-hub > form.pk-settings-signout { padding-inline: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html[data-kit] body.pk-obsidian .pk-settings-hub .pk-settings-groups { gap: 28px; }

/* ---- Actions: the paint stroke (one a screen, paint-stroke.js marks it with .has-stroke) or the ghost. The amber block goes:
   every fill of Paint's one-fill family inside the page (not the bars' own +, not a call's red, not a chat's send) is a ghost. ---- */
html[data-kit] body.pk-obsidian main :is(.fs-button.fs-button--primary, .pk-submit, .pk-message-new, .pk-message-new-button, .pk-stream-new, .pk-invite-channel--share, .pk-daily-cta):not([aria-pressed="true"]):not(.has-stroke) {
  border: 1px solid var(--pk-line-strong); background: transparent; background-image: none; color: var(--pk-ink); box-shadow: none; text-shadow: none;
}
html[data-kit] body.pk-obsidian main :is(.fs-button, .pk-submit, .pk-message-new, .pk-message-new-button, .pk-stream-new, .pk-invite-channel--share, .pk-daily-cta, .pk-fbtn, [data-kit-stroke]).has-stroke {
  position: relative; isolation: isolate; overflow: hidden; border: 0; background: transparent; background-image: none; box-shadow: none; text-shadow: none;
  color: #1a0a10; font-weight: var(--pk-weight-bold); font-variation-settings: var(--pk-carved);
}
@media (hover: hover) {
  html[data-kit] body.pk-obsidian main :is(.fs-button.fs-button--primary, .pk-submit, .pk-message-new, .pk-message-new-button, .pk-stream-new, .pk-invite-channel--share, .pk-daily-cta):not(.has-stroke):hover:not(:disabled) { border-color: var(--pk-ink); background: transparent; }
  html[data-kit] body.pk-obsidian main .has-stroke:hover:not(:disabled) { background: transparent; filter: brightness(1.06); }
}

/* Today: its sections are a carved title and a gap; a section holds rows, never a box of boxes. */
html[data-kit] body.pk-obsidian .pk-today-section > h2 { font-size: var(--pk-kit-21); font-variation-settings: var(--pk-carved); font-weight: var(--pk-weight-bold); letter-spacing: -.02em; }
html[data-kit] body.pk-obsidian .pk-today-section + .pk-today-section { margin-top: 28px; }
html[data-kit] body.pk-obsidian .pk-waiter { border: 0; border-radius: var(--pk-kit-sheet); background: color-mix(in srgb, var(--paint-pane, #100b18) 82%, transparent); }
/* One small thing is a pane; the question inside it is a row on it, not a second box. */
html[data-kit] body.pk-obsidian .pk-sn .pk-sn-ask { padding: 10px 0; border-radius: 0; background: transparent; box-shadow: none; border-block: 1px solid rgba(247, 233, 215, .14); }
/* The red and amber block links (pk-fbtn) are the ghost too. */
html[data-kit] body.pk-obsidian main .pk-fbtn:not(.has-stroke):not([aria-pressed="true"]):not([data-follow-requested="1"]) {
  /* creators.css paints the family through its own variables (with !important): the ghost is written in them. */
  --fb-bg: transparent; --fb-blend: normal; --fb-fg: var(--pk-ink); --fb-border: 1px solid var(--pk-line-strong); --fb-shadow: none;
  text-shadow: none;
}
html[data-kit] body.pk-obsidian main .pk-fbtn:not(.has-stroke):not([aria-pressed="true"]):not([data-follow-requested="1"])::before, html[data-kit] body.pk-obsidian main .pk-fbtn:not(.has-stroke):not([aria-pressed="true"]):not([data-follow-requested="1"])::after { content: none; }

/* ---- Paint, never gradient: the rainbow, the word tiles and the Club tiles are washes of strokes (paint-stroke.js paints a
   canvas.pk-wash into each); under it, and wherever WebGL cannot paint, a flat colour. ---- */
html[data-kit] body.pk-obsidian :is(.pk-engage-remind:not(.pk-engage-frames), .pk-media--text, .pk-tile--text, .pk-words-panel, span.pk-house-face, .pk-connect-photo--letter > .pk-house-face) { background-image: none !important; }
html[data-kit] body.pk-obsidian .pk-engage-remind:not(.pk-engage-frames) { background-color: #ff4d6d !important; }
html[data-kit] body.pk-obsidian .pk-media--text:not([class*="pk-words-ground--"]) { background-color: #1b1f20; }
html[data-kit] body.pk-obsidian span.pk-house-face { background-color: var(--pd, #3b0f25) !important; }
/* The Today strip and a Club's page head (14 October 2026): flat under their wash, the head's grain and gradients gone. */
html[data-kit] body.pk-obsidian a.pk-today-strip { background-image: none !important; }
html[data-kit] body.pk-obsidian .pk-server-head.pk-house-head[class*="pk-paint-"] { background-image: none !important; background-color: color-mix(in srgb, var(--pd, #3b0f25) 80%, #0a0610) !important; }
html[data-kit] body.pk-obsidian .has-wash { position: relative; isolation: isolate; overflow: hidden; }
html[data-kit] body.pk-obsidian .has-wash > .pk-wash { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
html[data-kit] body.pk-obsidian span.pk-house-face.has-wash { text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
@media (forced-colors: active) { html[data-kit] .pk-wash { display: none; } }

/* ---- The rest of the fills: the chat's call buttons and the top bar's + New are ghosts; the send is the thread's stroke
   (paint-stroke.js), and "Add a photo" is its sheet's stroke. The phone bar's + already sits on its dab. ---- */
html[data-kit] body.pk-obsidian :is(.pk-chat-call, .pk-message-call, .pk-top .pk-create-action):not(.has-stroke) {
  border: 1px solid var(--pk-line-strong); background: transparent; background-image: none; color: var(--pk-ink); box-shadow: none; text-shadow: none;
}
html[data-kit] body.pk-obsidian :is(.pk-message-send, .pk-chat-send).has-stroke,
html[data-kit] body .pk-pf .pk-pf-sheet .pk-pf-primary.pk-pf-primary--go.has-stroke {
  position: relative; isolation: isolate; overflow: hidden; border: 0; background: transparent; background-image: none; box-shadow: none; text-shadow: none;
  color: #1a0a10; font-weight: var(--pk-weight-bold); font-variation-settings: var(--pk-carved);
}
@media (hover: hover) {
  html[data-kit] body.pk-obsidian :is(.pk-chat-call, .pk-message-call, .pk-top .pk-create-action):not(.has-stroke):hover { border-color: var(--pk-ink); background: transparent; }
}

/* ---- The pill (Julien, 14 October 2026): every action that was the tapered lens is the mntm page's satin pill. Its shape is the
   Kit's own (--pk-kit-pill: about 17 px, the corners a little uneven so it reads hand-made; the lint checks it), no taper, no
   pointed ends, no ridges. paint-stroke.js paints the field (warm gold into amber, a highlight inset at the top, a warm inner
   shadow at the foot) on a canvas clipped to the corners; under it, and without WebGL or under Save-Data, the same satin as a flat
   amber with the two inset shadows. A soft drop shadow under both. The words are the mntm page's dark ink. ---- */
html[data-kit] body .pk-kit-pill.has-stroke, html[data-kit] body.pk-obsidian main .pk-kit-pill.has-stroke, html[data-kit] body.pk-obsidian .pk-profile.pk-creator .pk-creator-head .pk-creator-actions > :is(#follow, #follow-guest).pk-kit-pill.has-stroke, html[data-kit] body .pk-pf .pk-pf-sheet .pk-pf-primary.pk-pf-primary--go.pk-kit-pill.has-stroke {
  position: relative; isolation: isolate; overflow: hidden; min-height: 44px; border: 0; border-radius: var(--pk-kit-pill) !important;
  background: #f9b746; background-image: none; color: #1a0a10; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 248, 228, .75), inset 0 -3px 6px rgba(150, 62, 0, .38), 0 4px 12px rgba(0, 0, 0, .38);
  font-weight: var(--pk-weight-bold); font-variation-settings: var(--pk-carved);
}
html[data-kit] body .pk-kit-pill > .pk-stroke--pill { left: 0; top: 0; z-index: -1; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
html[data-kit] body .pk-kit-pill > .pk-stroke--pill.pk-stroke--still { display: none; }

/* ======================================================================================================================
   Mock parity (14 October 2026, docs/ops/mock-parity-20261014.md): each screen as Julien approved it in
   docs/proposals/next-round-20261013.html. The phone first; wide pages keep their columns.
   ====================================================================================================================== */

/* ---- The Stream (mock 1.1, with Julien's corrections of 14 October). The bar: the carved mark, Search and Chat; no menu on a
   phone (the bottom bar and the Frame hold the places). No terms strip: a terms update is a quiet toast once (pages.js). Fresh and
   Familiar are carved titles in the flow with the brush under the current one. Every post keeps the 16 px gutter and is parted
   from the next by space, never by a tinted pane: a picture keeps its author row inside it at the top on a soft scrim and its
   rail in a column of its own beside it (the picture is the content width less the rail, never under it); a words post is its
   author row, the quiet chips, the words at 21 flat on the ground and the rail beside them. Nothing crosses either edge. ---- */
@media (max-width: 759px) {
  html[data-kit] body.pk-obsidian .pk-top .pk-spaces-label, html[data-kit] body.pk-obsidian .pk-frame > label.pk-spaces-label { display: none; }
  html[data-kit] body.pk-obsidian .pk-home .pk-home-top { position: static; display: flex; align-items: center; justify-content: space-between; min-height: 0; margin: 8px 0 4px; padding: 0; border-radius: 0; background: transparent; }
  html[data-kit] body.pk-obsidian .pk-home .pk-home-top::before { content: none; }
  html[data-kit] body.pk-obsidian .pk-home .pk-home-top .pk-feed-toggle { order: -1; gap: 20px; margin: 0 auto 0 0; padding: 0; border: 0; background: transparent; }
  html[data-kit] body.pk-obsidian .pk-home .pk-home-top .pk-feed-toggle a { min-height: 44px; padding: 0 0 10px; background: transparent; font-size: var(--pk-kit-28); font-variation-settings: var(--pk-carved); font-weight: var(--pk-weight-bold); letter-spacing: -.03em; line-height: 1.1; }
  html[data-kit] body.pk-obsidian .pk-home .pk-home-top .pk-feed-toggle a:not([aria-current="page"]) { color: var(--pk-muted); }
  html[data-kit] body.pk-obsidian .pk-home .pk-home-top .pk-feed-toggle a[aria-current]:not([aria-current="false"])::after { left: 0; right: 30%; bottom: 0; height: 8px; }
  /* The Today strip: a band of its paint inside the gutter. */
  html[data-kit] body.pk-obsidian .pk-home a.pk-today-strip { border-radius: var(--pk-kit-sheet); }
  /* The next step (Make your first post): one carved line and the bare word, in the flow. */
  html[data-kit] body.pk-obsidian .pk-home .pk-next-step { display: grid; gap: 10px; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  html[data-kit] body.pk-obsidian .pk-home .pk-next-step[hidden] { display: none; }
  html[data-kit] body.pk-obsidian .pk-home .pk-next-step :is(.pk-profile-photo-preview, p) { display: none; }
  html[data-kit] body.pk-obsidian .pk-home .pk-next-step h2 { margin: 0; font-size: var(--pk-kit-21); font-variation-settings: var(--pk-carved); letter-spacing: -.02em; }
  html[data-kit] body.pk-obsidian .pk-home .pk-next-step .pk-profile-photo-actions { margin: 0; align-items: center; }
  /* Space between posts, not panes. */
  html[data-kit] body.pk-obsidian .pk-home .pk-post-feed { gap: 32px; }
  html[data-kit] body.pk-obsidian .pk-home .pk-post-feed > li { margin: 0; padding: 0; }
  /* What else sits in the flow (Through your people, Same Time, One small thing, the credits tip, good news, a words-only
     post) loses its pane: words on the ground, its picture kept. */
  html[data-kit] body.pk-obsidian .pk-home :is(.pk-post-card--text, .pk-feed-connect > section, .pk-feed-news > section) { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  html[data-kit] body.pk-obsidian .pk-home .pk-post-card--text { padding-inline: 0; }
  html[data-kit] body.pk-obsidian .pk-home :is(.pk-feed-connect > section, .pk-feed-news > section)::before { content: none; }
  html[data-kit] body.pk-obsidian .pk-home :is(.pk-st-art, .pk-sn-art, .pk-news-stage, .pk-ct-scene) { overflow: hidden; border-radius: var(--pk-kit-sheet); }
  html[data-kit] body.pk-obsidian .pk-home .pk-connect-invite { padding-inline: 0; }
  html[data-kit] body.pk-obsidian .pk-home :is(.pk-feed-connect > section, .pk-feed-news > section) :is(.pk-st-copy, .pk-sn-copy, .pk-news-body, .pk-ct-copy) { padding-inline: 0; }
}
/* Posts, wherever they are drawn (the Stream, a post's page, a Club, the front): the rail has a column of its own. */
html[data-kit] body.pk-obsidian :is(.pk-post-feed, .pk-post-page, .pk-front) .pk-post-card--media .pk-photo-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) 48px; column-gap: 4px; align-items: start; width: 100%; max-width: 100%; background: transparent;
}
html[data-kit] body.pk-obsidian :is(.pk-post-feed, .pk-post-page, .pk-front) .pk-post-card--media .pk-photo-stage > :is(.pk-media, .pk-sensitive) { grid-column: 1; grid-row: 1; min-width: 0; border-radius: var(--pk-kit-sheet); }
html[data-kit] body.pk-obsidian :is(.pk-post-feed, .pk-post-page, .pk-front) .pk-post-card--media .pk-photo-stage > .pk-photo-head { grid-column: 1; grid-row: 1; align-self: start; position: relative; inset: auto; border-radius: var(--pk-kit-sheet) var(--pk-kit-sheet) 0 0; }
html[data-kit] body.pk-obsidian :is(.pk-post-feed, .pk-post-page, .pk-front) .pk-post-card--media .pk-photo-stage > .pk-photo-rail { grid-column: 2; grid-row: 1; align-self: end; position: static; flex-direction: column; gap: 0; padding: 0; color: var(--pk-ink); }
html[data-kit] body.pk-obsidian :is(.pk-post-feed, .pk-post-page, .pk-front) .pk-post-card--media .pk-photo-stage > .pk-photo-rail :is(svg, .pk-icon, .pk-ico) { filter: none; }
html[data-kit] body.pk-obsidian :is(.pk-post-feed, .pk-post-page, .pk-front) .pk-post-card--media .pk-photo-stage > .pk-photo-rail .pk-engage-remind { margin: 4px 0; }
html[data-kit] body.pk-obsidian :is(.pk-post-feed, .pk-post-page, .pk-front) .pk-post-card--media .pk-photo-stage > .pk-photo-foot { grid-column: 1; grid-row: 2; align-self: start; position: relative; inset: auto; padding: 8px 0 0; background: none; border-radius: 0; }
html[data-kit] body.pk-obsidian :is(.pk-post-feed, .pk-post-page, .pk-front) .pk-post-card--media .pk-photo-stage:is(.pk-frame--16x9, .pk-frame--scope) > .pk-photo-foot { grid-column: 1 / -1; grid-row: 2; align-self: start; }
html[data-kit] body.pk-obsidian :is(.pk-post-feed, .pk-post-page, .pk-front) .pk-post-card--media .pk-photo-stage:is(.pk-frame--16x9, .pk-frame--scope) > .pk-photo-head { padding-bottom: 12px; }
/* A words post (mock 1.1, Noor's question): the author row, "Waiting for an answer" and "Question" as quiet chips, the words at
   21, weight 600, Flare 40, flat on the ground with only a quiet tint of its colour beside them, no block, no corners, the rail in
   its column. */
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage {
  --words-ink: var(--pk-ink);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) 48px; grid-template-rows: auto 1fr auto; column-gap: 4px; min-height: 0; padding: 16px;
  border-radius: var(--pk-kit-pane) !important; background: color-mix(in srgb, var(--words-ground, #ff4b3a) 24%, transparent) !important; box-shadow: none;
  color: var(--pk-ink); overflow: visible;
}
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage.has-field { background: transparent !important; }
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage > canvas.pk-field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage > .pk-wash { display: none; }
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage > .pk-photo-head { grid-column: 1 / -1; grid-row: 1; padding: 0 0 6px; border-radius: 0; background: none; }
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage > .pk-words-body { grid-column: 1; grid-row: 2; padding: 4px 0 0; }
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage > .pk-photo-rail { grid-column: 2; grid-row: 2; position: static; align-self: end; flex-direction: column; gap: 0; color: var(--pk-ink); }
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage > .pk-photo-foot { grid-column: 1 / -1; grid-row: 3; padding: 8px 0 0; background: none; }
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage > .pk-photo-foot:empty { display: none; }
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage .pk-words-text { color: var(--pk-ink); font-size: var(--pk-kit-21); font-weight: var(--pk-weight-semibold, 600); font-variation-settings: var(--pk-words-cut, "FLAR" 40); line-height: 1.32; letter-spacing: -.005em; }
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage .pk-photo-head :is(.pk-post-author-name, .pk-post-author-name a) { color: var(--pk-ink); }
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage .pk-photo-head .pk-post-author-meta > * { color: var(--pk-muted); }
html[data-kit] body.pk-obsidian .pk-photo-stage.pk-words-stage .pk-photo-head .pk-post-more > summary { color: var(--pk-ink); }
html[data-kit] body.pk-obsidian .pk-photo-why { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-kit] body.pk-obsidian .pk-photo-why :is(.pk-post-reason, .pk-intent, .pk-screening-mark) { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 0; border-radius: 999px !important; background: rgba(255, 255, 255, .08); color: var(--pk-muted); font-size: var(--pk-kit-13); font-weight: var(--pk-weight-medium, 500); }
/* The meta under the name is when (and where, on its own line): the @handle stays on the Frame. */
html[data-kit] body.pk-obsidian :is(.pk-post-feed, .pk-post-page, .pk-front) :is(.pk-photo-head, .pk-post-card-head) .pk-post-author-meta > span:first-child { display: none; }
html[data-kit] body.pk-obsidian :is(.pk-post-feed, .pk-post-page, .pk-front) :is(.pk-photo-head, .pk-post-card-head) .pk-post-author-meta > span:first-child + *::before { content: none; }

/* ---- Today (mocks 1.2, 2.2, 2.3). The opener is the poster (the day and its word) with the counts under it; Of you is you on
   a polaroid beside the first thing waiting and See it on the pill; Tonight is who is going as faces; the stray and Free
   tonight are one tint each; nothing sits in a pane inside a pane. ---- */
html[data-kit] body.pk-obsidian .pk-today .pk-today-opener { margin: 8px 0 28px; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-opener .pk-poster { margin: 0; font-size: var(--pk-kit-40); line-height: .98; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-counts { margin: 10px 0 0; color: var(--pk-muted); font-size: var(--pk-kit-17); line-height: 1.35; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-ofyou-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: start; gap: 20px; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-ofyou-shot { display: block; width: 132px; transform: rotate(-6deg); }
html[data-kit] body.pk-obsidian .pk-today .pk-today-ofyou-shot > * { display: block; width: 100%; height: auto; aspect-ratio: 1; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-ofyou-shot :is(svg, img) { width: 100%; height: 100%; border-radius: 0; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-ofyou-words { display: grid; justify-items: start; gap: 8px; padding-top: 6px; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-ofyou-words h2 { margin: 0; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-ofyou-words p { margin: 0; color: var(--pk-muted); font-size: var(--pk-kit-15); line-height: 1.35; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-ofyou-words .pk-today-see { width: 100%; justify-content: center; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-ofyou > .pk-today-line { margin-top: 12px; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-line { padding: 10px 0; border: 0; border-bottom: 1px solid var(--pk-line); border-radius: 0; background: transparent; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-tonight { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-tonight a { display: grid; gap: 6px; color: var(--pk-ink); text-decoration: none; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-tonight strong { font-size: var(--pk-kit-17); }
html[data-kit] body.pk-obsidian .pk-today .pk-today-tonight-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-tonight-faces { display: inline-flex; flex: none; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-tonight-faces > * { width: 36px; height: 36px; margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--paint-night, #0b0810); }
html[data-kit] body.pk-obsidian .pk-today .pk-today-tonight-faces > :first-child { margin-left: 0; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-tonight small { color: var(--pk-muted); font-size: var(--pk-kit-15); line-height: 1.35; }
/* Lists on Today are rows on the ground, never boxes (redesign.css boxes a section's list items). */
html[data-kit] body.pk-obsidian .pk-today :is(.pk-today-tonight, .pk-whisper-list) > li { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html[data-kit] body.pk-obsidian .pk-today .pk-whisper-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
/* A whisper waiting (mock 2.2): a tinted row, the face, who and how, and the painted smear kept small at its end. */
html[data-kit] body.pk-obsidian .pk-today .pk-whisper-list .pk-whisper-hold { isolation: isolate; min-height: 64px; padding: 10px 92px 10px 12px; border-radius: var(--pk-kit-sheet); background: rgba(255, 255, 255, .06); color: var(--pk-ink); }
html[data-kit] body.pk-obsidian .pk-today .pk-whisper-list .pk-whisper-smear { inset: 50% 14px auto auto; z-index: 0; width: 64px; height: 40px; border-radius: var(--pk-kit-control); transform: translateY(-50%); }
html[data-kit] body.pk-obsidian .pk-today .pk-whisper-list .pk-whisper-hold > .pk-pt { grid-row: span 2; width: 40px; height: 40px; }
html[data-kit] body.pk-obsidian .pk-today .pk-whisper-list .pk-whisper-what { font-size: var(--pk-kit-15); }
html[data-kit] body.pk-obsidian .pk-today .pk-whisper-list .pk-whisper-how { color: var(--pk-faint); font-size: var(--pk-kit-13); opacity: 1; }
html[data-kit] body.pk-obsidian .pk-today .pk-today-whispers { margin: 0 0 28px; }
/* The stray and Free tonight (mock 2.3): one tint each, the stray's Whisper on the pill, Not today the ghost; "I'm free" is
   the amber chip until it is said, then the quiet word. */
html[data-kit] body.pk-obsidian .pk-today :is(.pk-stray, .pk-free) { gap: 10px; margin: 0 0 16px; padding: 16px; border-radius: var(--pk-kit-sheet); background: rgba(255, 255, 255, .06); }
html[data-kit] body.pk-obsidian .pk-today .pk-free { background: rgba(255, 255, 255, .04); }
html[data-kit] body.pk-obsidian .pk-today .pk-stray-eyebrow { font-size: var(--pk-kit-11); }
html[data-kit] body.pk-obsidian .pk-today :is(.pk-stray-title, .pk-free-title) { font-size: var(--pk-kit-21); font-variation-settings: var(--pk-carved); letter-spacing: -.02em; }
html[data-kit] body.pk-obsidian .pk-today .pk-free-toggle:not([aria-pressed="true"]) { border-color: transparent; background: #ffb43f; color: #1a0a10; }
html[data-kit] body.pk-obsidian .pk-today .pk-free-toggle[aria-pressed="true"] { border-color: var(--pk-line-strong); background: transparent; color: var(--pk-ink); }
html[data-kit] body.pk-obsidian .pk-today .pk-free-who { color: var(--pk-muted); }

/* ---- A thread (mocks 2.1, 2.3). The head: back, the face, the name carved, the ember beside it (the @handle stays on the
   Frame), the call glyphs. A waiting whisper is a bubble of its smear with "Hold to see" on it and who under it. The row: the
   camera ring, "Say something…", and the pill: Whisper while nothing is typed, Send once there are words (or a picture). ---- */
@media (max-width: 759px) {
  html[data-kit] body.pk-obsidian .pk-message-thread-head .pk-message-thread-who > p:not(.pk-message-presence) { display: none; }
  html[data-kit] body.pk-obsidian .pk-message-thread-head .pk-message-thread-who h2 { font-size: var(--pk-kit-17); font-variation-settings: var(--pk-carved); }
  html[data-kit] body.pk-obsidian .pk-message-thread-head > .pk-ember { order: 3; }
  html[data-kit] body.pk-obsidian .pk-message-thread-head > .pk-message-thread-who { order: 2; flex: 0 1 auto; min-width: 0; }
  html[data-kit] body.pk-obsidian .pk-message-thread-head > .pk-message-thread-tools { order: 4; margin-left: auto; }
}
html[data-kit] body.pk-obsidian .pk-message-scroll .pk-whispers .pk-whisper-list { display: grid; gap: 34px; margin: 8px 0 30px; padding: 0; list-style: none; }
html[data-kit] body.pk-obsidian .pk-message-scroll .pk-whispers .pk-whisper { padding: 0; border: 0; background: none; }
html[data-kit] body.pk-obsidian .pk-message-scroll .pk-whispers .pk-whisper-hold { display: grid; grid-template-columns: 1fr; place-items: center; text-align: center; width: 78%; min-height: 124px; overflow: visible; padding: 12px; border-radius: var(--pk-kit-sheet); background: var(--pa, #ff5fa8); color: #fff8f0; }
html[data-kit] body.pk-obsidian .pk-message-scroll .pk-whispers .pk-whisper-smear { inset: 0; border-radius: inherit; overflow: hidden; }
html[data-kit] body.pk-obsidian .pk-message-scroll .pk-whispers .pk-whisper-how { grid-column: 1; font-size: var(--pk-kit-13); font-weight: var(--pk-weight-bold); letter-spacing: .08em; text-transform: uppercase; opacity: 1; }
html[data-kit] body.pk-obsidian .pk-message-scroll .pk-whispers .pk-whisper-what { grid-column: 1 / -1; grid-row: 1; position: absolute; top: calc(100% + 6px); left: 0; right: 0; color: var(--pk-faint); font-size: var(--pk-kit-13); font-weight: var(--pk-weight-medium, 500); text-align: center; }
html[data-kit] body.pk-obsidian .pk-message-scroll .pk-whispers .pk-whisper-hold > .pk-pt { display: none; }
@media (max-width: 759px) {
  html[data-kit] body.pk-obsidian .pk-message-conversation:has(> .pk-whisper-sheet) { position: relative; }
  html[data-kit] body.pk-obsidian .pk-message-conversation > .pk-whisper-sheet { position: absolute; right: 12px; bottom: 19px; z-index: 5; margin: 0; }
  html[data-kit] body.pk-obsidian .pk-message-conversation > .pk-whisper-sheet > .pk-whisper-form { position: absolute; right: 0; bottom: calc(100% + 8px); width: calc(100vw - 24px); }
  html[data-kit] body.pk-obsidian .pk-message-conversation:has(> .pk-whisper-sheet) > form.pk-message-reply:has(textarea:placeholder-shown):not(:has(.pk-chat-preview:not([hidden]))) { padding-right: 116px; }
  html[data-kit] body.pk-obsidian .pk-message-conversation:has(> .pk-whisper-sheet) > form.pk-message-reply:has(textarea:placeholder-shown):not(:has(.pk-chat-preview:not([hidden]))) .pk-message-send { display: none; }
  html[data-kit] body.pk-obsidian .pk-message-conversation:has(> form.pk-message-reply textarea:not(:placeholder-shown)) > .pk-whisper-sheet:not([open]),
  html[data-kit] body.pk-obsidian .pk-message-conversation:has(> form.pk-message-reply .pk-chat-preview:not([hidden])) > .pk-whisper-sheet:not([open]) { display: none; }
  html[data-kit] body.pk-obsidian .pk-message-conversation > .pk-whisper-sheet > summary.pk-whisper-open { min-height: 44px; padding: 0 18px; }
  /* Where anchors are drawn, the pill sits level with the field whatever shows under it (a draft, a reply). */
  @supports (anchor-name: --a) {
    html[data-kit] body.pk-obsidian form.pk-message-reply .pk-message-field { anchor-name: --pk-reply-field; }
    html[data-kit] body.pk-obsidian .pk-message-conversation > .pk-whisper-sheet { position-anchor: --pk-reply-field; top: calc(anchor(top) + 9px); bottom: auto; }
  }
  /* The camera ring: the picture chooser drawn as the mock's ring. */
  html[data-kit] body.pk-obsidian form.pk-message-reply .pk-message-field > .pk-chat-choose { box-shadow: inset 0 0 0 2px #ff4b3a; color: var(--pk-ink); }
}

/* ---- A Club's house (mock 3.1): the name carved at 40 on the ground, no pane and no wash; the faces with their names; the
   actions; one line of what it is; ROOMS as painted rows; then Rooms | Tonight | People as chips. No rail of Clubs above it
   and no floating "Add to" bar on a phone (the bar's + posts into the Club). ---- */
@media (max-width: 759px) {
  html[data-kit] body.pk-obsidian .pk-server-layout:has(.pk-house-head) > nav.pk-srail { display: none; }
  html[data-kit] body.pk-obsidian .pk-server-main:has(> .pk-house-head) > .pk-club-addbar { display: none; }
  html[data-kit] body.pk-obsidian .pk-server-main > header.pk-server-head.pk-house-head {
    display: grid; gap: 14px; margin: 4px 0 24px; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; overflow: visible;
  }
  html[data-kit] body.pk-obsidian .pk-server-main > header.pk-house-head > .pk-wash, html[data-kit] body.pk-obsidian .pk-server-main > header.pk-house-head::before, html[data-kit] body.pk-obsidian .pk-server-main > header.pk-house-head::after { display: none; }
  html[data-kit] body.pk-obsidian .pk-house-head .pk-house-top { display: contents; }
  html[data-kit] body.pk-obsidian .pk-house-head .pk-server-identity { order: 1; display: block; }
  html[data-kit] body.pk-obsidian .pk-house-head .pk-server-identity > .pk-house-face, html[data-kit] body.pk-obsidian .pk-house-head .pk-server-kicker { display: none; }
  html[data-kit] body.pk-obsidian .pk-house-head h1.pk-house-name { margin: 0; font-size: var(--pk-kit-40); line-height: 1; letter-spacing: -.03em; font-variation-settings: var(--pk-carved); text-shadow: none; }
  html[data-kit] body.pk-obsidian .pk-house-head .pk-house-faces { order: 2; display: flex; align-items: center; gap: 10px; margin: 0; }
  html[data-kit] body.pk-obsidian .pk-house-head .pk-house-faces-names { color: var(--pk-muted); font-size: var(--pk-kit-15); }
  html[data-kit] body.pk-obsidian .pk-house-head .pk-server-actions { order: 3; margin: 0; }
  html[data-kit] body.pk-obsidian .pk-house-head .pk-server-lede { order: 4; margin: 0; color: var(--pk-muted); font-size: var(--pk-kit-15); line-height: 1.4; }
  html[data-kit] body.pk-obsidian .pk-house-head .pk-server-meta { order: 5; margin: 0; color: var(--pk-faint); font-size: var(--pk-kit-13); }
  html[data-kit] body.pk-obsidian .pk-house-head .pk-club-notice { order: 6; padding: 0; border: 0; border-top: 1px solid var(--pk-line); border-radius: 0; background: transparent; }
  html[data-kit] body.pk-obsidian .pk-house-rooms > h2.pk-house-eyebrow { margin: 0 0 10px; color: #ffb43f; font-size: var(--pk-kit-13); font-weight: var(--pk-weight-bold); letter-spacing: .14em; text-transform: uppercase; }
  html[data-kit] body.pk-obsidian .pk-server-main > nav.pk-club-tabs { display: flex; gap: 8px; margin: 20px 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  html[data-kit] body.pk-obsidian .pk-server-main > nav.pk-club-tabs > a { min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--pk-ink); }
  html[data-kit] body.pk-obsidian .pk-server-main > nav.pk-club-tabs > a[aria-current]:not([aria-current="false"]) { background: #ffb43f; color: #1a0a10; }
  html[data-kit] body.pk-obsidian .pk-server-main > nav.pk-club-tabs > a[aria-current]::after { content: none; }
  html[data-kit] body.pk-obsidian .pk-server-main > section.pk-front > .pk-front-event { border: 0; border-radius: var(--pk-kit-sheet); background: rgba(255, 255, 255, .06); }
}
/* The pill's words keep the dark ink whatever a sheet set on its inner span. */
html[data-kit] body .pk-kit-pill.has-stroke > :not(.pk-stroke) { color: #1a0a10 !important; }

/* ---- A room (mock 3.2): the Club's name small at the head, the room strip as chips (the current one amber), the posts, the
   house whisper as a veiled card under them, and the room's rule as the foot line. The house's own head (faces, actions, what
   it is, Notices) and Rooms | Tonight | People stay on the house page. ---- */
@media (max-width: 759px) {
  html[data-kit] body.pk-obsidian .pk-server-main:has(> .pk-room-head) { display: flex; flex-direction: column; }
  html[data-kit] body.pk-obsidian .pk-server-main:has(> .pk-room-head) > header.pk-house-head { margin: 0 0 12px; gap: 0; }
  html[data-kit] body.pk-obsidian .pk-server-main:has(> .pk-room-head) > header.pk-house-head :is(.pk-house-faces, .pk-server-actions, .pk-server-lede, .pk-server-meta, .pk-club-notice) { display: none; }
  html[data-kit] body.pk-obsidian .pk-server-main:has(> .pk-room-head) > header.pk-house-head h1.pk-house-name { font-size: var(--pk-kit-21); line-height: 1.15; }
  html[data-kit] body.pk-obsidian .pk-server-main:has(> .pk-room-head) > nav.pk-club-tabs { display: none; }
  html[data-kit] body.pk-obsidian .pk-server-main > nav.pk-room-strip { gap: 8px; margin: 0 0 16px; }
  html[data-kit] body.pk-obsidian .pk-server-main > nav.pk-room-strip > .pk-room-strip-item { min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--pk-ink); font-weight: var(--pk-weight-bold); }
  html[data-kit] body.pk-obsidian .pk-server-main > nav.pk-room-strip > .pk-room-strip-item[aria-current]:not([aria-current="false"]) { background: #ffb43f; color: #1a0a10; }
  html[data-kit] body.pk-obsidian .pk-server-main > nav.pk-room-strip > .pk-room-strip-item::after { content: none; }
  html[data-kit] body.pk-obsidian .pk-server-main:has(> .pk-room-head) > section.pk-server-feed { order: 5; display: flex; flex-direction: column; }
  html[data-kit] body.pk-obsidian .pk-server-main:has(> .pk-room-head) > section.pk-server-feed > .pk-house-whispers { order: 2; margin-top: 16px; }
  html[data-kit] body.pk-obsidian .pk-server-main:has(> .pk-room-head) > section.pk-server-feed > .pk-post-feed { order: 1; }
  html[data-kit] body.pk-obsidian .pk-server-main:has(> .pk-room-head) > section.pk-server-feed > :not(.pk-house-whispers, .pk-post-feed) { order: 3; }
  html[data-kit] body.pk-obsidian .pk-server-main > section.pk-room-head { order: 6; margin: 16px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent !important; text-align: center; }
  html[data-kit] body.pk-obsidian .pk-server-main > section.pk-room-head > :not(.pk-room-note) { display: none; }
  html[data-kit] body.pk-obsidian .pk-server-main > section.pk-room-head .pk-room-note { margin: 0; color: var(--pk-faint); font-size: var(--pk-kit-13); }
  html[data-kit] body.pk-obsidian .pk-house-whisper { display: grid; gap: 12px; padding: 14px; border-radius: var(--pk-kit-sheet); background: rgba(255, 255, 255, .06); }
  html[data-kit] body.pk-obsidian .pk-house-whisper-open { width: 100%; min-height: 88px; border: 0; border-radius: var(--pk-kit-sheet); background: rgba(255, 255, 255, .1); color: var(--pk-ink); font-size: var(--pk-kit-13); font-weight: var(--pk-weight-bold); letter-spacing: .08em; text-transform: uppercase; }
}

/* ---- The door's three screens (mock 4.1). No bars of the app around the way in on a phone. 1: the poster in the visitor's
   language (two lines, gold then lavender), the line under it, one field as a pill, Come in on the pill the whole width, the
   way in as one faint line. 2: the question carved, the fields as pills, That's me the whole width. 3: "Your people are here."
   carved, the people as tinted rows (Following the amber chip, Follow a tinted one), CLUBS FOR YOU, Start a Club as the ghost,
   Into Publika on the pill at the foot. ---- */
@media (max-width: 759px) {
  html[data-kit] body.pk-obsidian:has(main.pk-door-screen) .pk-mobile-nav { display: none; }
  html[data-kit] body.pk-obsidian .pk-stage > main.pk-door-screen { display: grid !important; gap: 16px; padding-bottom: 32px; }
  html[data-kit] body.pk-obsidian .pk-stage > main.pk-door-screen > form { gap: 12px; }
  html[data-kit] body.pk-obsidian .pk-stage > main.pk-door-screen .pk-turnstile { min-height: 0; margin: 0; }
  html[data-kit] body.pk-obsidian main.pk-door-screen > h1.pk-poster { margin: 12px 0 10px; font-size: var(--pk-kit-40); line-height: 1.02; }
  html[data-kit] body.pk-obsidian main.pk-door-screen h1.pk-door-carved { margin: 8px 0 4px; color: var(--pk-ink); font-size: var(--pk-kit-40); line-height: 1; letter-spacing: -.03em; font-variation-settings: var(--pk-carved); text-shadow: none; }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-door-lede { margin: 0; color: var(--pk-muted); font-size: var(--pk-kit-17); line-height: 1.35; }
  html[data-kit] body.pk-obsidian main.pk-door-screen :is(form, section, details)[hidden] { display: none !important; }
  html[data-kit] body.pk-obsidian .pk-stage > main.pk-door-screen > form:is(.pk-door-come-in, .pk-door-code, .pk-door-name) { width: 100%; padding: 0; border: 0; border-radius: 0 !important; background: transparent; box-shadow: none; }
  html[data-kit] body.pk-obsidian main.pk-door-screen :is(.pk-door-come-in, .pk-door-code, .pk-door-name) .pk-control:not([type="date"]) { min-height: 52px; padding-inline: 20px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: var(--pk-kit-17); }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-door-name input[type="date"].pk-control { min-height: 52px; border: 0; border-radius: var(--pk-kit-sheet); background: rgba(255, 255, 255, .1); }
  html[data-kit] body.pk-obsidian main.pk-door-screen :is(.pk-door-come-in, .pk-door-code, .pk-door-name, .pk-door-onward) .fs-button--primary { width: 100%; min-height: 52px; justify-content: center; font-size: var(--pk-kit-17); }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-founder { order: 9; display: block; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-founder > :not(.pk-founder-words) { display: none; }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-founder-words { margin: 0; color: var(--pk-faint); font-size: var(--pk-kit-13); }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-founder-words :is(strong, span, small) { color: inherit; font-size: inherit; font-weight: inherit; background: none; padding: 0; }
  html[data-kit] body.pk-obsidian main.pk-door-screen :is(.pk-door-people > li, .pk-door-person, .pk-door-club) { padding: 10px 12px; border: 0; border-radius: var(--pk-kit-sheet); background: rgba(255, 255, 255, .06); }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-door-people { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-door-follow { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--pk-ink); }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-door-join { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--pk-ink); }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-door-following { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #ffb43f; color: #1a0a10; font-size: var(--pk-kit-15); font-weight: var(--pk-weight-bold); }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-door-clubs { padding: 0; border: 0; background: transparent; }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-door-clubs > h2 { margin: 8px 0 10px; color: #ffb43f; font-size: var(--pk-kit-13); font-weight: var(--pk-weight-bold); letter-spacing: .14em; text-transform: uppercase; }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-door-start-club { padding: 0; border: 0; background: transparent; }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-door-start-club > summary { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--pk-line-strong); border-radius: 999px; color: var(--pk-ink); font-weight: var(--pk-weight-bold); list-style: none; }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-door-start-club > summary::-webkit-details-marker { display: none; }
  html[data-kit] body.pk-obsidian main.pk-door-screen .pk-door-passkey-offer { order: 20; padding: 0; border: 0; background: transparent; }
}

/* ---- The bar signed out (mocks 4.1, 5.2): the carved mark at the left, Search, and Sign in as a chip, never the two-line amber
   block over the mark. ---- */
@media (max-width: 759px) {
  html[data-kit] body.pk-obsidian .pk-top:has(> .pk-join-menu, > .pk-header-inbox) > .pk-wordmark { margin: 0 auto 0 16px; right: auto; width: max-content; }
  html[data-kit] body.pk-obsidian .pk-top .pk-join-menu > summary { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--pk-ink); box-shadow: none; }
  html[data-kit] body.pk-obsidian .pk-top .pk-join-menu > summary > svg, html[data-kit] body.pk-obsidian .pk-top .pk-join-menu > summary .pk-join-label > strong { display: none; }
  html[data-kit] body.pk-obsidian .pk-top .pk-join-menu > summary .pk-join-label > span { color: var(--pk-ink); font-size: var(--pk-kit-15); font-weight: var(--pk-weight-bold); }
}

/* ---- A terms update (Julien, 14 October 2026): never a strip; once, as the quiet toast with its two links, six seconds. ---- */
html[data-kit] body.pk-obsidian aside.pk-terms-notice.is-toast {
  position: fixed; left: 20px; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 4px;
  max-width: 520px; margin: 0 auto; padding: 6px 4px 6px 16px; border: 0; border-radius: var(--pk-kit-sheet); background: #15101d; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
html[data-kit] body.pk-obsidian aside.pk-terms-notice.is-toast .pk-terms-copy, html[data-kit] body.pk-obsidian aside.pk-terms-notice.is-toast .pk-terms-copy a { font-size: var(--pk-kit-13); line-height: 1.35; }
html[data-kit] body.pk-obsidian aside.pk-terms-notice:not(.is-toast) { display: none; }

/* ---- The phone's gutter (Julien, 14 October 2026): 20 px wherever the mocks inset content (the Stream, Today, a Frame's head, a
   Club, the thread, a post's page and its comments). --pk-kit-gutter; the lint holds every word on these screens inside it. ---- */
@media (max-width: 759px) {
  html[data-kit] body.pk-obsidian .pk-stage > main.pk-home { padding-inline: var(--pk-kit-gutter) !important; }
  html[data-kit] body.pk-obsidian .pk-stage > main.pk-today { width: 100%; margin-inline: 0 !important; padding-inline: var(--pk-kit-gutter) !important; }
  html[data-kit] body.pk-obsidian .pk-stage > main.pk-profile > .pk-creator-frame { padding-inline: var(--pk-kit-gutter) !important; }
  html[data-kit] body.pk-obsidian .pk-stage > main:is(.pk-server, .pk-servers) { width: 100%; margin-inline: 0 !important; padding-inline: var(--pk-kit-gutter) !important; }
  html[data-kit] body.pk-obsidian .pk-stage > main.pk-post-page { padding-inline: var(--pk-kit-gutter) !important; }
  html[data-kit] body.pk-obsidian .pk-stage > main.pk-post-page > .pk-detail-bar { margin-inline: calc(-1 * var(--pk-kit-gutter)); padding-inline: var(--pk-kit-gutter); }
  html[data-kit] body.pk-obsidian .pk-message-layout :is(.pk-message-scroll, .pk-message-inbox) { padding-inline: var(--pk-kit-gutter) !important; }
  html[data-kit] body.pk-obsidian .pk-message-layout form.pk-message-reply { padding-inline: var(--pk-kit-gutter); }
  html[data-kit] body.pk-obsidian .pk-message-layout .pk-message-thread-head { padding-inline: 8px var(--pk-kit-gutter); }
  /* A post's comments: the rows, their ⋯ and "Add a comment…" inside the gutter, four more px of rhythm between rows. */
  html[data-kit] body.pk-obsidian .pk-post-page :is(.pk-comments, .pk-replies, .pk-reply-list) { padding-inline: 0; }
  html[data-kit] body.pk-obsidian .pk-post-page :is(.pk-comment, .pk-reply) { padding-block: 6px; }
}

/* ---- The ghost is a bare bold word (Julien, 14 October 2026): a second action has no outline, no pill and no fill, only the
   word and its 44 px to tap. The satin pill stays for the one primary action of a screen. The lint finds no outlined button. ---- */
html[data-kit] body.pk-obsidian :is(main, dialog, .pk-pf, .pk-sheet-panel, .pk-dialog) :is(a, button, summary).fs-button:not(.has-stroke):not([aria-pressed="true"]),
html[data-kit] body.pk-obsidian :is(main, dialog, .pk-pf, .pk-sheet-panel, .pk-dialog) :is(.fs-button.fs-button--primary, .pk-submit, .pk-message-new, .pk-message-new-button, .pk-stream-new, .pk-invite-channel--share, .pk-daily-cta):not(.has-stroke),
html[data-kit] body.pk-obsidian :is(.pk-chat-call, .pk-message-call, .pk-top .pk-create-action, .pk-free-toggle[aria-pressed="true"], .pk-door-start-club > summary):not(.has-stroke) {
  min-height: 44px; border: 0 !important; outline-offset: 2px; background: transparent !important; background-image: none !important; box-shadow: none !important;
  color: var(--pk-ink); font-weight: var(--pk-weight-bold); text-shadow: none;
}
html[data-kit] body.pk-obsidian main .pk-fbtn:not(.has-stroke):not([aria-pressed="true"]):not([data-follow-requested="1"]) { --fb-border: 0; --fb-bg: transparent; }

/* ---- Polaroid rows (Today's Same Time, the front's shots): a horizontal strip with the gutter as its padding, room above and
   below for the tilt and the shadow, each at most 44% of the content width, the tilt alternating. ---- */
@media (max-width: 759px) {
  html[data-kit] body.pk-obsidian :is(.pk-today-st-shots, .pk-front-shotwall) {
    display: flex; gap: 14px; margin: 0 calc(-1 * var(--pk-kit-gutter)); padding: 14px var(--pk-kit-gutter) 26px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-padding-inline: var(--pk-kit-gutter); scroll-snap-type: x proximity; list-style: none; scrollbar-width: none;
  }
  html[data-kit] body.pk-obsidian :is(.pk-today-st-shots, .pk-front-shotwall) > li { flex: 0 0 calc((100vw - 2 * var(--pk-kit-gutter)) * .44); max-width: calc((100vw - 2 * var(--pk-kit-gutter)) * .44); scroll-snap-align: start; }
  html[data-kit] body.pk-obsidian :is(.pk-today-st-shots, .pk-front-shotwall) > li:nth-child(odd) > .pk-polaroid, html[data-kit] body.pk-obsidian .pk-front-shotwall > li.pk-polaroid:nth-child(odd) { transform: rotate(-3deg); }
  html[data-kit] body.pk-obsidian :is(.pk-today-st-shots, .pk-front-shotwall) > li:nth-child(even) > .pk-polaroid, html[data-kit] body.pk-obsidian .pk-front-shotwall > li.pk-polaroid:nth-child(even) { transform: rotate(2.5deg); }
}
/* A polaroid's caption lives on its cream band (about a fifth of its height): the small painted face and the name in the dark
   ink, one line, never over the photo; the photo square above it. */
html[data-kit] body.pk-obsidian :is(.pk-today-st-shot, .pk-front-shot).pk-polaroid { display: flex; flex-direction: column; width: 100%; aspect-ratio: auto; overflow: hidden; padding: 6px 6px 0; border: 0; background: #f7f1e9; }
html[data-kit] body.pk-obsidian :is(.pk-today-st-shot, .pk-front-shot).pk-polaroid > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0; }
html[data-kit] body.pk-obsidian .pk-today-st-shot.pk-polaroid > .pk-today-st-by, html[data-kit] body.pk-obsidian .pk-front-shot.pk-polaroid > span {
  position: static; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 34px; padding: 6px 2px 8px; background: none; color: #1a0a10;
  font-size: var(--pk-kit-13); font-weight: var(--pk-weight-semibold, 600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-kit] body.pk-obsidian .pk-today-st-shot.pk-polaroid .pk-today-st-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #1a0a10; text-shadow: none; }
/* The people row on the Stream: its strip scrolls inside the gutter; "See all" stays inside it. */
@media (max-width: 759px) {
  html[data-kit] body.pk-obsidian .pk-home section.pk-connect { margin-inline: calc(-1 * var(--pk-kit-gutter)); }
  html[data-kit] body.pk-obsidian .pk-home section.pk-connect > * { padding-inline: var(--pk-kit-gutter); scroll-padding-inline: var(--pk-kit-gutter); scrollbar-width: none; }
  html[data-kit] body.pk-obsidian .pk-home section.pk-connect .pk-connect-all { margin-right: 0; }
}
html[data-kit] body.pk-obsidian .pk-photo-why .pk-screening-mark > svg { display: none; }

/* A glyph a worded action dropped stays dropped, whatever display a sheet gives it. */
html[data-kit] body :is(svg, img)[hidden] { display: none !important; }

/* ---- Directories (Clubs, Creators) and people cards (Julien, 14 October 2026): every tile the same at 4:5 with the Kit's 26
   corners and the painted edge (paint-stroke.js), the gutter the screen's (20) and 12 between, a row's tiles of one height, the
   mark or the portrait in a fixed square at the top (64), the name on two lines at most with the ellipsis only at the end, the
   action at the foot as a bare bold word with its 44 px. ---- */
@media (max-width: 759px) {
  html[data-kit] body.pk-obsidian main:has(> :is(.pk-cx-general, .pk-cx-head)) { padding-inline: var(--pk-kit-gutter) !important; margin-inline: 0 !important; width: 100%; }
}
html[data-kit] body.pk-obsidian .pk-cx-grid { gap: 12px !important; align-items: stretch; grid-auto-rows: 1fr; }
html[data-kit] body.pk-obsidian .pk-cx-grid > .pk-cx-card { aspect-ratio: 4 / 5; min-height: 0; height: 100%; border: 0; border-radius: var(--pk-kit-pane) !important; box-shadow: none; overflow: hidden; }
html[data-kit] body.pk-obsidian .pk-cx-grid > .pk-cl-card { display: flex; flex-direction: column; padding: 12px; }
html[data-kit] body.pk-obsidian .pk-cx-grid > .pk-cl-card .pk-cx-media { position: static; flex: none; width: 64px; height: 64px; margin: 0 0 10px; }
html[data-kit] body.pk-obsidian .pk-cx-grid > .pk-cl-card .pk-cx-media :is(img, picture, .pk-cx-fallback, .pk-cinemaos-mark) { width: 64px; height: 64px; max-width: 64px; }
html[data-kit] body.pk-obsidian .pk-cx-grid > .pk-cl-card .pk-cx-body { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 0; }
html[data-kit] body.pk-obsidian .pk-cx-grid > .pk-cx-card .pk-cx-name { height: auto; max-height: none; }
html[data-kit] body.pk-obsidian .pk-cx-grid > .pk-cx-card .pk-cx-name > a, html[data-kit] body.pk-obsidian .pk-cx-grid > .pk-cx-card .pk-cx-name:not(:has(> a)) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; }
html[data-kit] body.pk-obsidian .pk-cx-grid > .pk-cx-card .pk-cl-others { white-space: nowrap; overflow: visible; text-overflow: clip; }
html[data-kit] body.pk-obsidian .pk-cx-grid > .pk-cx-card .pk-cx-actions { margin-top: auto; }
html[data-kit] body.pk-obsidian :is(.pk-cx-card, .pk-cx-star, .pk-connect, .pk-front-faces, .pk-door-people) .pk-fbtn,
html[data-kit] body.pk-obsidian :is(.pk-cx-card, .pk-cx-star, .pk-connect, .pk-front-faces, .pk-door-people) .pk-fbtn[aria-pressed="true"] {
  --fb-bg: transparent; --fb-blend: normal; --fb-fg: var(--pk-ink); --fb-border: 0; --fb-shadow: none;
  min-height: 44px; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--pk-ink) !important; font-weight: var(--pk-weight-bold);
}
html[data-kit] body.pk-obsidian :is(.pk-cx-card, .pk-cx-star) .pk-fbtn :is(svg, .pk-icon) { display: none; }
html[data-kit] body.pk-obsidian .pk-cx-card :is(.pk-cx-chip, [class*="-badge"]) { border: 0 !important; }

/* ---- The front signed out (mock 5.2): the poster, the polaroids, the faces, the door with Come in on the pill, the founder words
   as one faint line, Privacy and Terms at the very foot. In the gutter, no panes. ---- */
@media (max-width: 759px) {
  html[data-kit] body.pk-obsidian .pk-stage > main.pk-front { display: flex; flex-direction: column; gap: 20px; width: 100%; margin: 0 !important; padding-inline: var(--pk-kit-gutter) !important; }
  html[data-kit] body.pk-obsidian main.pk-front > .pk-front-moments { display: contents; }
  html[data-kit] body.pk-obsidian main.pk-front > .pk-front-head { order: 1; display: grid; gap: 10px; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-front-shots { order: 2; }
  html[data-kit] body.pk-obsidian main.pk-front > .pk-front-faces { order: 3; }
  html[data-kit] body.pk-obsidian main.pk-front :is(.pk-front-frames, .pk-front-tonight) { order: 4; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-front-door { order: 5; display: grid; gap: 10px; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-front-door .pk-front-come-in { width: 100%; justify-content: center; min-height: 52px; }
  html[data-kit] body.pk-obsidian main.pk-front > .pk-front-posts { order: 6; }
  html[data-kit] body.pk-obsidian main.pk-front > .pk-front-head > .pk-poster { margin: 8px 0 0; font-size: var(--pk-kit-40); line-height: 1.02; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-founder { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-founder > :not(.pk-founder-words) { display: none; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-founder-words { margin: 0; color: var(--pk-faint); font-size: var(--pk-kit-13); }
  html[data-kit] body.pk-obsidian main.pk-front .pk-founder-words :is(strong, span, small) { color: inherit; font-size: inherit; font-weight: inherit; background: none; padding: 0; }
  html[data-kit] body.pk-obsidian main.pk-front :is(.pk-front-moment, .pk-front-faces, .pk-front-posts) > h2 { margin: 0 0 8px; color: var(--pk-faint); font-size: var(--pk-kit-13); font-weight: var(--pk-weight-medium, 500); letter-spacing: 0; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-front-facelist { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-front-face { display: grid; justify-items: center; gap: 4px; width: 72px; padding: 0; background: none; clip-path: none !important; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-front-face :is(svg, img, .pk-pt) { width: 56px; height: 56px; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-front-face small { display: none; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-front-face strong { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pk-kit-13); }
  html[data-kit] body.pk-obsidian footer.pk-foot--quiet { display: flex; justify-content: center; gap: 16px; padding: 16px var(--pk-kit-gutter) calc(100px + env(safe-area-inset-bottom, 0px)); border: 0; background: transparent; }
  html[data-kit] body.pk-obsidian footer.pk-foot--quiet a { color: var(--pk-faint); font-size: var(--pk-kit-13); }
  html[data-kit] body.pk-obsidian main.pk-front > .pk-front-faces { display: block; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-front-facelist > li { flex: none; padding: 0; border: 0; background: none; }
  html[data-kit] body.pk-obsidian main.pk-front .pk-front-face { border: 0; border-radius: 0; box-shadow: none; }
}
/* Settings, About Publika: the hub's last group, plain links in a list, no boxes. */
html[data-kit] body.pk-obsidian .pk-settings-hub .pk-settings-about { margin-top: 28px; }
html[data-kit] body.pk-obsidian .pk-settings-hub .pk-settings-about-links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
html[data-kit] body.pk-obsidian .pk-settings-hub .pk-settings-about-links > li { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html[data-kit] body.pk-obsidian .pk-settings-hub .pk-settings-about-links a { color: var(--pk-ink); }
html[data-kit] body.pk-obsidian .pk-settings-hub .pk-settings-about-links small { color: var(--pk-faint); font-size: var(--pk-kit-13); }

/* ---- A post's own page (Julien, 14 October 2026): the Stream's post, not a detail pane. The post in the 20 px gutter, on the
   ground; a picture with its author row inside it on a soft veil and the rail standing in its own column on the right; a words
   post with its row above its words and the same rail; the credits, the moderation and the comments under it. ---- */
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-post.pk-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) 48px; column-gap: 4px; row-gap: 12px; align-items: start;
  padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail > * { grid-column: 1 / -1; min-width: 0; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail > .pk-post-head { grid-column: 1; grid-row: 1; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail h1.pk-post-author-name { font-size: var(--pk-kit-17); line-height: 1.2; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail .pk-post-author-avatar, html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail .pk-post-author-avatar img { width: 36px; height: 36px; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail > .pk-post-media { grid-column: 1; grid-row: 2; border-radius: var(--pk-kit-sheet); overflow: hidden; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail > .pk-post-media .pk-media { width: 100%; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail > :is(.pk-post-body, .pk-post-text, .pk-post-card-text) { grid-column: 1; grid-row: 2; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail > .pk-detail-actions { grid-column: 2; grid-row: 2; align-self: end; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail > .pk-detail-actions .pk-engage-remind { width: 44px; height: 44px; min-width: 44px; margin: 4px 0; padding: 0; border-radius: 50%; overflow: hidden; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail > .pk-detail-actions .pk-engage-status { display: none; }
/* With a picture, the author row sits inside it at the top, on a soft veil; the marks under it. */
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail:has(> .pk-post-media) > :is(.pk-post-head, .pk-post-media, .pk-detail-actions) { grid-row: 1; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail:has(> .pk-post-media) > .pk-post-head {
  grid-row: 1; z-index: 2; align-self: start; padding: 10px 6px 14px 12px; border-radius: var(--pk-kit-sheet) var(--pk-kit-sheet) 0 0; background: rgba(8, 5, 12, .42);
}
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail:has(> .pk-post-media) > .pk-post-head :is(.pk-post-author-name, .pk-post-author-name a, .pk-post-author-meta > *) { color: #fff8f0; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail:has(> .pk-post-media) > .pk-post-marks { grid-row: 2; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail .pk-post-marks :is(.pk-screening-mark, .pk-intent, .pk-post-reason) { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--pk-muted); font-size: var(--pk-kit-13); font-weight: var(--pk-weight-medium, 500); }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail .pk-post-marks .pk-screening-mark > svg { display: none; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail > .pk-credit-ribbon { padding: 10px 0; border: 0; border-radius: 0; background: transparent; }
/* The comments: inside the gutter, four more px of rhythm, the ⋯ clear of the next row's name. */
html[data-kit] body.pk-obsidian main.pk-post-page :is(.pk-reply, .pk-comment, .pk-replies > li, .pk-reply-list > li) { padding-block: 10px; }
html[data-kit] body.pk-obsidian main.pk-post-page :is(.pk-reply, .pk-comment) :is(.pk-post-more, .pk-reply-more) { margin-right: 0; }

/* ---- The Viewer: a words card is calm words on the dark, the actions a column on the right. ---- */
html[data-kit] body .pk-viewer .pk-viewer-textcard { background: transparent; box-shadow: none; }
@media (max-width: 759px) {
  html[data-kit] body .pk-viewer .pk-viewer-slide:not(.pk-viewer-slide--text) .pk-viewer-info { padding-right: 72px; }
  html[data-kit] body .pk-viewer .pk-viewer-slide:not(.pk-viewer-slide--text) .pk-viewer-info .pk-viewer-actions { position: absolute; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); flex-direction: column; flex-wrap: nowrap; margin: 0; }
}
/* A words post on its page: the Stream's calm field, not the saturated block. */
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail .pk-words-panel {
  position: relative; isolation: isolate; padding: 16px; border-radius: var(--pk-kit-pane) !important; overflow: visible;
  background: color-mix(in srgb, var(--words-ground, #ff4b3a) 24%, transparent) !important; color: var(--pk-ink);
}
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail .pk-words-panel.has-field { background: transparent !important; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail .pk-words-panel > .pk-wash { display: none; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail .pk-words-panel > canvas.pk-field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail .pk-words-panel :is(p, a, span, .pk-words-text) { color: var(--pk-ink); font-size: var(--pk-kit-21); font-weight: var(--pk-weight-semibold, 600); }
html[data-kit] body.pk-obsidian main.pk-post-page :is(.pk-comments, section.pk-post-comments, .pk-discussion) { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding-inline: 0; }
html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail > .pk-detail-actions .pk-engage-remind, html[data-kit] body.pk-obsidian main.pk-post-page > article.pk-detail > .pk-detail-actions .pk-engage-remind > .pk-wash { border-radius: 50% !important; }

/* ---- The Stream's Clubs row and the directory's "Rooms your people are in" / "Through your people" strips (Julien, 14 October
   2026): the directory's tile, not planets on orbits. A horizontal strip inside the gutter of equal 4:5 tiles (44% of the
   width), each a tint with the Kit's 26 corners and the painted edge, the mark in a 64 px square, the name on two lines, the
   reason, the action at the foot as a bare word. ---- */
html[data-kit] body.pk-obsidian :is(.pk-connect--clubs, .pk-cx-people) :is(.pk-connect-art, .pk-connect-aura, .pk-cx-orbits, .pk-cx-orb, .pk-cx-grain) { display: none !important; }
html[data-kit] body.pk-obsidian .pk-connect--clubs .pk-connect-track, html[data-kit] body.pk-obsidian .pk-cx-people .pk-cx-page {
  display: flex !important; gap: 12px; margin: 0; padding: 4px 0 8px; overflow-x: auto; list-style: none; scrollbar-width: none; scroll-snap-type: x proximity;
}
html[data-kit] body.pk-obsidian .pk-cx-people .pk-cx-sky { position: static; height: auto; min-height: 0; padding: 0; }
html[data-kit] body.pk-obsidian .pk-connect--clubs :is(.pk-connect-cluster, .pk-connect-people) { display: contents !important; }
html[data-kit] body.pk-obsidian .pk-connect--clubs .pk-connect-card, html[data-kit] body.pk-obsidian .pk-cx-people .pk-cx-star {
  position: relative !important; inset: auto !important; transform: none !important; flex: 0 0 calc((100vw - 2 * var(--pk-kit-gutter) - 12px) * .46); max-width: 220px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; aspect-ratio: 4 / 5; height: auto; margin: 0 !important; padding: 12px;
  border-radius: var(--pk-kit-pane); background: rgba(255, 255, 255, .07); scroll-snap-align: start; text-align: left; opacity: 1 !important; animation: none !important;
}
html[data-kit] body.pk-obsidian .pk-connect--clubs .pk-connect-figure, html[data-kit] body.pk-obsidian .pk-connect--clubs .pk-connect-face,
html[data-kit] body.pk-obsidian .pk-connect--clubs .pk-connect-photo, html[data-kit] body.pk-obsidian .pk-cx-people .pk-cx-star-photo { position: static !important; width: 64px !important; height: 64px !important; margin: 0 !important; transform: none !important; }
html[data-kit] body.pk-obsidian .pk-cx-people .pk-cx-star-link { display: grid; justify-items: start; gap: 8px; }
html[data-kit] body.pk-obsidian .pk-connect--clubs .pk-connect-photo :is(.pk-pt, svg, img), html[data-kit] body.pk-obsidian .pk-cx-people .pk-cx-star-photo :is(img, .pk-cx-fallback, svg) { width: 64px !important; height: 64px !important; }
html[data-kit] body.pk-obsidian .pk-connect--clubs .pk-connect-meta { position: static; display: flex; flex: 1; flex-direction: column; gap: 4px; width: 100%; max-width: none; text-align: left; }
html[data-kit] body.pk-obsidian :is(.pk-connect--clubs .pk-connect-name, .pk-cx-people .pk-cx-star-name) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; max-width: none; font-size: var(--pk-kit-15); font-weight: var(--pk-weight-bold); line-height: 1.25; text-align: left; }
html[data-kit] body.pk-obsidian .pk-connect--clubs .pk-connect-reason { color: var(--pk-muted); font-size: var(--pk-kit-13); }
html[data-kit] body.pk-obsidian .pk-connect--clubs .pk-connect-action, html[data-kit] body.pk-obsidian .pk-cx-people .pk-cx-actions { margin-top: auto; }
html[data-kit] body.pk-obsidian .pk-connect--clubs :is(.pk-connect-follow, .pk-connect-join) { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--pk-ink); font-weight: var(--pk-weight-bold); box-shadow: none; }
html[data-kit] body.pk-obsidian .pk-connect--clubs .pk-connect-x { position: absolute; top: 4px; right: 4px; }

/* A creator card without a craft carries no chip. */
html[data-kit] body.pk-obsidian .pk-cx-card .pk-cx-chip:not(.pk-cx-chip--know):not(.pk-cx-chip--recent) { display: none; }
html[data-kit] body.pk-obsidian :is(.pk-connect--clubs .pk-connect-figure, .pk-cx-people .pk-cx-star-photo) { overflow: hidden; border-radius: 50%; flex: none; }
html[data-kit] body.pk-obsidian :is(.pk-connect--clubs .pk-connect-figure, .pk-cx-people .pk-cx-star-photo) * { max-width: 64px !important; max-height: 64px !important; inset: auto !important; transform: none !important; }
html[data-kit] body.pk-obsidian .pk-connect--clubs :is(.pk-connect-follow, .pk-connect-join, .pk-connect-start)::before, html[data-kit] body.pk-obsidian .pk-connect--clubs :is(.pk-connect-follow, .pk-connect-join, .pk-connect-start)::after { content: none !important; }
html[data-kit] body.pk-obsidian .pk-connect--clubs :is(.pk-connect-follow, .pk-connect-join, .pk-connect-start, .pk-connect-action a, .pk-connect-action button) { border: 0 !important; outline: 0; box-shadow: none !important; background: transparent !important; }

/* ---- The welcome (mock 6.1): a centred sheet over the Stream, once, after a name is taken. ---- */
html[data-kit] body.pk-obsidian dialog.pk-home-welcome[open] {
  position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 32px var(--pk-kit-gutter); overflow: hidden;
  border: 0; border-radius: 0; background: #0b0712; color: var(--pk-ink); text-align: center;
}
html[data-kit] body.pk-obsidian dialog.pk-home-welcome .pk-welcome-mark { margin: 0; font-size: var(--pk-kit-17); font-weight: var(--pk-weight-bold); font-variation-settings: var(--pk-carved); }
html[data-kit] body.pk-obsidian dialog.pk-home-welcome .pk-poster { margin: 0; font-size: var(--pk-kit-40); line-height: 1.02; text-align: center; }
html[data-kit] body.pk-obsidian dialog.pk-home-welcome .pk-welcome-lines { margin: 0; max-width: 18em; color: var(--pk-muted); font-size: var(--pk-kit-17); line-height: 1.35; }
html[data-kit] body.pk-obsidian dialog.pk-home-welcome form { margin: 6px 0 0; padding: 0; border: 0; background: none; }
html[data-kit] body.pk-obsidian dialog.pk-home-welcome form .pk-kit-pill { min-width: 180px; min-height: 52px; padding: 0 28px; font-size: var(--pk-kit-17); }
html[data-kit] body.pk-obsidian dialog.pk-home-welcome .pk-welcome-sticker { position: absolute; width: 44px; height: 44px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
html[data-kit] body.pk-obsidian dialog.pk-home-welcome .pk-welcome-sticker--a { left: 9%; top: 16%; transform: rotate(-12deg); }
html[data-kit] body.pk-obsidian dialog.pk-home-welcome .pk-welcome-sticker--b { right: 9%; top: 26%; transform: rotate(12deg); }
html[data-kit] body.pk-obsidian dialog.pk-home-welcome .pk-welcome-shot { position: absolute; left: -12px; bottom: 15%; width: 112px; transform: rotate(-14deg); }
html[data-kit] body.pk-obsidian dialog.pk-home-welcome .pk-welcome-shot > * { display: block; width: 100%; height: auto; aspect-ratio: 1; }
html[data-kit] body.pk-obsidian dialog.pk-home-welcome .pk-welcome-shot :is(svg, img) { width: 100%; height: 100%; border-radius: 0; }