/*
 * Finish: the last sheet of the looks. Components that must read the same in Paint, Matinee and Glass, written once
 * against the shared tokens, after paint.css (so a tie in specificity goes to this sheet). Spacing is the 4 / 8 / 12 / 16 / 24
 * scale, radii are 26 / 18 / 12 (a capsule is 999), icons 20 / 24, a touch target is never under 44. Hover is one subtle
 * brightness shift on buttons, only where a pointer can hover (see "hover" at the foot of this sheet).
 */

:root {
  --fin-1: 4px; --fin-2: 8px; --fin-3: 12px; --fin-4: 16px; --fin-5: 24px;
  --fin-r-lg: 26px; --fin-r-md: 18px; --fin-r-sm: 12px;
  /* The pane tint: one surface for every block of words and every capsule. */
  --fin-pane: var(--paint-pane, var(--pk-surface, #121315));
  --fin-well: color-mix(in srgb, var(--pk-ink, #fff) 8%, transparent);
  /* The one quiet divider: 8% of the ink, so it reads on the dark panes and on the paper alike. */
  --fin-rule: color-mix(in srgb, var(--pk-ink, #fff) 8%, transparent);
  /* The one focus ring is the shared token pair (--pk-focus-width, --pk-focus: pk-tokens.css owns them); it follows the radius of what it surrounds. */
  --fin-ring-offset: 2px;
}

/* ---------------------------------------------------------------- F1 Home: the terms notice and the For You / Following pane are two panes, a gap apart */
html body.pk-obsidian .pk-terms-notice { margin-bottom: var(--fin-3); padding: var(--fin-3) var(--fin-2) var(--fin-3) var(--fin-5); gap: var(--fin-2); }
/* The Stream's tab pane: a capsule, the tabs centred on it, the refresh a labelled 44px control at its right end. */
html body.pk-obsidian .pk-home-top {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; justify-items: center;
  gap: var(--fin-2); margin: 0 0 var(--fin-3); padding: var(--fin-2); min-height: 60px;
  border-radius: var(--fin-r-lg);
  /* it sticks under the header while the Stream scrolls past: opaque, so no word shows through it */
  background: linear-gradient(var(--fin-pane), var(--fin-pane)), var(--paint-night, #0b0810);
}
html body.pk-obsidian .pk-home-top .pk-feed-toggle { grid-column: 2; justify-content: center; gap: var(--fin-2); }
html body.pk-obsidian .pk-home-top .pk-feed-toggle a { justify-content: center; padding: 0 var(--fin-3); min-height: 44px; align-items: center; }
html body.pk-obsidian .pk-home-top .pk-stream-refresh { grid-column: 3; margin: 0; width: 44px; height: 44px; padding: 0; border-radius: 50%; place-items: center; }

/* ---------------------------------------------------------------- F2 the compose capsule: avatar, field and Dial sit INSIDE it, 8px all round, the ends concentric */
html body.pk-obsidian .pk-compose:not(.is-open) { background: var(--fin-pane); }
html body.pk-obsidian .pk-compose { border-radius: 999px; margin: 0 0 var(--fin-3); }
html body.pk-obsidian .pk-compose:not(.is-open) .pk-compose-row {
  display: flex; align-items: center; gap: var(--fin-2); padding: var(--fin-2); min-height: 60px;
}
html body.pk-obsidian .pk-compose-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; }
html body.pk-obsidian .pk-compose-avatar .pk-avatar { width: 44px; height: 44px; }
html body.pk-obsidian .pk-compose .pk-compose-prompt {
  flex: 1 1 auto; min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 0 var(--fin-4); border: 0; border-radius: 999px;
  background: var(--fin-well); text-overflow: ellipsis;
}
html body.pk-obsidian .pk-compose .pk-compose-media,
html body.pk-obsidian .pk-compose .pk-compose-dial { flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border-radius: 50%; }
html body.pk-obsidian .pk-compose .pk-compose-media { background: none; }

/* ---------------------------------------------------------------- F3 the Messages composer: one line, every part centred, nothing clipped */
html body.pk-obsidian .pk-message-field { align-items: center; min-height: 60px; padding: var(--fin-2); gap: var(--fin-2); border-radius: 999px; }
html body.pk-obsidian .pk-message-field textarea {
  flex: 1 1 auto; align-self: center; min-width: 0; min-height: 44px; height: 44px; max-height: 120px; margin: 0; padding: 11px 4px; line-height: 22px; resize: none; overflow-y: auto;
}
html body.pk-obsidian .pk-message-field textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.pk-obsidian .pk-message-field .pk-message-tool { flex: none; width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
html body.pk-obsidian .pk-message-field .pk-message-send { flex: none; align-self: center; height: 44px; min-height: 44px; margin: 0; padding: 0 var(--fin-4); }
html body.pk-obsidian .pk-message-field .pk-message-field-divider { display: none; }

/* ---------------------------------------------------------------- F16 the "..." menus: top layer (menu-pop.js), never clipped, every row 44px */
html body.pk-obsidian details[data-menu] > [popover]:popover-open {
  position: fixed; inset: auto; top: var(--pk-pop-y, 12px); left: var(--pk-pop-x, 12px); right: auto; bottom: auto; z-index: auto;
  /* height: auto, not the top layer's fit-content: WebKit resolved that to the max-height and this grid stretched its rows across it (the Join sheet, 6 October 2026). */
  display: grid; gap: var(--fin-1); width: var(--pk-pop-w, 240px); height: auto; min-width: 0; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: 0; padding: var(--fin-2);
  overflow-y: auto; border: 0; border-radius: var(--fin-r-md); background: linear-gradient(var(--paint-sheet, #14101c), var(--paint-sheet, #14101c)), var(--paint-night, #0b0810); color: var(--pk-ink);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5); transform: none; animation: none;
}
html body.pk-obsidian details[data-menu] > [popover]:popover-open :is(a, button) {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 44px; margin: 0; padding: 0 var(--fin-3);
  border: 0; border-radius: var(--fin-r-sm); background: transparent; color: var(--pk-ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
html body.pk-obsidian details[data-menu] > [popover].is-sheet::backdrop { background: rgba(5, 3, 10, .55); }
@media (max-width: 759px) {
  html body.pk-obsidian details[data-menu] > [popover].is-sheet:popover-open {
    top: auto; left: var(--fin-2); right: var(--fin-2); bottom: calc(var(--fin-2) + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; max-height: 70dvh; border-radius: var(--fin-r-lg);
  }
}
/* The trigger is a round button: its focus ring follows it. */
html body.pk-obsidian :is(.pk-creator-more, .pk-post-more, .pk-message-more, .pk-contact-menu, .pk-profile-post-options) > summary { border-radius: 50%; }

/* ---------------------------------------------------------------- F9 one focus ring: the shared width and colour tokens, it follows the radius of the thing it surrounds */
html body.pk-obsidian :is(a, button, summary, [tabindex]):focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: var(--fin-ring-offset); box-shadow: none; }
/* A field's ring sits on its own edge (no second line beside the border) */
html body.pk-obsidian :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea, select):is(:focus, :focus-visible) { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: -2px; border-color: transparent; box-shadow: none; }
html body.pk-obsidian :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea)::placeholder { color: var(--pk-muted); opacity: 1; }
/* The Messages search field keeps its own 1px border through an id selector: on focus the ring replaces it, never both (one ring, not a double line). */
html body.pk-obsidian #main .pk-message-inbox .pk-message-search input[type="search"]:is(:focus, :focus-visible) { border-color: transparent; }
/* Fields and the capsule's own field: a borderless well. */
html body.pk-obsidian .pk-compose .pk-compose-prompt { border: 0 !important; border-radius: 999px !important; background: var(--fin-well) !important; }
html body.pk-obsidian .pk-compose .pk-compose-prompt:focus { outline-offset: -2px; }

/* ---------------------------------------------------------------- F10 selects read like the other fields: a well, a radius, a chevron, a ring that follows the radius */
html body.pk-obsidian :is(select.pk-control, .pk-stage select, .pk-composer select, .pk-modal select) {
  -webkit-appearance: none; appearance: none; min-height: 44px; padding: 0 40px 0 var(--fin-4); border: 1px solid var(--pk-line-strong); border-radius: var(--fin-r-sm);
  background-color: var(--fin-well); color: var(--pk-ink); font: inherit; font-size: 15px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

/* The full-screen composer's own "Share with" select was an underline on nothing; it is the same field as every other select. */
html body.pk-obsidian .pk-composer-takeover .pk-composer-address > .pk-field > select.pk-control {
  min-height: 52px; padding: 0 40px 0 var(--fin-4); border: 1px solid var(--pk-line-strong); border-radius: var(--fin-r-sm); color: var(--pk-ink); font-size: 17px;
  background-color: var(--fin-well); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

/* ---------------------------------------------------------------- dialogs: one panel, Cancel a plain text button (F29), Save is the one filled action */
html body.pk-obsidian :is(.pk-alt-dialog, .pk-cover-dialog) { border: 0; border-radius: var(--fin-r-lg); padding: var(--fin-5); background: var(--paint-sheet, #14101c); }
html body.pk-obsidian :is(.pk-alt-dialog, .pk-cover-dialog) button {
  min-height: 44px; margin: 0 var(--fin-2) 0 0; padding: 0 var(--fin-4); border: 0; border-radius: var(--fin-r-sm); background: transparent; color: var(--pk-ink); font-weight: 700;
}
html body.pk-obsidian :is(.pk-alt-dialog [data-alt-save], .pk-cover-dialog [data-cover-save]) { border-color: transparent; background: var(--paint-fill, var(--pk-accent)); color: var(--paint-on-fill, #1d070c); }

/* ---------------------------------------------------------------- F23a labelled control groups in the composer: label 8px above its control, 24px between groups */
html body.pk-obsidian .pk-composer :is(.pk-ask-legend, fieldset > legend, .pk-field > label:first-child) { margin: 0 0 var(--fin-2); padding: 0; }
html body.pk-obsidian .pk-composer-journey .pk-composer-after,
html body.pk-obsidian .pk-composer-takeover.is-active .pk-composer-after { gap: var(--fin-5); }

/* ---------------------------------------------------------------- F20 panes part by a gap, never by a line; rows inside a pane keep one quiet divider, inset to the pane's padding */
html body.pk-obsidian .pk-waiting { gap: var(--fin-2); padding: var(--fin-4); border-radius: var(--fin-r-lg); background: var(--fin-pane); }
html body.pk-obsidian .pk-waiting-list { border-top: 0; }
html body.pk-obsidian .pk-waiting-item { border-bottom: 1px solid var(--fin-rule); }
html body.pk-obsidian .pk-waiting-item:last-child { border-bottom: 0; }
html body.pk-obsidian .pk-waiting-row { padding: var(--fin-3) 0; }
html body.pk-obsidian .pk-home-stream.pk-stream,
html body.pk-obsidian .pk-post-feed,
html body.pk-obsidian .pk-message-thread-head,
html body.pk-obsidian .pk-message-reply { border-top-width: 0; border-bottom-width: 0; }
html body.pk-obsidian #pk-notification-panel footer,
html body.pk-obsidian #pk-notification-panel .pk-notification-filters { border-top-width: 0; border-bottom-width: 0; }

/* ---------------------------------------------------------------- F21 ruby fill is the one primary action of a view (Join, Send, Save, Post, the Dial and +): Follow is a bare text button (F29) */
html body.pk-obsidian :is(.pk-creator-card-follow, .pk-social-follow, .pk-meet-follow .fs-button, .pk-rail-follow .fs-button, [data-follow-username], #follow, #follow-guest):is(.fs-button, button, a):not(:disabled) {
  border: 0; background: transparent; color: var(--pk-ink); box-shadow: none;
}
@media (hover: hover) {
  html body.pk-obsidian :is(.pk-creator-card-follow, .pk-social-follow, .pk-meet-follow .fs-button, .pk-rail-follow .fs-button, [data-follow-username], #follow, #follow-guest):is(.fs-button, button, a):hover:not(:disabled):not([aria-pressed="true"]) {
    border: 0; background: transparent; color: var(--pk-ink); filter: brightness(1.08);
  }
}

/* ---------------------------------------------------------------- F14 the Club header: an inset pane (no hard edge under the rail strip), one row of equal buttons, one calm text stack */
@media (max-width: 759px) {
  html body.pk-obsidian .pk-server-head.pk-house-head[class*="pk-paint-"] { margin-inline: 0; border-radius: var(--fin-r-lg); }
}
html body.pk-obsidian .pk-srail { background: transparent; }
html body.pk-obsidian :is(.pk-srail-item--add, .pk-srail-item--discover) .pk-srail-face { border: 0; background: var(--fin-well); color: var(--pk-accent-ink, var(--pk-ink)); }
html body.pk-obsidian .pk-house-top .pk-server-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--fin-1); width: 100%; margin: 0; }
html body.pk-obsidian .pk-house-top .pk-server-actions :is(.fs-button, [data-portable-share]):not(.fs-button--primary) { margin: 0; }
html body.pk-obsidian .pk-house-top .pk-server-actions .fs-button--primary { min-height: 44px; padding: 0 var(--fin-5); border-radius: 999px; }
html body.pk-obsidian .pk-house-top .pk-server-actions #server-settings-open { width: 44px; padding: 0; }
html body.pk-obsidian .pk-house-top .pk-server-actions .pk-server-role { color: var(--pk-muted); font-size: 14px; font-weight: 600; }
html body.pk-obsidian .pk-house-top .pk-server-actions #server-join-status { flex: 1 0 100%; margin: 0; color: var(--pk-muted); font-size: 14px; line-height: 1.4; }
html body.pk-obsidian .pk-house-top .pk-server-actions #server-join-status:empty { display: none; }
html body.pk-obsidian .pk-house-head .pk-server-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fin-1) var(--fin-4); margin: 0; color: var(--pk-muted); font-size: 14px; line-height: 1.4; }
html body.pk-obsidian .pk-house-head .pk-server-meta > * { display: inline-flex; align-items: center; gap: var(--fin-2); margin: 0; }
html body.pk-obsidian .pk-house-head { gap: var(--fin-3); }

/* ---------------------------------------------------------------- F12 section heads: a plain heading on the pane tint, "See all" a quiet text button with the pane's padding (no solid colour band) */
html body.pk-obsidian :is(.pk-social-head, .pk-meet-head, .pk-house-suggestions > header, .pk-social[data-social-row="houses"] .pk-social-head) {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fin-2); min-height: 60px; margin: 0 0 var(--fin-2); padding: var(--fin-2) var(--fin-2) var(--fin-2) var(--fin-4);
  border-radius: var(--fin-r-lg); background: var(--fin-pane); color: var(--pk-ink);
}
html body.pk-obsidian :is(.pk-social-head, .pk-meet-head, .pk-house-suggestions > header, .pk-social[data-social-row="houses"] .pk-social-head) :is(h2, a, button) { color: var(--pk-ink); }
html body.pk-obsidian :is(.pk-social-head, .pk-meet-head, .pk-house-suggestions > header, .pk-social[data-social-row="houses"] .pk-social-head) h2 { font-size: 1.125rem; font-weight: var(--pk-weight-bold, 700); letter-spacing: -.02em; line-height: 1.2; }
html body.pk-obsidian :is(.pk-social-head, .pk-meet-head, .pk-house-suggestions > header, .pk-social[data-social-row="houses"] .pk-social-head) a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--fin-3); border-radius: 999px; color: var(--pk-muted); font-size: 15px; font-weight: 600; text-decoration: none;
}
/* ---------------------------------------------------------------- F12b the Home side cards ("Who to follow", "Clubs for you", "Happening on Publika"): one tinted pane each, 16px inside on every side,
   a plain heading (no colour band), rows 12px apart, nothing touching a pane edge, a 12px gap between cards, equal 26px corners */
html body.pk-obsidian .pk-home-side { gap: var(--fin-3); }
/* a column that overflows scrolls; a card never shrinks and clips its last row */
html body.pk-obsidian .pk-home-side > .pk-rail-module { flex: none; }
html body.pk-obsidian .pk-rail-module,
html body.pk-obsidian .pk-rail-module + .pk-rail-module,
html body.pk-obsidian .pk-home-side .pk-rail-module:last-child {
  display: grid; gap: var(--fin-3); margin: 0; padding: var(--fin-4); border: 0; border-radius: var(--fin-r-lg); background: var(--fin-pane); overflow: visible;
}
html body.pk-obsidian .pk-rail-module > h2 { margin: 0; padding: 0; background: none; color: var(--pk-ink); font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
html body.pk-obsidian :is(.pk-rail-people, .pk-rail-servers, .pk-rail-now) { gap: var(--fin-3); }
html body.pk-obsidian :is(.pk-rail-person, .pk-rail-server) { gap: var(--fin-3); min-height: 44px; padding: 0; }
html body.pk-obsidian :is(.pk-rail-person-link, .pk-rail-server-link) { gap: var(--fin-3); }
html body.pk-obsidian .pk-rail-person-text { gap: 2px; }
html body.pk-obsidian .pk-rail-person-text strong { display: block; overflow: hidden; color: var(--pk-ink); font-size: 15px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
html body.pk-obsidian .pk-rail-person-text strong .pk-official-mark { margin-left: var(--fin-2); vertical-align: 1px; }
html body.pk-obsidian .pk-rail-person-text small { color: var(--pk-muted); font-size: 13px; line-height: 1.3; }
/* one muted line under the name: the reason ("Followed by …") is the link's tooltip and still read aloud */
html body.pk-obsidian .pk-rail-module .pk-rail-reason { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Follow and Watch: bare secondary text on the pane's padded right edge, a 44px target */
html body.pk-obsidian .pk-rail-module :is(.pk-rail-follow .fs-button, .pk-rail-follow-link, .pk-rail-watch):not(:disabled) {
  display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; margin: 0; padding: 0 0 0 var(--fin-2); border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--pk-ink); font-size: 15px; font-weight: 600; text-decoration: none;
}
html body.pk-obsidian .pk-rail-module .pk-rail-follow { align-self: center; }
html body.pk-obsidian .pk-rail-module .pk-rail-more { min-height: 44px; margin: 0; padding: 0; justify-self: start; color: var(--pk-muted); font-size: 15px; font-weight: 600; }
/* "Happening on Publika": the small kicker is the muted ink (never yellow), the headline reads at 15px */
html body.pk-obsidian .pk-rail-now-item a { gap: var(--fin-1); min-height: 44px; padding: 0; align-content: center; }
html body.pk-obsidian .pk-rail-now-item small,
html body.pk-obsidian :is(.pk-rail-now-item--update, .pk-rail-now-item--pick) small { color: var(--pk-muted); font-size: 12px; font-weight: 600; line-height: 1.3; }
html body.pk-obsidian .pk-rail-now-item strong { font-size: 15px; line-height: 1.3; }
/* ---------------------------------------------------------------- F12c the desktop header (760px and up): one search, one create control
   The search field is on screen, so the phone's search icon button is not (the field carries its own magnifier). Where a "What are you creating?" prompt is on the page
   (Home, a Club you can post in, Discover's Share work) the bar's New waits; every other page keeps it as the one ruby primary. Phones are untouched: they keep the icon and the bottom bar's +. */
@media (min-width: 760px) {
  html body.pk-obsidian .pk-top button.pk-search-open.pk-icon-action[data-search-open] { display: none; }
  html body.pk-obsidian:has(.pk-compose:not([hidden] .pk-compose), [data-wall-compose]) .pk-top .pk-create-action { display: none; }
  /* A reading page's sheet (Settings, Inbox, Search, the rules) keeps a 24px margin each side: it never touches the left rail or the window edge on a narrow desktop. */
  html body.pk-obsidian.pk-calm .pk-stage > main#main:not(.pk-detail-page):not(.pk-message-page):not([class*="pk-composer"]) { width: min(calc(100% - 2 * var(--fin-5)), 1120px); margin-inline: auto; }
  /* The post page's "..." sits in the header row (not on a corner), so the 44px a feed card reserves for it is not reserved twice: the menu ends on the pane's padded edge. */
  html body.pk-obsidian .pk-post.pk-detail[data-post-menu="1"] .pk-post-head { padding-right: 0; }
  /* Messages: the empty pane's "New chat" repeats the list's +, so it is a bare text button and the ruby fill stays on the one + */
  html body.pk-obsidian .pk-message-empty .pk-message-new-button { min-height: 44px; padding: 0 var(--fin-3); border: 0; background: transparent; box-shadow: none; color: var(--pk-ink); font-size: 15px; font-weight: 700; }
}
@media (min-width: 760px) and (hover: hover) {
  html body.pk-obsidian .pk-message-empty .pk-message-new-button:hover:not(:disabled) { border: 0; background: transparent; box-shadow: none; color: var(--pk-ink); filter: brightness(1.08); }
}
/* Words never stand bare on the ground: the Club's notices control and its report link sit on a pane. */
html body.pk-obsidian .pk-club-notice { max-width: none; margin: 0 0 var(--fin-3); padding: var(--fin-1) var(--fin-4); border-radius: var(--fin-r-lg); background: var(--fin-pane); }
html body.pk-obsidian .pk-club-notice-toggle { min-height: 52px; }
html body.pk-obsidian .pk-club-notice-body { padding: 0 0 var(--fin-3); }
html body.pk-obsidian .pk-house-safety { display: flex; align-items: center; min-height: 60px; margin: 0 0 var(--fin-3); padding: 0 var(--fin-2) 0 var(--fin-4); border-radius: var(--fin-r-lg); background: var(--fin-pane); }
html body.pk-obsidian .pk-house-safety .pk-link-button { min-height: 44px; padding: 0 var(--fin-3) 0 0; border-radius: 999px; color: var(--pk-muted); font-size: 15px; text-decoration: none; }

/* ---------------------------------------------------------------- F27 a post's header is one row: name, @username, time. The name shrinks first (to about 9 characters), then the @username; the time never does. */
html body.pk-obsidian .pk-post-author-text { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0 var(--fin-2); min-width: 0; }
html body.pk-obsidian .pk-post-author-name { flex: 0 100 auto; min-width: 9ch; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html body.pk-obsidian .pk-post-author-meta { display: contents; }
html body.pk-obsidian .pk-post-author-meta > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--pk-muted); font-size: 14px; }
html body.pk-obsidian .pk-post-author-meta > :not(:first-child) { flex: none; color: var(--pk-muted); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the rest of the sweep: tab panes hold their 44px targets 8px inside, close buttons sit inside the curve, lists of rows are one pane */
html body.pk-obsidian :is(.pk-club-tabs, .pk-house-purpose, .pk-house-walls, .pk-server-channels, .pk-momentum-tabs, .pk-momentum-filters, .pk-house-directory-toolbar) { display: flex; align-items: center; gap: var(--fin-1); min-height: 60px; padding: var(--fin-2); border: 0; }
html body.pk-obsidian :is(.pk-club-tabs, .pk-house-purpose, .pk-house-walls, .pk-server-channels, .pk-momentum-tabs, .pk-momentum-filters, .pk-house-directory-toolbar) a { display: inline-flex; align-items: center; min-height: 44px; border-radius: 999px; }
html body.pk-obsidian :is(.pk-club-tabs, .pk-house-purpose, .pk-house-walls, .pk-server-channels, .pk-house-directory-toolbar) { border-radius: var(--fin-r-lg); }
html body.pk-obsidian .pk-club-tabs { margin: 0 0 var(--fin-3); background: var(--fin-pane); }
html body.pk-obsidian .pk-club-tabs a[aria-current="page"]::after { right: var(--fin-3); bottom: var(--fin-1); left: var(--fin-3); }
html body.pk-obsidian .pk-social-dismiss { top: var(--fin-2); right: var(--fin-2); }
html body.pk-obsidian .pk-screening-mark { padding: 7px var(--fin-4); }
html body.pk-obsidian :is(.pk-club-people, .pk-club-log, .pk-safety-section) { padding: var(--fin-2) var(--fin-4); border: 0; border-radius: var(--fin-r-lg); background: var(--fin-pane); }
html body.pk-obsidian .pk-safety-section { margin: var(--fin-3) 0 0; padding: var(--fin-4); }
html body.pk-obsidian .pk-club-person { padding: var(--fin-3) 0; border-bottom: 1px solid var(--fin-rule); }
html body.pk-obsidian .pk-club-person:last-child { border-bottom: 0; }
html body.pk-obsidian .pk-stream-end { border-top: 0; }

/* F28 "Worked with …" and "People you brought" are meta lines on the pane, in the one sans family, never a bare italic pill on the ground. */
html body.pk-obsidian .pk-growth-profile { display: grid; gap: var(--fin-1); margin: 0 0 var(--fin-3); padding: var(--fin-3) var(--fin-4); border-radius: var(--fin-r-lg); background: var(--fin-pane); }
html body.pk-obsidian :is(.pk-growth-worked, .pk-growth-brought) { width: auto; max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; color: var(--pk-muted); font-family: inherit; font-size: 15px; font-style: normal; line-height: 1.4; }
html body.pk-obsidian .pk-growth-brought a { color: var(--pk-ink); text-decoration: none; }

/* F27 (continued): with less than 15rem for the whole line the @username goes (the profile link keeps it for a screen reader); the ⋯ is the same horizontal glyph on the post page as on a card. */
/* the container query needs a width of its own (size containment gives the text block none): the author block takes what the header has */
html body.pk-obsidian .pk-post-author { flex: 1 1 0; min-width: 0; }
html body.pk-obsidian .pk-post-author-text { flex: 1 1 0; container-type: inline-size; }
@container (max-width: 15rem) { html body.pk-obsidian .pk-post-author-meta > span:first-child { display: none; } }
html body.pk-obsidian .pk-post-more > summary { transform: none; }

/* The photo's buttons (Edit photo, Remove, Add description) are one set of equal pills, never staggered widths. */
html body.pk-obsidian .pk-composer-preview-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--fin-2); align-items: stretch; }
html body.pk-obsidian .pk-composer-preview-tools button { width: 100%; justify-content: center; }

/* The comments are a pane, not a section under a rule; the notification rows of Settings part by their gap. */
html body.pk-obsidian :is(.pk-detail-comments, .pk-post-comments) { border-top-width: 0; }
html body.pk-obsidian .pk-account-page .pk-notification-row { border-bottom-width: 0; }

/* Messages: the conversations, the mutual follows and the archive link each sit on a pane; no rule above the contacts. */
html body.pk-obsidian .pk-conversation-list { margin: 0 0 var(--fin-3); padding: var(--fin-2) var(--fin-4); border-radius: var(--fin-r-lg); background: var(--fin-pane); }
html body.pk-obsidian .pk-chat-contacts { margin: 0 0 var(--fin-3); padding: var(--fin-4); border: 0; border-radius: var(--fin-r-lg); background: var(--fin-pane); }
html body.pk-obsidian .pk-message-archived-link { display: flex; align-items: center; min-height: 60px; margin: 0 0 var(--fin-3); padding: 0 var(--fin-4); border-radius: var(--fin-r-lg); background: var(--fin-pane); }
html body.pk-obsidian .pk-message-archived-link a { display: inline-flex; align-items: center; min-height: 44px; border-radius: 999px; color: var(--pk-muted); text-decoration: none; }

/* The notification panel's actions are 44px pills with their words in the middle (the id beats the shared button rules that top-aligned them). */
html body.pk-obsidian #pk-notification-panel a.pk-notification-action { display: inline-flex; align-items: center; justify-content: center; align-self: start; height: auto; min-height: 44px; padding: 0 var(--fin-4); line-height: 1.2; }

/* A single-line field never clips its own words mid-letter: a placeholder or a value that does not fit ends in an ellipsis. */
html body.pk-obsidian :is(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input:not([type])) { text-overflow: ellipsis; }

/* The Club's own ⋯ (the same details menu as the profile's): a round icon button, its marker gone. */
html body.pk-obsidian .pk-club-more > summary { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; list-style: none; border-radius: 50%; color: var(--pk-ink); cursor: pointer; }
html body.pk-obsidian .pk-club-more > summary::-webkit-details-marker { display: none; }

/* ---------------------------------------------------------------- F29 the button system: ONE filled ruby primary per view region; every other action is a bare text button.
   Bold 15px ink, no border, no fill, no scrim, a 44px target with 12px each side; 8% ink wash only while pressed; a brightness shift where a pointer hovers.
   A container stays only for a field, a select, a chip that shows its state (a 1px line at 14% ink), a tab and a segmented control; an icon button has no circle
   unless it sits on a picture (the Viewer, the camera). */
html body.pk-obsidian :is(.fs-button, a.fs-button, button.fs-button, [data-portable-share]):not(.fs-button--primary):not(.pk-chip) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fin-2); min-height: 44px; min-width: 44px; padding: 0 var(--fin-3);
  border: 0; border-radius: var(--fin-r-sm); background: transparent; box-shadow: none; color: var(--pk-ink); font-size: 15px; font-weight: 700; text-decoration: none;
}
html body.pk-obsidian :is(.fs-button, a.fs-button, button.fs-button, [data-portable-share]):not(.fs-button--primary):not(.pk-chip):active:not(:disabled) { background: color-mix(in srgb, var(--pk-ink) 8%, transparent); }
@media (hover: hover) {
  html body.pk-obsidian :is(.fs-button, a.fs-button, button.fs-button, [data-portable-share]):not(.fs-button--primary):not(.pk-chip):hover:not(:disabled) { border: 0; background: transparent; box-shadow: none; filter: brightness(1.08); }
}
html body.pk-obsidian :is(.fs-button, button.fs-button, [data-portable-share]):not(.fs-button--primary):not(.pk-chip) svg { width: 20px; height: 20px; flex: none; }
/* a button the page has hidden stays hidden (the display above must not beat the attribute) */
html body.pk-obsidian :is(.fs-button, button.fs-button, a.fs-button, [data-portable-share])[hidden] { display: none; }
/* the ⋯ is a bare icon button the same way */
html body.pk-obsidian :is(.pk-creator-more, .pk-club-more, .pk-post-more, .pk-message-more, .pk-contact-menu, .pk-profile-post-options) > summary { border: 0; background: transparent; box-shadow: none; }
/* chips and filter pills that show a selected state keep their pill, with the light 1px line */
html body.pk-obsidian :is(.pk-chip, .pk-pill, .pk-craft-chip, .pk-role-chip, .pk-intent-choice) { border: 1px solid color-mix(in srgb, var(--pk-ink) 14%, transparent); }