:root {
  --kb-background: #ffffff;
  --kb-landing-background: #f6fbff;
  --kb-surface: #ffffff;
  --kb-surface-muted: #fff2ec;
  --kb-fill: #f3f4f5;
  --kb-primary: #ff6600;
  --kb-primary-strong: #b93901;
  --kb-primary-pressed: #e14d00;
  --kb-primary-tint: #fff2ec;
  --kb-on-primary: #ffffff;
  --kb-ink: #1a1c20;
  --kb-body: #555d6d;
  --kb-caption: #868b94;
  --kb-placeholder: #b0b3ba;
  --kb-border: rgba(0, 0, 0, 0.08);
  --kb-border-muted: #dcdee3;
  --kb-border-subtle: rgba(0, 0, 0, 0.08);
  --kb-divider-subtle: rgba(0, 0, 0, 0.06);
  --kb-focus: var(--kb-primary-strong);
  --kb-verified: #4cc9f0;
  --kb-positive: #15c47e;
  --kb-info: #217cf9;
  --kb-korean: #ffe5d9;
  --kb-korean-strong: #e0603c;
  --kb-international: #d8e2dc;
  --kb-international-strong: #5c8a70;
  --kb-safety: #f2b8bc;
  --kb-safety-deep: #f04452;
  --kb-radius-card: 16px;
  --kb-radius-control: 12px;
  --kb-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.06);
  --kb-shadow-float: 0 4px 16px rgba(0, 0, 0, 0.10);
  --kb-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Roboto, "Noto Sans KR", sans-serif;
  --kb-motion-instant: 0ms;
  --kb-motion-fast: 150ms;
  --kb-motion-standard: 250ms;
  --kb-motion-slow: 350ms;
  --kb-motion-page: 300ms;
  --kb-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --kb-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --kb-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  background: var(--kb-background);
}

body {
  margin: 0;
  background: var(--kb-background);
  color: var(--kb-ink);
  font-family: var(--kb-font);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Lock the viewport on full-screen splash surfaces (welcome / login) so the
   page can't bounce or trigger pull-to-refresh — keeps the entry screen
   feeling native instead of like a scrollable website. Applied via
   `content_for :body_layout, "kb-viewport-locked"` on the splash views. */
body.kb-viewport-locked {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

.kb-login-carousel__slide,
.kb-login-carousel__tagline {
  opacity: 0;
  transition: opacity var(--kb-motion-slow) var(--kb-ease-standard);
}

.kb-login-carousel__slide.is-active,
.kb-login-carousel__tagline.is-active {
  opacity: 1;
}

.kb-login-carousel__indicator {
  width: 8px;
  background: rgba(255, 255, 255, 0.5);
  transition: width var(--kb-motion-standard) var(--kb-ease-standard),
    background-color var(--kb-motion-standard) var(--kb-ease-standard);
}

.kb-login-carousel__indicator.is-active {
  width: 24px;
  background: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .kb-login-carousel__slide,
  .kb-login-carousel__tagline,
  .kb-login-carousel__indicator {
    transition: none;
  }
}

/* The native navigation bar is hidden by default (see the Hotwire Native path
   configuration), so the web owns the top safe-area edge. This reserves the
   status-bar / Dynamic Island inset on every screen that renders its own web
   chrome. The entry/root screen keeps the native bar (which provides the inset
   natively) and full-bleed splash screens position their own content, so
   neither receives the `kb-safe-area-top` body class. */
body.hotwire-native.kb-safe-area-top {
  padding-top: env(safe-area-inset-top);
}

/* With the body reserving the top inset, pin sticky top bars just below the
   status bar instead of letting them slide under it when the page scrolls.
   Targets header elements pinned to the very top (back-button app bars, tab
   headers); multi-offset stickies such as the conversation trust sub-banner are
   left untouched. */
body.hotwire-native.kb-safe-area-top header.sticky.top-0 {
  top: env(safe-area-inset-top);
}

/* Extend the pinned header's surface up behind the status bar. Without this the
   header only paints its own row (below the inset), so scrolled content peeks
   through the safe-area strip above it. The filler inherits the header's
   background and always sits directly above it, covering that strip. */
body.hotwire-native.kb-safe-area-top header.sticky.top-0::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: env(safe-area-inset-top);
  background: inherit;
}

body,
button,
input,
textarea,
select {
  font-family: var(--kb-font);
  letter-spacing: 0;
}

/* Custom-rendered checkbox: native accent-color leaves the tick mark to the
   browser's own contrast heuristic, which can render a dark/black tick on
   the orange fill. Drawing the tick ourselves guarantees --kb-on-primary
   (white) every time. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  border: 1px solid var(--kb-border-muted);
  background-color: var(--kb-surface);
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  transition: background-color var(--kb-motion-fast) var(--kb-ease-enter),
    border-color var(--kb-motion-fast) var(--kb-ease-enter);
}

input[type="checkbox"]:checked {
  border-color: var(--kb-primary);
  background-color: var(--kb-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 65%;
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-profile-customization__remove-photo input:checked {
  border-color: var(--kb-safety-deep);
  background-color: var(--kb-safety-deep);
}

.material-symbols-outlined {
  display: inline-flex;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  text-transform: none;
  font-feature-settings: "liga";
}

main:not([data-welcome-splash]):not([data-call-canvas]):not([data-marketing-landing]) {
  background: var(--kb-background) !important;
  color: var(--kb-ink) !important;
  font-family: var(--kb-font) !important;
}

main[data-marketing-landing] {
  background: var(--kb-background) !important;
}

main:not([data-welcome-splash]):not([data-call-canvas]) .font-semibold {
  font-weight: 500 !important;
}

main:not([data-welcome-splash]):not([data-call-canvas]) :is(.text-6xl, .text-4xl, .text-3xl) {
  font-size: 26px !important;
  line-height: 35px !important;
}

main:not([data-welcome-splash]):not([data-call-canvas]) .text-2xl {
  font-size: 24px !important;
  line-height: 32px !important;
}

main:not([data-welcome-splash]):not([data-call-canvas]) .text-xl {
  font-size: 20px !important;
  line-height: 27px !important;
}

main:not([data-welcome-splash]):not([data-call-canvas]) .text-lg {
  font-size: 18px !important;
  line-height: 24px !important;
}

main:not([data-welcome-splash]):not([data-call-canvas]) :is(p, span, h1, h2, h3, h4, label, a, button, .uppercase, [style*="letter-spacing"]) {
  letter-spacing: 0 !important;
}

main:not([data-welcome-splash]):not([data-call-canvas]) :is(input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not(.bg-transparent), textarea:not(.bg-transparent), select:not(.bg-transparent)) {
  min-height: 40px;
  border: 1px solid var(--kb-border-muted) !important;
  border-radius: 8px !important;
  background: var(--kb-surface) !important;
  color: var(--kb-ink) !important;
  font-size: 16px !important;
}

main:not([data-welcome-splash]):not([data-call-canvas]) :is(input, textarea)::placeholder {
  color: var(--kb-placeholder) !important;
}

main:not([data-welcome-splash]):not([data-call-canvas]) :is(a, button) {
  -webkit-tap-highlight-color: transparent;
}

main:not([data-welcome-splash]):not([data-call-canvas]) :is(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

main:not([data-welcome-splash]):not([data-call-canvas]) :is(a, button)[style*="background: #ff6600"],
main:not([data-welcome-splash]):not([data-call-canvas]) :is(a, button)[style*="background:#ff6600"],
main:not([data-welcome-splash]):not([data-call-canvas]) :is(a, button)[style*="background: var(--kb-primary)"],
main:not([data-welcome-splash]):not([data-call-canvas]) :is(a, button)[style*="background:var(--kb-primary)"] {
  color: var(--kb-on-primary) !important;
}

.kb-main-nav {
  bottom: 0 !important;
  left: 50% !important;
  width: min(100%, 430px) !important;
  max-width: 430px;
  padding-top: 0 !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  border: 1px solid var(--kb-border-subtle);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: var(--kb-shadow-float);
}

.kb-main-nav__link {
  width: auto;
  min-width: 0;
  min-height: 56px;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  border-radius: 8px;
  text-decoration: none;
}

.kb-main-nav__link:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: -2px;
}

.kb-main-nav__label {
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
}

.kb-main-nav__icon {
  display: inline-flex;
  width: 23px;
  height: 23px;
  align-items: center;
  justify-content: center;
}

.kb-main-nav__icon svg {
  width: 23px;
  height: 23px;
}

.kb-main-nav__badge {
  box-sizing: border-box;
  position: absolute;
  top: 6px;
  right: auto;
  left: calc(50% + 4px);
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--kb-surface);
  border-radius: 9999px;
  background: var(--kb-safety-deep);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.kb-main-nav a[style*="#ff6600"] .kb-main-nav__icon {
  font-variation-settings: "FILL" 1, "wght" 600;
}

.kb-scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.kb-scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.kb-top-tab-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  min-height: 56px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--kb-background);
}

/* In Hotwire Native the tab-root screens hide the native navigation bar, so
   this web header IS the top bar. Pin it and clear the status bar with the
   safe-area inset (requires viewport-fit=cover on the viewport meta). */
.hotwire-native .kb-top-tab-header {
  top: env(safe-area-inset-top);
}

.kb-top-tab-title {
  min-width: 0;
  margin: 0;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.kb-top-tab-action,
.kb-top-tab-spacer,
.kb-top-profile-link {
  width: 48px;
  height: 48px;
}

.kb-top-tab-action,
.kb-top-profile-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.kb-top-tab-action {
  justify-content: flex-end;
}

.kb-top-profile-link {
  justify-content: flex-start;
  color: inherit;
}

.kb-top-profile-link:focus-visible {
  border-radius: 8px;
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-avatar.kb-top-profile-avatar {
  height: 40px;
  width: 40px;
  border-radius: 9999px;
  background: var(--kb-fill);
  color: var(--kb-primary);
  font-size: 13px;
  line-height: 1;
  overflow: hidden;
}

.kb-avatar.kb-top-profile-avatar img {
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  object-fit: cover;
}

.kb-feed-action {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--kb-body);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover fill only where a pointer can actually leave. On touch the fill stuck
   after a tap, leaving a grey chip parked behind the comment icon. */
@media (hover: hover) {
  .kb-feed-action:hover {
    background: var(--kb-fill);
  }
}

.kb-feed-action:active {
  transform: scale(0.98);
}

/* Pressed state marks the glyph, not the row. A filled tint block behind the
   heart read as a selected chip and pulled more weight than the post body it
   belongs to; the filled icon plus accent colour is the whole signal. */
.kb-feed-action[aria-pressed="true"] {
  color: var(--kb-primary-strong);
}

@media (prefers-reduced-motion: reduce) {
  .kb-feed-action {
    transition: none;
  }

  .kb-feed-action:active {
    transform: none;
  }
}

/* Comment-level controls. Deliberately lighter than .kb-feed-action: a thread
   of ten comments carries ten of these rows, and at the feed action's 44px and
   body weight the actions outweighed the replies they belong to. */
.kb-comment-action {
  min-height: 32px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--kb-caption);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-comment-action:hover {
  background: var(--kb-fill);
}

/* Every comment used to render an always-open reply panel, so a thread showed
   as many textareas as it had comments. Each reply composer is a disclosure
   now, and its summary is the "Reply" control on the comment's action row.
   When it opens it takes a line of its own and the row's tools close up onto
   the line above -- otherwise the 100% flex-basis would push them down a row. */
.kb-comment-reply > summary {
  list-style: none;
  cursor: pointer;
}

.kb-comment-reply > summary::-webkit-details-marker {
  display: none;
}

.kb-comment-reply[open] {
  order: 3;
  flex-basis: 100%;
}

.kb-comment-reply[open] ~ .kb-comment-tools {
  order: 2;
}

/* The replies rail is always in the DOM so a streamed reply has somewhere to
   land. Empty, it would still spend its 12px top margin on nothing, so it
   stays out of the flow until it holds a reply. */
.kb-comment-replies:not(:has(article)) {
  display: none;
}

/* §14 "Success (inline flash)": a posted comment is confirmed by a 300ms
   Orange Tint wash behind it, fading back to the page. No toast -- the comment
   itself is the confirmation. */
@keyframes kb-comment-flash {
  from {
    background-color: var(--kb-primary-tint);
  }

  to {
    background-color: transparent;
  }
}

.kb-comment-flash {
  animation: kb-comment-flash 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .kb-comment-action {
    transition: none;
  }

  .kb-comment-flash {
    animation: none;
  }
}

/* Translation reveal -- UI-DESIGN "Rendering spec". A per-viewer, ephemeral
   toggle appended below the original text. State lives only in this DOM
   subtree (translation_controller.js); nothing here is a shared column. */
.kb-translation-trigger[aria-expanded="true"] {
  color: #217cf9;
}

.kb-translation-block {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-translation-block[hidden] {
  display: none;
}

.kb-translation-block.kb-translation-block--open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.kb-translation-block.kb-translation-block--closing {
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.kb-translation-block__inner {
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 8px;
  padding-top: 8px;
}

.kb-translation-label {
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .kb-translation-block {
    transition: none;
  }
}

.kb-translation-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid color-mix(in srgb, var(--kb-primary) 24%, transparent);
  border-top-color: var(--kb-primary);
  border-radius: 9999px;
  animation: kb-translation-spin 800ms linear infinite;
}

@keyframes kb-translation-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-translation-spinner {
    animation: none;
  }
}

/* Error toast -- DESIGN.md §14 "Error (toast)": Ink bg, white 14px text,
   3s auto-dismiss, bottom inset above the tab bar, one sentence, no icon.
   Rendered client-side because the app's flash partial only fires on a
   full-page response; a fetch-driven failure has none to hook into. */
.kb-translation-toast {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 60;
  width: calc(100% - 32px);
  max-width: 398px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #1a1c20;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateX(-50%);
  animation: kb-translation-toast-dismiss 3000ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes kb-translation-toast-dismiss {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  6% { opacity: 1; transform: translate(-50%, 0); }
  85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .kb-translation-toast {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.kb-events-screen,
.kb-outings-screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 22px 12px 0;
  background: var(--kb-background);
  color: var(--kb-ink);
  font-family: var(--kb-font);
}

/* The map view pins the shared Events/Meetups header full-width; its inner
   content must sit on the same 430px column + gutters as the list screens. */
.kb-events-map-header {
  padding: 22px 12px 0;
}

.kb-events-map-header .kb-events-header {
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  padding: 0 14px;
}

.kb-events-shell,
.kb-outings-shell {
  display: flex;
  width: 100%;
  max-width: 430px;
  min-height: calc(100vh - 22px);
  min-height: calc(100dvh - 22px);
  margin: 0 auto;
  padding: 0 14px 96px;
  flex-direction: column;
}

.kb-events-header {
  display: grid;
  justify-items: stretch;
  gap: 6px;
  margin-bottom: 6px;
}

.kb-events-header__bar {
  width: 100%;
}

.kb-events-header__title {
  justify-self: center;
}

.kb-events-header__meta {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  color: var(--kb-caption);
  font-size: 11px;
  font-weight: 400;
  line-height: 15px;
}

.kb-events-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 0 2px;
}

.kb-events-context-row__scope {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.kb-events-context-row__scope--trigger {
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.kb-events-context-row__scope--trigger:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-events-context-row__icon {
  color: var(--kb-primary);
  font-size: 16px;
  font-variation-settings: "FILL" 0, "wght" 500;
}

.kb-events-view-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 9999px;
  background: var(--kb-fill);
}

.kb-events-view-toggle__option {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 9999px;
  color: var(--kb-body);
  text-decoration: none;
}

.kb-events-view-toggle__option .material-symbols-outlined {
  font-size: 18px;
}

.kb-events-view-toggle__option--current {
  background: var(--kb-surface);
  color: var(--kb-primary-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.kb-events-view-toggle__option:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-events-saved-button {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  border: 1px solid var(--kb-border-muted);
  border-radius: 12px;
  background: var(--kb-surface);
  color: var(--kb-ink);
  text-decoration: none;
}

.kb-events-saved-button .material-symbols-outlined {
  color: var(--kb-primary);
  font-size: 22px;
  font-variation-settings: "FILL" 0, "wght" 600;
}

.kb-events-saved-button:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-events-saved-button.is-active {
  background: var(--kb-primary-tint);
}

.kb-events-saved-button.is-active .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 600;
}

/* The Active/Past frame swaps in place; it carries no box of its own so the
   list keeps the shell's column layout. */
.kb-events-frame,
.kb-outings-frame,
.kb-buddy-filter-frame {
  display: contents;
}

.kb-events-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0 0 10px;
  align-items: center;
}

.kb-events-search__field {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 12px;
  background: var(--kb-surface);
}

.kb-events-search__field .material-symbols-outlined {
  flex: none;
  color: var(--kb-caption);
  font-size: 20px;
}

.kb-events-search__input {
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  color: var(--kb-ink);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
}

.kb-events-search__input::placeholder {
  color: var(--kb-caption);
}

.kb-events-search__field:focus-within {
  border-color: var(--kb-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kb-focus) 12%, transparent);
}

.kb-events-search__clear {
  grid-column: 1 / -1;
  width: fit-content;
  color: var(--kb-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-decoration: none;
}

/* Region filter: the header scope label is the trigger that opens this
   bottom-sheet list selector (DESIGN.md §4 Filter Selectors — one region
   control, never duplicated as a chip below the header). */
.kb-filter-sheet__chevron {
  color: var(--kb-caption);
}

.kb-filter-sheet__row-link:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

/* Sheets sit above the bottom tab bar (z-50) so the nav never clips the last
   row of the sheet; the incoming-call banner (z-60) still wins over both. */
.kb-filter-sheet__backdrop {
  position: fixed;
  inset: 0;
  z-index: 51;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1);
}

.kb-filter-sheet__sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 52;
  flex-direction: column;
  max-width: 430px;
  max-height: 80vh;
  margin: 0 auto;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--kb-surface);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--kb-shadow-float);
  transform: translateY(40px);
  opacity: 0;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1), opacity 250ms cubic-bezier(0, 0, 0.2, 1);
  overflow-y: auto;
}

.kb-filter-sheet--open .kb-filter-sheet__backdrop {
  opacity: 1;
}

.kb-filter-sheet--open .kb-filter-sheet__sheet {
  transform: translateY(0);
  opacity: 1;
}

.kb-filter-sheet__handle {
  width: 36px;
  height: 4px;
  margin: 8px auto 12px;
  border-radius: 9999px;
  background: var(--kb-border);
}

.kb-filter-sheet__sheet-title {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 700;
  color: var(--kb-ink);
}

.kb-filter-sheet__sheet-sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--kb-caption);
}

.kb-filter-sheet__list {
  display: flex;
  flex-direction: column;
  margin: 0 -16px;
}

/* Filter modal: a sheet whose body scrolls under a fixed header and apply bar. */
.kb-filter-sheet__sheet--modal {
  max-height: 88vh;
  overflow-y: hidden;
}

.kb-filter-sheet__modal-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px 0 12px;
}

.kb-filter-sheet__modal-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: var(--kb-ink);
}

.kb-filter-sheet__modal-action {
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--kb-body);
  text-align: left;
}

.kb-filter-sheet__modal-action--end {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--kb-primary);
}

.kb-filter-sheet__modal-body {
  max-height: calc(88vh - 160px);
  margin: 0 -16px;
  padding: 0 16px;
  overflow-y: auto;
}

.kb-filter-sheet__card {
  margin-bottom: 8px;
  background: var(--kb-fill);
  border-radius: 12px;
  overflow: hidden;
}

/* Back control on the language sub-screen. It navigates, so it must not read as
   one more selectable row: no card fill, ink arrow hung in the left gutter so it
   sits above the cards rather than inside the list. */
.kb-filter-sheet__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 44px;
  margin: -4px 0 4px -6px;
  padding: 0 10px 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--kb-ink);
  border-radius: 8px;
}

.kb-filter-sheet__back:active {
  background: var(--kb-fill);
}

.kb-filter-sheet__back-icon {
  font-size: 20px;
  color: var(--kb-ink);
}

.kb-filter-sheet__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 var(--kb-border-subtle);
}

.kb-filter-sheet__card .kb-filter-sheet__option:last-child {
  box-shadow: none;
}

.kb-filter-sheet__option-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.kb-filter-sheet__option-name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--kb-ink);
}

.kb-filter-sheet__option-check {
  font-size: 20px;
  color: var(--kb-primary);
  opacity: 0;
}

.kb-filter-sheet__option-input:checked ~ .kb-filter-sheet__option-check {
  opacity: 1;
}

.kb-filter-sheet__option-input:focus-visible ~ .kb-filter-sheet__option-name {
  outline: 2px solid var(--kb-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Apply bar. Lives outside the scrolling body so it never drifts off screen,
   and clears the home indicator itself since the sheet covers the tab bar. */
.kb-filter-sheet__modal-footer {
  padding: 8px 0 calc(4px + env(safe-area-inset-bottom));
  background: var(--kb-surface);
}

.kb-filter-sheet__apply {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  font-weight: 700;
  color: var(--kb-on-primary);
  background: var(--kb-primary);
  border-radius: 12px;
}

.kb-filter-sheet__apply:active {
  background: var(--kb-primary-pressed);
}

/* Dual-thumb age range. Two native range inputs share one painted track: the
   inputs themselves are transparent and click-through, only their thumbs take
   pointer events, so either end can be grabbed anywhere on the track. */
.kb-age-range {
  padding: 12px 16px 16px;
}

.kb-age-range__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  margin-bottom: 12px;
}

.kb-age-range__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--kb-ink);
}

.kb-age-range__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--kb-primary);
}

.kb-age-range__track {
  --kb-range-start: 0%;
  --kb-range-end: 100%;
  position: relative;
  height: 28px;
  background: linear-gradient(
    to right,
    var(--kb-fill) 0 var(--kb-range-start),
    var(--kb-primary) var(--kb-range-start) var(--kb-range-end),
    var(--kb-fill) var(--kb-range-end) 100%
  );
  background-position: 0 center;
  background-repeat: no-repeat;
  background-size: 100% 6px;
  border-radius: 9999px;
}

.kb-age-range__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

.kb-age-range__input::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  appearance: none;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border-muted);
  border-radius: 9999px;
  box-shadow: var(--kb-shadow-card);
  pointer-events: auto;
  cursor: grab;
}

.kb-age-range__input::-moz-range-thumb {
  width: 26px;
  height: 26px;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border-muted);
  border-radius: 9999px;
  box-shadow: var(--kb-shadow-card);
  pointer-events: auto;
  cursor: grab;
}

.kb-age-range__input::-moz-range-track {
  background: transparent;
}

.kb-age-range__input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--kb-primary);
  outline-offset: 2px;
}

.kb-age-range__input:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--kb-primary);
  outline-offset: 2px;
}

.kb-filter-sheet__group {
  padding: 16px 16px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kb-caption);
}

.kb-filter-sheet__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border-top: 1px solid var(--kb-border-subtle);
}

.kb-filter-sheet__row:first-child {
  border-top: 0;
}

.kb-filter-sheet__row.is-active {
  background: var(--kb-primary-tint);
}

.kb-filter-sheet__row-link {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 52px;
  color: var(--kb-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* Stretched link: the whole row taps through to the region link while the
   count stays a non-interactive sibling, so the link's accessible name is
   just the region. */
.kb-filter-sheet__row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kb-filter-sheet__row.is-active .kb-filter-sheet__row-name {
  color: var(--kb-primary-pressed);
}

.kb-filter-sheet__row-count {
  position: relative;
  font-size: 12px;
  font-weight: 400;
  color: var(--kb-caption);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .kb-filter-sheet__backdrop,
  .kb-filter-sheet__sheet,
  .kb-event-chooser__backdrop,
  .kb-event-chooser__sheet {
    transition: none;
  }
}

/* Shared shell width for create + detail forms — keeps them on the
   same 430px column as the feed instead of the old 640px inline override. */
.kb-outing-form-shell,
.kb-outing-detail-shell {
  max-width: 430px;
}

.kb-outings-list {
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
}

/* Pinned "You're hosting" section — the viewer's own meetups above the browse
   feed. The section title carries the "yours" signal so each card stays a calm
   single-signal row (DESIGN.md §12.8, §3 Heading). With 2+ meetups the cards
   collapse into a horizontal rail so the browse feed stays above the fold
   (§12.8 content-density); a single meetup keeps the full browse card. */
.kb-outings-hosting {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

/* Horizontal rail of compact hosted cards — reuses the filter-chip scroll
   idiom (full-bleed against the gutter, proximity snap, hidden scrollbar) so a
   cut-off card signals scrollability. */
.kb-outings-hosting-rail {
  display: flex;
  gap: 10px;
  margin: 0 -14px;
  padding: 2px 14px 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.kb-outings-hosting-rail::-webkit-scrollbar {
  display: none;
}

/* Compact hosted card: drops the redundant host header since it's the viewer's
   own meetup, leaving the outing as the row's single signal. Fixed ~220px so
   ~1.5 cards show → clear "there's more" affordance. */
.kb-hosting-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: 12px;
  transition: transform var(--kb-motion-fast) var(--kb-ease-standard);
}

.kb-hosting-card:active {
  transform: scale(0.98);
}

.kb-hosting-card__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
}

.kb-hosting-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: var(--kb-ink);
}

.kb-hosting-card__meta {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--kb-caption);
}

.kb-hosting-card__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.kb-hosting-card__capacity {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--kb-fill);
  color: var(--kb-body);
}

.kb-hosting-card__composition {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--kb-body);
}

.kb-hosting-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
}

.kb-hosting-card__dot--korean {
  background: var(--kb-korean-strong);
}

.kb-hosting-card__dot--international {
  background: var(--kb-international-strong);
}

.kb-outings-section-title {
  margin: 0;
  color: var(--kb-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

/* Meetups filter chips — mirror the Events region-filter pill idiom
   with the peach primary-tint resting state from the design spec. */
.kb-outings-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 14px;
}

/* Full-bleed against the 14px shell gutter so a cut-off chip at the edge
   signals horizontal scrollability. */
.kb-outings-filters__row {
  display: flex;
  gap: 8px;
  margin: 0 -14px;
  padding: 0 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.kb-outings-filters__row::-webkit-scrollbar {
  display: none;
}

.kb-outings-filters__chip {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--kb-primary-tint);
  color: var(--kb-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  scroll-snap-align: start;
  text-decoration: none;
}

.kb-outings-filters__chip.is-active {
  border-color: var(--kb-ink);
  background: var(--kb-ink);
  color: var(--kb-surface);
}

.kb-outings-filters__chip:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-outings-filters__divider {
  width: 1px;
  align-self: stretch;
  margin: 4px 0;
  flex: 0 0 auto;
  background: var(--kb-border-muted);
}

.kb-outings-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 48px 16px 40px;
  flex-direction: column;
  text-align: center;
}

.kb-outings-empty__text {
  margin: 0;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 19px;
}

/* Composition preset radios in the create-meetup form.
   Seat fields are CSS-only revealed when "Custom" is checked — no JS. */
.kb-outing-composition__preset {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.kb-outing-composition__label {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  margin-right: 8px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 9999px;
  background: var(--kb-surface);
  color: var(--kb-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.kb-outing-composition__preset:checked + .kb-outing-composition__label {
  border-color: var(--kb-ink);
  background: var(--kb-ink);
  color: var(--kb-surface);
}

.kb-outing-composition__preset:focus-visible + .kb-outing-composition__label {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-outing-composition__seats {
  display: none;
}

.kb-outing-composition__preset[value="custom"]:checked ~ .kb-outing-composition__seats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.kb-events-list {
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
}

.kb-events-infinite-scroll__sentinel {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: center;
  padding: 4px 12px calc(12px + env(safe-area-inset-bottom));
  color: var(--kb-caption);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-decoration: none;
}

.kb-events-infinite-scroll__sentinel:focus-visible {
  border-radius: 10px;
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-events-infinite-scroll__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid color-mix(in srgb, var(--kb-primary) 24%, transparent);
  border-top-color: var(--kb-primary);
  border-radius: 9999px;
  animation: kb-events-infinite-scroll-spin 800ms linear infinite;
}

@keyframes kb-events-infinite-scroll-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-events-infinite-scroll__spinner {
    animation: none;
  }
}

.kb-event-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--kb-border);
  border-radius: 12px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-event-card-stack {
  display: grid;
  gap: 6px;
}

.kb-event-card:active {
  transform: scale(0.985);
}

.kb-event-card:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-event-card__media {
  aspect-ratio: 2.28 / 1;
  overflow: hidden;
  background: var(--kb-fill);
}

.kb-event-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kb-event-card__body {
  padding: 5px 12px 6px;
  background: var(--kb-surface);
}

.kb-event-card__schedule {
  margin: 0;
  color: var(--kb-caption);
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
}

.kb-event-card__title {
  margin: 2px 0 0;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
}

.kb-event-card__translation {
  margin: 2px 0 0;
  color: var(--kb-caption);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.kb-event-card__entry {
  display: block;
  margin: 8px 0 0;
  color: var(--kb-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.kb-event-card__entry strong {
  color: var(--kb-ink);
  font-weight: 500;
}

/* ============================================================
   Component layer — token-mapped saii system.
   Use these instead of inline hex / ad-hoc shadows in views.
   ============================================================ */

/* Hidden inside the Hotwire Native shell — the native navigation bar already
   provides top chrome, so web-rendered headers must not duplicate it. Same HTML
   ships to every client; only the native body class flips these off. */
body.hotwire-native .hotwire-native\:hidden {
  display: none !important;
}

/* App bar: sticky top chrome, centered title */
.kb-app-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--kb-background);
}
.kb-app-bar__icon {
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  color: var(--kb-ink);
  text-decoration: none;
}
.kb-app-bar__title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: var(--kb-ink);
}

/* Card surface */
.kb-card {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius-card);
  box-shadow: var(--kb-shadow-card);
}

/* Buttons */
.dui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: var(--kb-radius-control);
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* saii buttons own press motion instead of daisyUI's independent translate. */
.dui-btn:active { transform: scale(0.98); translate: none; }
.dui-btn:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}
.dui-btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 8px; }
.dui-btn-xs { min-height: 32px; padding: 0 14px; font-size: 13px; font-weight: 500; border-radius: 9999px; }
.dui-btn-block { width: 100%; }
.dui-btn-primary { background: var(--kb-primary); color: var(--kb-on-primary); }
.dui-btn-primary:active { background: var(--kb-primary-pressed); }
.dui-btn-secondary { background: var(--kb-fill); color: var(--kb-ink); }
.dui-btn-outline { background: transparent; color: var(--kb-ink); border-color: var(--kb-border-muted); }
.dui-btn-error { background: var(--kb-safety-deep); color: #fff; }
.dui-btn-neutral { background: var(--kb-ink); color: var(--kb-on-primary); }
.dui-btn-secondary:active { background: color-mix(in srgb, var(--kb-fill) 60%, var(--kb-border-muted)); }
.dui-btn-outline:active { background: var(--kb-fill); }
.dui-btn-neutral:active { background: var(--kb-body); }
.dui-btn:disabled, .dui-btn[aria-disabled="true"] { background: var(--kb-fill); color: #d1d3d8; pointer-events: none; }

@media (hover: hover) {
  .dui-btn-primary:hover { background: var(--kb-primary-pressed); }
  .dui-btn-primary[data-outing-info-invite="true"]:hover {
    background: var(--kb-primary);
    box-shadow: inset 0 0 0 2px var(--kb-ink);
  }
  .dui-btn-secondary:hover { background: color-mix(in srgb, var(--kb-fill) 80%, var(--kb-border-muted)); }
  .dui-btn-outline:hover { background: var(--kb-fill); }
  .dui-btn-neutral:hover { background: var(--kb-body); }
}

.dui-btn-primary[data-outing-info-invite="true"]:active {
  background: var(--kb-primary);
  box-shadow: inset 0 0 0 2px var(--kb-ink);
}

@media (prefers-reduced-motion: reduce) {
  .dui-btn { transition: none; }
  .dui-btn:active { transform: none; }
}

.kb-settings-switch__track {
  align-items: center;
  background: var(--kb-fill);
  border-radius: 9999px;
  display: inline-flex;
  height: 28px;
  padding: 4px;
  width: 48px;
}

.kb-settings-switch__thumb {
  background: var(--kb-surface);
  border-radius: 9999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  height: 20px;
  transform: translateX(0);
  transition: transform var(--kb-motion-instant, 0ms) ease-out;
  width: 20px;
}

.kb-settings-switch__input:checked + .kb-settings-switch__track {
  background: var(--kb-primary);
}

.kb-settings-switch__input:checked + .kb-settings-switch__track .kb-settings-switch__thumb {
  transform: translateX(20px);
}

.kb-settings-switch__input:focus-visible + .kb-settings-switch__track {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

[data-settings-toggle][aria-busy="true"] .kb-settings-switch__track {
  opacity: 0.72;
}

/* Settings & Privacy: compact native-style grouped lists. */
.kb-settings-app-bar {
  border-bottom: 1px solid var(--kb-divider-subtle);
}

.kb-settings-section {
  display: grid;
  gap: 12px;
}

.kb-settings-section__intro {
  display: grid;
  gap: 4px;
  padding: 0 4px;
}

.kb-settings-section__title {
  margin: 0;
  color: var(--kb-caption);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.kb-settings-section__helper {
  margin: 0;
  color: var(--kb-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.kb-settings-group {
  overflow: hidden;
  border: 1px solid var(--kb-border);
  border-radius: 12px;
  background: var(--kb-surface);
}

.kb-settings-list > * + *,
.kb-settings-group > * + * {
  border-top: 1px solid var(--kb-divider-subtle);
}

.kb-settings-row {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--kb-surface);
}

.kb-settings-row:is(a, button, summary) {
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-settings-row:is(a, button, summary):active {
  background: var(--kb-fill);
}

.kb-settings-row__leading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.kb-settings-row__icon {
  width: 24px;
  flex: 0 0 24px;
  color: var(--kb-caption);
  font-size: 22px;
}

.kb-settings-row__title {
  display: block;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.kb-settings-row__description {
  display: block;
  margin-top: 2px;
  color: var(--kb-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.kb-settings-row__status {
  color: var(--kb-caption);
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
}

.kb-settings-row__chevron {
  flex: 0 0 auto;
  color: var(--kb-caption);
  font-size: 22px;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-settings-details > summary {
  list-style: none;
}

.kb-settings-details > summary::-webkit-details-marker {
  display: none;
}

.kb-settings-details[open] .kb-settings-row__chevron {
  transform: rotate(180deg);
}

.kb-settings-details__content {
  display: grid;
  gap: 12px;
  padding: 12px 16px 16px 52px;
  border-top: 1px solid var(--kb-divider-subtle);
  background: var(--kb-surface);
}

.kb-settings-blocked-user {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kb-settings-row--danger .kb-settings-row__title,
.kb-settings-row--danger .kb-settings-row__icon,
.kb-settings-row--danger .kb-settings-row__chevron {
  color: var(--kb-safety-deep);
}

@media (hover: hover) {
  .kb-settings-row:is(a, button, summary):hover {
    background: var(--kb-fill);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-settings-row,
  .kb-settings-row__chevron {
    transition: none;
  }
}

[data-bridge-components~="device-registration"] [data-notification-web-helper] {
  display: none;
}

.kb-topic-chip {
  background: var(--kb-primary-tint);
  color: var(--kb-ink);
}

.peer:checked ~ .kb-topic-chip {
  background: var(--kb-ink);
  color: var(--kb-surface);
}

.peer:focus-visible ~ .kb-topic-chip {
  box-shadow: 0 0 0 2px var(--kb-focus);
}

.kb-create-post-submit {
  color: var(--kb-on-primary) !important;
}

.kb-create-post-submit:active {
  background: var(--kb-primary-pressed) !important;
}

.kb-event-detail-main {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 12px 0 32px;
}

.kb-event-detail-shell {
  max-width: 640px;
  margin: 0 auto;
}

.kb-event-detail-nav {
  display: flex;
  min-height: 44px;
  align-items: center;
  margin: 0 16px 8px;
}

.kb-event-detail-back {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 4px;
  margin-left: -6px; /* optical: aligns the arrow glyph with the 16px card gutter */
  padding: 0 10px 0 6px;
  border-radius: 8px;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  text-decoration: none;
}

.kb-event-detail-back:active {
  background: var(--kb-fill);
}

.kb-event-detail-back .material-symbols-outlined {
  color: inherit;
  font-size: 22px;
}

.kb-event-hero {
  position: relative;
  min-height: clamp(136px, 36vw, 180px);
  overflow: hidden;
  margin: 0 16px;
  border-radius: var(--kb-radius-card) var(--kb-radius-card) 0 0;
  background: var(--kb-ink);
  box-shadow: var(--kb-shadow-card);
}

.kb-event-hero__image-button {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.kb-event-hero__image-button:focus-visible {
  outline: 3px solid var(--kb-focus);
  outline-offset: -6px;
}

.kb-event-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kb-event-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.04) 34%),
    linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.06) 68%);
  pointer-events: none;
}

.kb-event-hero__copy {
  position: absolute;
  right: 20px;
  bottom: 14px;
  left: 20px;
  color: #fff;
  pointer-events: none;
}

.kb-event-hero__date {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-transform: uppercase;
}

.kb-event-hero__copy h1 {
  max-width: 420px;
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

.kb-event-hero__translation {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 18px;
}

.kb-event-hero__view-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--kb-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  box-shadow: var(--kb-shadow-card);
  pointer-events: none;
}

.kb-event-hero__view-hint .material-symbols-outlined {
  font-size: 16px;
}

.kb-event-primary-actions {
  margin: 0 16px;
  padding: 16px;
  border: 1px solid var(--kb-border);
  border-top: 0;
  border-radius: 0 0 var(--kb-radius-card) var(--kb-radius-card);
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-event-primary-actions__controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.kb-event-primary-actions__match {
  flex: 1;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--kb-radius-control);
  font-size: 14px;
  line-height: 18px;
}

.kb-event-primary-actions__state {
  display: inline-flex;
  flex: 1;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: var(--kb-radius-control);
  background: var(--kb-fill);
  color: var(--kb-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.kb-event-bookmark-form {
  flex: none;
  width: 44px;
  margin: 0;
}

.kb-event-bookmark-button,
.kb-event-share-button {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kb-border-muted);
  border-radius: var(--kb-radius-control);
  background: var(--kb-surface);
  color: var(--kb-primary);
  text-decoration: none;
}

.kb-event-share-button {
  flex: none;
}

.kb-event-share-button[disabled] {
  opacity: 0.6;
}

.kb-event-share-status {
  margin: 8px 0 0;
  color: var(--kb-body);
  font-size: 12px;
  line-height: 16px;
}

.kb-event-bookmark-button.is-saved {
  border-color: color-mix(in srgb, var(--kb-primary) 34%, var(--kb-border-muted));
  background: var(--kb-primary-tint);
}

.kb-event-bookmark-button .material-symbols-outlined,
.kb-event-share-button .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: "FILL" 0, "wght" 600;
}

.kb-event-bookmark-button.is-saved .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 600;
}

.kb-event-bookmark-button:active,
.kb-event-share-button:active {
  transform: scale(0.98);
}

.kb-event-bookmark-button:focus-visible,
.kb-event-share-button:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-event-gallery {
  display: grid;
  grid-auto-columns: minmax(112px, 34%);
  grid-auto-flow: column;
  gap: 8px;
  margin: 12px 16px 0;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.kb-event-gallery::-webkit-scrollbar {
  display: none;
}

.kb-event-gallery__item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--kb-border);
  border-radius: 12px;
  background: var(--kb-fill);
  cursor: zoom-in;
}

.kb-event-gallery__item:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-event-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kb-event-image-viewer[hidden] {
  display: none;
}

.kb-event-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 56px 16px 28px;
  background: rgba(0, 0, 0, 0.82);
}

.kb-event-image-viewer__image {
  display: block;
  width: min(100%, 980px);
  max-height: 82vh;
  border-radius: 12px;
  background: var(--kb-ink);
  object-fit: contain;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.kb-event-image-viewer__close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--kb-ink);
  box-shadow: var(--kb-shadow-card);
}

.kb-event-image-viewer__close:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-event-image-viewer__close .material-symbols-outlined {
  font-size: 22px;
}

.kb-event-image-viewer-lock {
  overflow: hidden;
}

/* Post photo carousel — swipeable track with chevron controls. */
.kb-photo-carousel {
  position: relative;
}

.kb-photo-track {
  display: flex;
  overflow-x: auto;
  border-radius: 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.kb-photo-track::-webkit-scrollbar {
  display: none;
}

.kb-photo-slide {
  flex: 0 0 100%;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  cursor: zoom-in;
}

.kb-photo-slide:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: -2px;
}

.kb-photo-slide__image {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.kb-photo-chevron {
  position: absolute;
  top: 50%;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--kb-ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity 120ms ease;
}

.kb-photo-chevron[disabled] {
  opacity: 0;
  pointer-events: none;
}

.kb-photo-chevron--previous {
  left: 8px;
}

.kb-photo-chevron--next {
  right: 8px;
}

.kb-photo-chevron .material-symbols-outlined {
  font-size: 22px;
}

.kb-photo-chevron:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-photo-counter {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}

.kb-photo-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.kb-photo-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--kb-border);
  transition: background 120ms ease, transform 120ms ease;
}

.kb-photo-dot.is-active {
  background: var(--kb-caption);
  transform: scale(1.25);
}

.kb-photo-dot:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-photo-lightbox[hidden] {
  display: none;
}

.kb-photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.92);
}

.kb-photo-lightbox__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.kb-photo-lightbox__track::-webkit-scrollbar {
  display: none;
}

.kb-photo-lightbox__slide {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  padding: max(56px, calc(16px + env(safe-area-inset-top))) 16px
    max(28px, calc(16px + env(safe-area-inset-bottom)));
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.kb-photo-lightbox__image {
  display: block;
  width: min(100%, 980px);
  max-height: 82vh;
  border-radius: 12px;
  object-fit: contain;
}

.kb-photo-lightbox__close {
  position: absolute;
  z-index: 1;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--kb-ink);
  box-shadow: var(--kb-shadow-card);
}

.kb-photo-lightbox__close:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-photo-lightbox__close .material-symbols-outlined {
  font-size: 22px;
}

.kb-photo-chevron--lightbox {
  width: 40px;
  height: 40px;
}

.kb-photo-counter--lightbox {
  top: max(24px, calc(env(safe-area-inset-top) + 8px));
  right: auto;
  left: 16px;
}

.kb-photo-lightbox-lock {
  overflow: hidden;
}

.kb-event-facts {
  display: grid;
  gap: 12px;
  margin: 16px 16px 0;
  padding: 16px;
  border: 1px solid var(--kb-border);
  border-radius: 12px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-event-fact-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px;
  align-items: start;
  color: var(--kb-ink);
  font-size: 14px;
  line-height: 20px;
}

.kb-event-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.kb-event-fact-row > :is(.material-symbols-outlined, .kb-event-icon) {
  padding-top: 1px;
  color: var(--kb-caption);
  font-size: 18px;
}

.kb-event-fact-row__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.kb-event-fact-row__text small {
  color: var(--kb-caption);
  font-size: 11px;
  line-height: 15px;
}

.kb-event-entry-details {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.kb-event-entry-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.kb-event-entry-details > small {
  color: var(--kb-caption);
  font-size: 11px;
  line-height: 15px;
}

.kb-event-entry-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kb-event-entry-list li {
  padding: 8px 0;
  border-top: 1px solid var(--kb-border);
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.kb-event-entry-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.kb-event-entry-list li:last-child {
  padding-bottom: 0;
}

.kb-event-interest-form {
  margin: 8px 0 0;
}

.kb-event-interest-cta {
  min-height: 43px;
  border-radius: 8px;
  font-size: 14px;
}

.kb-event-interest-cta :is(.material-symbols-outlined, .kb-event-icon) {
  color: currentColor;
  font-size: 18px;
}

.kb-event-interest-hint {
  margin: -2px 0 0;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-event-interest-link {
  width: fit-content;
  color: var(--kb-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-decoration: none;
}

.kb-event-sign-in {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--kb-fill);
}

.kb-event-sign-in p,
.kb-event-state-note {
  margin: 0;
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
}

.kb-event-suspension-banner {
  margin: 16px 16px 0;
}

.kb-event-groups-going {
  margin: 16px 16px 0;
  padding: 16px;
  border: 1px solid var(--kb-border);
  border-radius: 12px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-event-groups-going__heading {
  margin: 0 0 12px;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.kb-event-groups-going__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kb-event-groups-going__card {
  display: block;
  padding: 12px;
  border-radius: 8px;
  background: var(--kb-fill);
  color: inherit;
  text-decoration: none;
}

.kb-event-groups-going__card:active {
  background: #eeeff1;
}

.kb-event-groups-going__title {
  margin: 0 0 4px;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}

.kb-event-groups-going__meta {
  margin: 0 0 8px;
  color: var(--kb-caption);
  font-size: 13px;
  line-height: 18px;
}

.kb-event-groups-going__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.kb-event-groups-going__badge {
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--kb-surface);
  color: var(--kb-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.kb-event-groups-going__avatar {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  object-fit: cover;
}

.kb-event-groups-going__host {
  color: var(--kb-body);
  font-size: 12px;
  line-height: 16px;
}

.kb-event-groups-going__note {
  margin: 0;
  color: var(--kb-caption);
  font-size: 13px;
  line-height: 18px;
}

.kb-event-chooser__backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1);
}

.kb-event-chooser__sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  flex-direction: column;
  max-width: 430px;
  max-height: 80vh;
  margin: 0 auto;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--kb-surface);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--kb-shadow-float);
  transform: translateY(40px);
  opacity: 0;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1), opacity 250ms cubic-bezier(0, 0, 0.2, 1);
  overflow-y: auto;
}

.kb-event-chooser--open .kb-event-chooser__backdrop {
  opacity: 1;
}

.kb-event-chooser--open .kb-event-chooser__sheet {
  transform: translateY(0);
  opacity: 1;
}

.kb-event-chooser__handle {
  width: 36px;
  height: 4px;
  margin: 8px auto 12px;
  border-radius: 9999px;
  background: var(--kb-border);
}

.kb-event-chooser__title {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 700;
  color: var(--kb-ink);
}

.kb-event-chooser__sub {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--kb-caption);
}

.kb-event-chooser__attendance-note {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--kb-caption);
}

.kb-event-chooser__rows {
  display: flex;
  flex-direction: column;
  margin: 0 -16px;
}

.kb-event-chooser__row-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border-top: 1px solid var(--kb-border-subtle);
  color: var(--kb-ink);
  text-decoration: none;
}

.kb-event-chooser__row-link:first-child {
  border-top: 0;
}

.kb-event-chooser__row-link:active {
  background: var(--kb-fill);
}

.kb-event-chooser__row-link:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-event-chooser__row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kb-event-chooser__row-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.kb-event-chooser__row-hint {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--kb-caption);
}

.kb-event-chooser__chevron {
  flex-shrink: 0;
  color: var(--kb-caption);
}

.kb-event-description {
  display: grid;
  gap: 8px;
  margin: 16px 16px 0;
  padding: 16px;
  border: 1px solid var(--kb-border);
  border-radius: 12px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-event-description__eyebrow {
  color: var(--kb-caption) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 15px !important;
  text-transform: uppercase;
}

.kb-event-description__content {
  display: grid;
  gap: 8px;
}

.kb-event-description__text,
.kb-event-description__translation,
.kb-event-description__content :where(p, li, blockquote, pre, h1, h2, h3) {
  margin: 0;
  color: var(--kb-ink);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  word-break: keep-all;
}

.kb-event-description__content :where(ul, ol) {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
}

.kb-event-description__content a {
  color: var(--kb-primary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.kb-event-description__content :where(strong, b) {
  font-weight: 700;
}

.kb-event-description__content blockquote {
  padding-left: 12px;
  border-left: 3px solid var(--kb-border);
  color: var(--kb-body);
}

.kb-event-description__content pre {
  padding: 12px;
  border-radius: 8px;
  background: var(--kb-fill);
  color: var(--kb-body);
  white-space: pre-wrap;
}

.kb-event-description__text--note {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--kb-primary-tint);
  color: var(--kb-body);
  font-size: 13px;
  line-height: 20px;
}

.kb-event-description__translation {
  padding-top: 8px;
  border-top: 1px solid var(--kb-divider-subtle);
  color: var(--kb-body) !important;
}

.kb-event-buddy-card {
  margin: 16px 16px 0;
  padding: 16px;
  border: 1px solid var(--kb-border);
  border-radius: 12px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-event-buddy-card__eyebrow {
  margin: 0;
  color: var(--kb-caption);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-transform: uppercase;
}

.kb-event-buddy-card h2 {
  margin: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.kb-event-buddy-card--entry h2 {
  width: auto;
  height: auto;
  margin-top: 8px;
  clip: auto;
  color: var(--kb-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  white-space: normal;
}

.kb-event-buddy-card--entry > .kb-event-interest-cta {
  margin-top: 12px;
}

.kb-event-buddy-card__body {
  margin: 11px 0 0;
  color: var(--kb-body);
  font-size: 13px;
  line-height: 20px;
}

.kb-event-buddy-card__cta {
  margin-top: 13px;
  min-height: 46px;
  border-radius: 10px;
}

.kb-event-request-form {
  margin: 0;
}

.kb-event-request-form .dui-btn {
  min-height: 46px;
  border-radius: 10px;
}

.kb-event-buddy-status-tabs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kb-event-buddy-status-tabs::-webkit-scrollbar {
  display: none;
}

.kb-event-buddy-status-tabs__tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 9999px;
  background: var(--kb-surface);
  color: var(--kb-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  text-decoration: none;
}

.kb-event-buddy-status-tabs__tab span:last-child {
  opacity: 0.65;
}

.kb-event-buddy-status-tabs__tab--active {
  border-color: var(--kb-ink);
  background: var(--kb-ink);
  color: var(--kb-surface);
}

.kb-event-buddy-list {
  display: grid;
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid var(--kb-border);
}

.kb-event-buddy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  padding: 16px 0;
}

.kb-event-buddy-row + .kb-event-buddy-row {
  border-top: 1px solid var(--kb-border);
}

.kb-event-buddy-profile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.kb-event-buddy-profile__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.kb-event-buddy-profile__name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  color: var(--kb-ink);
  font-size: 14px;
  line-height: 19px;
}

.kb-event-buddy-profile__name h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}

.kb-event-buddy-profile__name .material-symbols-outlined {
  flex: none;
  color: var(--kb-verified);
  font-size: 16px;
}

.kb-event-buddy-profile__meta {
  overflow: hidden;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
  display: -webkit-box;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.kb-event-buddy-actions {
  display: grid;
  gap: 8px;
  justify-self: end;
  min-width: 160px;
}

.kb-event-buddy-actions p {
  margin: 0;
  color: var(--kb-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

.kb-event-buddy-actions--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 260px;
}

.kb-event-buddy-actions .dui-btn-sm {
  min-height: 42px;
}

.kb-event-buddy-row > .dui-btn,
.kb-event-request-form {
  justify-self: end;
}

.kb-event-request-form .dui-btn-block {
  width: auto;
  min-width: 172px;
  padding-inline: 16px;
  white-space: nowrap;
}

.kb-event-review-note {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-event-buddy-row > .kb-event-state-note {
  grid-column: 1 / -1;
}

.kb-event-match-note {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--kb-fill);
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
}

.kb-event-buddy-actions form,
.kb-event-request-form,
.kb-event-review-actions form {
  min-width: 0;
}

.kb-event-review-actions {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--kb-border);
}

.kb-event-review-actions p {
  margin: 0;
  color: var(--kb-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

.kb-event-review-actions > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

/* Event buddies — Saii Flow refresh (event_buddies#show only) */
.kb-event-detail-title {
  color: var(--kb-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
}

.kb-event-buddy-entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0;
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
}

.kb-event-buddy-entry__meta .material-symbols-outlined {
  font-size: 16px;
  color: var(--kb-caption);
}

.kb-event-buddy-entry__meta-sep {
  color: var(--kb-border-muted);
}

.kb-event-buddy-entry__link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  color: var(--kb-info);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-decoration: none;
}

.kb-event-buddy-entry__link .material-symbols-outlined {
  font-size: 16px;
}

.kb-event-queue-gate,
.kb-event-queue-status {
  margin: 12px 16px 0;
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius-card);
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-event-queue-gate {
  padding: 16px;
}

.kb-event-queue-gate__text {
  margin: 0 0 12px;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 20px;
}

.kb-event-queue-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}

.kb-event-queue-status__icon {
  flex: none;
  font-size: 20px;
  color: var(--kb-positive);
  font-variation-settings: 'FILL' 1;
}

.kb-event-queue-status__copy {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.kb-event-queue-status__title {
  margin: 0;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}

.kb-event-queue-status__sub {
  margin: 0;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-event-queue-status__leave-form {
  flex: none;
  margin: 0;
}

.kb-event-queue-status__leave {
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--kb-caption);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  cursor: pointer;
}

.kb-event-queue-status__leave:active {
  color: var(--kb-body);
}

.kb-event-buddy-interested {
  margin: 20px 16px 0;
}

.kb-event-buddy-interested__eyebrow {
  margin: 0;
  color: var(--kb-caption);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 15px;
  text-transform: uppercase;
}

.kb-event-buddy-panel {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius-card);
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-event-buddy-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}

.kb-event-buddy-item + .kb-event-buddy-item {
  border-top: 1px solid var(--kb-divider-subtle);
}

.kb-event-buddy-item__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kb-event-buddy-item .kb-event-buddy-profile {
  flex: 1;
  min-width: 0;
}

.kb-event-buddy-item__top .dui-btn,
.kb-event-buddy-ask-form,
.kb-event-buddy-sent {
  flex: none;
}

.kb-event-buddy-ask-form {
  margin: 0;
}

.kb-event-buddy-action-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
}

.kb-event-buddy-sent {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-event-buddy-sent form {
  margin: 0;
}

.kb-event-buddy-sent__cancel {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kb-body);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.kb-event-buddy-received {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kb-event-buddy-received__note {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--kb-fill);
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
}

.kb-event-buddy-received__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.kb-event-buddy-received__actions form {
  margin: 0;
}

.kb-event-buddy-panel__note {
  margin: 0;
  padding: 24px 16px;
  color: var(--kb-caption);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.kb-event-buddy-footnote {
  margin: 12px 4px 0;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-event-buddy-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 32px 24px;
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius-card);
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
  text-align: center;
}

.kb-event-buddy-empty__icon {
  display: flex;
  height: 56px;
  width: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--kb-primary-tint);
}

.kb-event-buddy-empty__icon .material-symbols-outlined {
  font-size: 26px;
  color: var(--kb-primary);
}

.kb-event-buddy-empty__title {
  margin: 0;
  color: var(--kb-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.kb-event-buddy-empty__text {
  margin: 0;
  max-width: 260px;
  color: var(--kb-caption);
  font-size: 13px;
  line-height: 18px;
}

@media (min-width: 480px) {
  .kb-event-detail-main {
    padding: 16px 0 40px;
  }

  .kb-event-hero {
    min-height: 220px;
  }

  .kb-event-detail-nav,
  .kb-event-hero,
  .kb-event-primary-actions,
  .kb-event-suspension-banner,
  .kb-event-facts,
  .kb-event-buddy-card,
  .kb-event-queue-gate,
  .kb-event-queue-status,
  .kb-event-buddy-interested,
  .kb-event-description,
  .kb-event-gallery,
  .kb-event-groups-going {
    margin-right: 24px;
    margin-left: 24px;
  }
}

/* Chips */
.kb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9999px;
  background: var(--kb-fill);
  color: var(--kb-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.kb-chip--selected { background: var(--kb-ink); color: #fff; }
.kb-chip--brand { background: var(--kb-primary-tint); color: var(--kb-primary); }
.kb-chip--korean { background: var(--kb-korean); color: var(--kb-ink); }
.kb-chip--international { background: var(--kb-international); color: var(--kb-ink); }

/* Radio pill — visual selected state for sr-only radios inside <label>.
   Lets the user see which option is checked without a re-render. */
.kb-radio-pill:has(:checked) {
  background: var(--kb-primary-tint) !important;
  border-color: var(--kb-primary) !important;
  color: var(--kb-primary) !important;
}

/* Avatars */
.kb-avatar {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--kb-fill);
  color: var(--kb-primary);
  font-weight: 700;
  overflow: visible;
}
.kb-avatar img {
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  object-fit: cover;
}
.kb-avatar--sm { height: 40px; width: 40px; font-size: 14px; }
.kb-avatar--md { height: 56px; width: 56px; font-size: 18px; }
.kb-avatar--lg { height: 96px; width: 96px; font-size: 28px; }
.kb-avatar--xl { height: 128px; width: 128px; font-size: 36px; }
.kb-avatar__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  height: 24px;
  width: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 2px solid var(--kb-surface);
  background: var(--kb-primary);
  color: #fff;
}
.kb-avatar__badge--verified { background: var(--kb-verified); }

/* Segmented tabs (two-up) */
.kb-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--kb-fill);
}
.kb-segmented__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--kb-caption);
  text-decoration: none;
}
.kb-segmented__item[aria-current="page"],
.kb-segmented__item[aria-selected="true"] {
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-weight: 700;
  box-shadow: var(--kb-shadow-card);
}

.kb-messages-hub {
  min-height: 100vh;
  min-height: 100dvh;
  /* The persistent bottom tab bar owns the home-indicator inset here. */
  padding: 16px;
  background: var(--kb-background);
  color: var(--kb-ink);
}

.kb-messages-hub__shell {
  display: flex;
  width: 100%;
  max-width: 390px;
  min-height: calc(100dvh - 32px);
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
}

.kb-messages-hub__inbox {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 20px;
}

.kb-messages-hub__header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  min-height: 56px;
  padding-top: 2px;
}

/* Hotwire Native hides the native nav bar on /messages, so this web header IS
   the top bar — pin it in place. We use a full-height flex layout with the
   inbox as the sole scroll region, which is more reliable on iOS WKWebView
   than position:sticky (WKWebView fast-path scrolling can skip sticky
   repaints during momentum scroll). */
.hotwire-native .kb-messages-hub {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - env(safe-area-inset-top));
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.hotwire-native .kb-messages-hub__shell {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  gap: 0;
}

.hotwire-native .kb-messages-hub__header {
  position: relative;
  z-index: 30;
  flex: none;
  min-height: 56px;
  padding-top: 2px;
  margin-top: 16px;
  background: var(--kb-background);
}

.hotwire-native .kb-messages-hub__inbox {
  flex: 1;
  min-height: 0;
  margin-top: 20px;
}

/* Web (non-hotwire-native) inbox: mirror the native app shell so the title bar
   stays fixed and only the inbox (tabs + conversation list) scrolls, instead of
   the whole document scrolling. These rules are unqualified (specificity 0,1,0)
   so the .hotwire-native block above (0,2,0) still wins in the native shell. The
   fixed bottom tab bar reserves 96px via body.pb-24, so size the shell to the
   viewport minus that band to keep the document from scrolling. */
.kb-messages-hub {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 96px);
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.kb-messages-hub__shell {
  flex: 1;
  min-height: 0;
  gap: 0;
}

.kb-messages-hub__header {
  position: relative;
  z-index: 30;
  flex: none;
  background: var(--kb-background);
}

.kb-messages-hub__inbox {
  flex: 1;
  min-height: 0;
}

.kb-messages-hub__header h1 {
  margin: 0;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.kb-messages-hub__profile-link {
  width: 48px;
  height: 48px;
}

.kb-messages-hub__profile-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: inherit;
  text-decoration: none;
}

.kb-messages-hub__profile-link:focus-visible {
  border-radius: 8px;
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-messages-hub__profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--kb-fill);
  color: var(--kb-primary);
  font-size: 13px;
  line-height: 1;
}

.kb-messages-hub__profile-avatar img {
  border-radius: 8px;
}

/* Conversation view (messages/:id). Hotwire Native hides the native nav bar on
   this route, so the web header, trust sub-banner, and message composer own the
   full safe-area edges (requires viewport-fit=cover on the viewport meta). */
.kb-conversation-composer {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Conversation app shell: lock the screen to the dynamic viewport height so the
   header and composer stay fixed and only the message list scrolls. The body
   reserves the top safe-area inset via padding-top (kb-safe-area-top), so
   subtract it here to keep the shell inside the viewport and stop the whole
   document from scrolling. On the web (no safe area) env() resolves to 0. */
.kb-conversation-shell {
  height: calc(100dvh - env(safe-area-inset-top));
}

.kb-conversation-prompts {
  display: grid;
  gap: 8px;
  padding: 12px 16px 0;
}

.kb-conversation-prompts__label {
  margin: 0;
  color: var(--kb-caption);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
}

.kb-conversation-prompts__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.kb-conversation-prompts__list::-webkit-scrollbar {
  display: none;
}

.kb-conversation-prompts__item {
  flex: 0 0 auto;
  max-width: min(78vw, 320px);
  overflow: hidden;
  border: 1px solid var(--kb-border-muted);
  border-radius: 8px;
  background: var(--kb-surface);
}

.kb-conversation-prompts__choice {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--kb-ink);
  text-align: left;
}

.kb-conversation-prompts__primary,
.kb-conversation-prompts__translation {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-conversation-prompts__primary {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.kb-conversation-prompts__translation {
  margin-top: 2px;
  color: var(--kb-caption);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

.kb-conversation-prompts__choice:active {
  background: var(--kb-fill);
}

.kb-conversation-prompts__choice:focus-visible,
.kb-conversation-prompts__feedback button:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-conversation-prompts__feedback {
  display: flex;
  border-top: 1px solid var(--kb-border);
}

.kb-conversation-prompts__feedback button {
  min-height: 40px;
  flex: 1 1 0;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--kb-caption);
  font-size: 11px;
  font-weight: 600;
}

.kb-conversation-prompts__feedback button + button {
  border-left: 1px solid var(--kb-border);
}

.kb-conversation-prompts__item[data-prompt-helpful="true"] .kb-conversation-prompts__feedback button:first-child {
  background: var(--kb-fill);
  color: var(--kb-ink);
}

/* The compact press recorder stays inside the composer. Tap/locked/review
   states become a focused sheet, which owns its fixed bottom safe-area inset. */
.kb-voice-composer__primary,
.kb-voice-control,
.kb-voice-review__continue,
.kb-voice-bubble button {
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-voice-composer__primary:hover,
.kb-voice-composer__primary:active,
.kb-voice-control--primary:hover,
.kb-voice-control--primary:active {
  background: var(--kb-primary-pressed) !important;
}

.kb-voice-composer button:focus-visible,
.kb-voice-bubble button:focus-visible,
.kb-voice-waveform__seek:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-voice-control {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
}

.kb-voice-control--neutral {
  background: var(--kb-fill);
  color: var(--kb-ink);
}

.kb-voice-control--neutral:hover,
.kb-voice-control--neutral:active {
  background: var(--kb-border-muted);
}

.kb-voice-control--primary {
  background: var(--kb-primary);
  color: var(--kb-on-primary);
}

.kb-voice-control--large {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
}

/* application.css loads after tailwind.css, so `.kb-voice-control`'s display
   would otherwise beat the `hidden` utility the recorder toggles at runtime. */
.kb-voice-control.hidden {
  display: none;
}

.kb-voice-control:disabled,
.kb-voice-review__continue:disabled {
  cursor: wait;
  opacity: 0.55;
}

body.kb-voice-sheet-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.kb-voice-composer[data-voice-recorder-mode="locked"]::before,
.kb-voice-composer[data-voice-recorder-state="review"]::before {
  content: "";
  position: fixed;
  z-index: 40;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: kb-voice-backdrop-enter 250ms cubic-bezier(0, 0, 0.2, 1);
}

.kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-recorder,
.kb-voice-review {
  position: fixed;
  z-index: 50;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--kb-surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  color: var(--kb-ink);
  animation: kb-voice-sheet-enter 250ms cubic-bezier(0, 0, 0.2, 1);
}

.kb-voice-sheet__chrome {
  display: none;
  text-align: center;
}

.kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-sheet__chrome,
.kb-voice-review .kb-voice-sheet__chrome {
  display: block;
}

.kb-voice-sheet__handle {
  width: 36px;
  height: 4px;
  margin: 0 auto;
  border-radius: 9999px;
  background: var(--kb-border-muted);
}

.kb-voice-sheet__chrome h2 {
  margin: 20px 0 0;
  color: var(--kb-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.kb-voice-sheet__chrome p {
  margin: 4px 0 0;
  color: var(--kb-caption);
  font-size: 13px;
  line-height: 18px;
}

.kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-recorder__content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
}

.kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-recorder__capture {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  min-height: 80px;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--kb-fill);
}

.kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-recorder__capture > div:first-child {
  display: contents;
}

.kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-recorder__capture [data-voice-message-recorder-target="recordingTime"] {
  order: 2;
  min-width: 48px;
  font-size: 18px;
  line-height: 24px;
  text-align: right;
}

.kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-recorder__capture [data-voice-message-recorder-target="gestureHint"] {
  display: none;
}

.kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-recorder__capture .kb-voice-level {
  order: 1;
  flex: 1;
  height: 40px;
  margin-top: 0;
  color: var(--kb-ink);
}

.kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-recorder__cancel {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  margin-top: 24px;
}

.kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-recorder__locked {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  margin-top: 24px;
}

.kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-control,
.kb-voice-review .kb-voice-control {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}

.kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-control--large,
.kb-voice-review .kb-voice-control--large {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
}

.kb-voice-level,
.kb-voice-waveform__bars {
  display: flex;
  height: 28px;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  overflow: hidden;
}

.kb-voice-level span,
.kb-voice-waveform__bars span {
  display: block;
  width: 2px;
  min-width: 2px;
  height: calc(4px + (20px * var(--kb-wave-peak, 0.2)));
  border-radius: 2px;
  background: currentColor;
}

.kb-voice-level {
  color: var(--kb-primary);
}

.kb-voice-waveform {
  position: relative;
  min-width: 64px;
  min-height: 44px;
  color: var(--kb-caption);
}

.kb-voice-waveform__bars {
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
}

.kb-voice-waveform__seek {
  --kb-seek-progress: 0%;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.kb-voice-waveform__seek::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, currentColor 0 var(--kb-seek-progress), color-mix(in srgb, currentColor 24%, transparent) var(--kb-seek-progress) 100%);
}

.kb-voice-waveform__seek::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, currentColor 24%, transparent);
}

.kb-voice-waveform__seek::-moz-range-progress {
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.kb-voice-waveform__seek::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -5px;
  appearance: none;
  border: 2px solid currentColor;
  border-radius: 9999px;
  background: var(--kb-surface);
}

.kb-voice-waveform__seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 9999px;
  background: var(--kb-surface);
}

.kb-voice-waveform--bubble {
  min-width: 0;
  min-height: 28px;
  height: 28px;
  color: var(--kb-caption);
}

.kb-voice-waveform--bubble .kb-voice-waveform__bars {
  top: 0;
  bottom: 0;
}

.kb-voice-waveform--bubble .kb-voice-waveform__bars span {
  height: calc(3px + (17px * var(--kb-wave-peak, 0.2)));
  border-radius: 9999px;
}

.kb-voice-waveform--bubble .kb-voice-waveform__bars--played {
  color: var(--kb-primary);
  clip-path: inset(0 calc(100% - var(--kb-seek-progress, 0%)) 0 0);
}

.kb-voice-waveform--bubble .kb-voice-waveform__seek {
  height: 100%;
}

/* The ticks are the affordance; the native track would draw a line across them. */
.kb-voice-waveform--bubble .kb-voice-waveform__seek::-webkit-slider-runnable-track {
  background: transparent;
}

.kb-voice-waveform--bubble .kb-voice-waveform__seek::-moz-range-track,
.kb-voice-waveform--bubble .kb-voice-waveform__seek::-moz-range-progress {
  background: transparent;
}

.kb-voice-waveform--bubble .kb-voice-waveform__seek::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -9px;
  border: 0;
  background: transparent;
}

.kb-voice-waveform--bubble .kb-voice-waveform__seek::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
}

.kb-voice-review__continue {
  min-height: 52px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--kb-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.kb-voice-review__continue:hover,
.kb-voice-review__continue:active {
  background: var(--kb-fill);
}

.kb-voice-review__notice {
  color: var(--kb-caption) !important;
}

/* Mirrors the locked recorder capture strip so the sheet does not shift
   between recording and review. */
.kb-voice-review__preview {
  display: flex;
  min-height: 80px;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--kb-fill);
}

.kb-voice-review__preview .kb-voice-waveform {
  color: var(--kb-ink);
}

.kb-voice-review__time {
  display: flex;
  min-width: 48px;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}

.kb-voice-review__time > span:first-child {
  color: var(--kb-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.kb-voice-review__time > span:last-child {
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-voice-review__message {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

/* Same three-column rhythm as the locked recorder controls: discard sits where
   cancel sat, and send lands on the stop button's centre. */
.kb-voice-review__actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding-top: 24px;
}

.kb-voice-review__discard {
  justify-self: start;
}

.kb-voice-review__transport {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 12px;
}

.kb-voice-review__continue {
  justify-self: end;
}

.kb-voice-control--uploading svg {
  display: none;
}

.kb-voice-control--uploading::after {
  content: "";
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: kb-voice-spin 750ms linear infinite;
}

.kb-voice-bubble {
  display: flex;
  width: min(85%, 360px);
  min-width: min(180px, 85%);
  min-height: 56px;
  flex-direction: column;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--kb-border);
  border-radius: 16px;
  background: var(--kb-surface);
  color: var(--kb-ink);
}

.kb-voice-bubble__play {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: var(--kb-fill);
  color: var(--kb-ink);
}

.kb-voice-bubble__play:active {
  background: var(--kb-border-muted);
}

.kb-voice-bubble__time {
  flex: 0 0 auto;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  font-variant-numeric: tabular-nums;
}

.kb-voice-bubble__unheard {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 9999px;
  background: var(--kb-primary);
}

.kb-voice-bubble__spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: kb-voice-spin 750ms linear infinite;
}

@keyframes kb-voice-spin {
  to { transform: rotate(360deg); }
}

@keyframes kb-voice-backdrop-enter {
  from { opacity: 0; }
}

@keyframes kb-voice-sheet-enter {
  from { transform: translateY(40px); opacity: 0; }
}

@media (min-width: 641px) {
  .kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-recorder,
  .kb-voice-review {
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    border-radius: 20px;
  }
}

@media (max-width: 380px) {
  .kb-voice-review__continue {
    min-width: 0;
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-voice-composer__primary,
  .kb-voice-control,
  .kb-voice-review__continue,
  .kb-voice-bubble button {
    transition: none;
  }

  .kb-voice-bubble__spinner {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.55;
  }

  .kb-voice-composer[data-voice-recorder-mode="locked"]::before,
  .kb-voice-composer[data-voice-recorder-state="review"]::before,
  .kb-voice-composer[data-voice-recorder-mode="locked"] .kb-voice-recorder,
  .kb-voice-review,
  .kb-voice-control--uploading::after {
    animation: none;
  }
}

.hotwire-native .kb-conversation-header {
  top: env(safe-area-inset-top);
}

.hotwire-native .kb-conversation-subbanner {
  top: calc(57px + env(safe-area-inset-top));
}

.kb-message-primary-tabs {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--kb-border-subtle);
  border-radius: 12px;
  background: var(--kb-fill);
}

.kb-message-primary-tabs__item {
  display: inline-flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--kb-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  text-decoration: none;
}

.kb-message-primary-tabs__item[aria-current="page"] {
  border-color: var(--kb-caption);
  background: var(--kb-surface);
  color: var(--kb-ink);
  box-shadow: var(--kb-shadow-card);
}

.kb-message-primary-tabs__item:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-message-primary-tabs__count {
  display: inline-flex;
  min-width: 24px;
  height: 20px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 9999px;
  background: var(--kb-primary-tint);
  color: var(--kb-primary-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.kb-message-primary-tabs__item[aria-current="page"] .kb-message-primary-tabs__count {
  background: var(--kb-primary);
  color: var(--kb-on-primary);
}

.kb-message-filter-tabs {
  flex: none;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 4px;
  scrollbar-width: none;
}

.kb-message-filter-tabs::-webkit-scrollbar {
  display: none;
}

.kb-message-filter-tabs__item {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 14px;
  border: 1px solid var(--kb-caption);
  border-radius: 10px;
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  text-decoration: none;
  white-space: nowrap;
}

.kb-message-filter-tabs__item[aria-current="page"] {
  border-color: var(--kb-primary-strong);
  background: var(--kb-primary-tint);
  color: var(--kb-primary-strong);
}

.kb-message-filter-tabs__item:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-message-filter-tabs__icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
}

.kb-message-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* In the native shell the bottom tab bar overlaps the inbox, so reserve space
   for it inside the scroll region so the last row stays reachable. */
.hotwire-native .kb-message-section {
  padding-bottom: 96px;
}

.kb-message-section__label {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  color: var(--kb-body);
  background: var(--kb-background);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-transform: uppercase;
}

.kb-message-section__stack {
  display: grid;
  gap: 12px;
}

.kb-outing-invitation-picker {
  height: 100vh;
  height: 100dvh;
}

body.hotwire-native.kb-safe-area-top .kb-outing-invitation-picker {
  height: calc(100dvh - env(safe-area-inset-top));
}

/* The body has already consumed the native top inset. Keep this sticky bar at
   the top of its own, height-adjusted picker scrollport instead of adding the
   global sticky-header inset a second time. */
body.hotwire-native.kb-safe-area-top header.kb-outing-invitation-picker__header.sticky.top-0 {
  top: 0;
}

.kb-outing-invitation-picker__back {
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-outing-invitation-picker__back:active {
  background: var(--kb-fill);
}

.kb-outing-invitation-picker__description {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .kb-outing-invitation-picker__back:hover {
    background: var(--kb-fill);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-outing-invitation-picker__back {
    transition: none;
  }
}

.kb-outing-invitation-card {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--kb-border-subtle);
  border-radius: 12px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-outing-invitation-card__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.kb-outing-invitation-card__avatar {
  width: 48px;
  height: 48px;
  flex: none;
  background: var(--kb-fill);
  color: var(--kb-body);
  font-size: 14px;
}

.kb-outing-invitation-card__identity-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.kb-outing-invitation-card__identity-copy > strong {
  overflow-wrap: anywhere;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.kb-outing-invitation-card__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--kb-body);
  font-size: 12px;
  line-height: 16px;
}

.kb-outing-invitation-card__role,
.kb-outing-invitation-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kb-outing-invitation-card__role > span {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 9999px;
}

.kb-outing-invitation-card__role--korean > span {
  background: var(--kb-korean-strong);
}

.kb-outing-invitation-card__role--international > span {
  background: var(--kb-international-strong);
}

.kb-outing-invitation-card__verified > span {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--kb-verified);
  color: var(--kb-ink);
}

.kb-outing-invitation-card__verified svg {
  width: 14px;
  height: 14px;
}

.kb-outing-invitation-card__details {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--kb-border-subtle);
}

.kb-outing-invitation-card__details h3,
.kb-outing-invitation-card__details p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.kb-outing-invitation-card__details h3 {
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.kb-outing-invitation-card__details p {
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
}

.kb-outing-invitation-card__details .kb-outing-invitation-card__eyebrow {
  color: var(--kb-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-transform: uppercase;
}

.kb-outing-invitation-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.kb-outing-invitation-card__actions form,
.kb-outing-invitation-card__actions .dui-btn {
  min-width: 0;
}

.kb-request-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 14px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-request-card__intro {
  display: flex;
  min-width: 0;
  gap: 12px;
}

.kb-request-card__avatar {
  width: 48px;
  height: 48px;
  background: var(--kb-fill);
  color: var(--kb-primary);
  font-size: 14px;
}

.kb-request-card__content {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 4px;
}

.kb-request-card__meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}

.kb-request-card__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-request-card__verified {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--kb-verified);
}

.kb-request-card__verified svg {
  width: 15px;
  height: 15px;
}

.kb-request-card__role {
  display: inline-flex;
  min-height: 20px;
  flex: none;
  align-items: center;
  padding: 0 8px;
  border-radius: 9999px;
  color: var(--kb-ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
}

.kb-request-card__role--international {
  background: var(--kb-international);
}

.kb-request-card__role--korean {
  background: var(--kb-korean);
}

.kb-request-card__preview,
.kb-request-card__notice {
  margin: 0;
  color: var(--kb-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}

.kb-request-card__preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.kb-request-card__notice {
  color: var(--kb-body);
}

.kb-request-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.kb-request-card__actions .dui-btn {
  min-width: 0;
  padding-block: 8px;
  padding-inline: 12px;
  line-height: 1.2;
  white-space: normal;
}

.kb-message-list {
  margin-inline: -8px;
}

.kb-message-list__card,
.kb-message-list__empty {
  overflow: hidden;
  border: 1px solid var(--kb-border-subtle);
  border-radius: 14px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-message-list__row {
  display: grid;
  min-height: 76px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  color: inherit;
  text-decoration: none;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-message-list__row + .kb-message-list__row {
  border-top: 1px solid var(--kb-divider-subtle);
}

.kb-message-list__row:active {
  background: var(--kb-fill);
}

.kb-message-list__row:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: -2px;
}

.kb-message-list__avatar {
  width: 48px;
  height: 48px;
  background: var(--kb-fill);
  color: var(--kb-primary);
  font-size: 14px;
}

.kb-message-list__content {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.kb-message-list__headline,
.kb-message-list__body-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.kb-message-list__name {
  min-width: 0;
  overflow: hidden;
  color: var(--kb-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-message-list__time {
  flex: none;
  color: var(--kb-caption);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

.kb-message-list__preview {
  min-width: 0;
  overflow: hidden;
  color: var(--kb-body);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-message-list__unread {
  display: inline-flex;
  min-width: 28px;
  height: 20px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--kb-safety-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.kb-message-list__empty {
  padding: 16px;
}

.kb-message-list__empty p {
  margin: 0;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}

.kb-message-list__empty span {
  display: block;
  margin-top: 4px;
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
}

@media (min-width: 480px) {
  .kb-message-list {
    margin-inline: 0;
  }
}

/* Empty / inline states */
.kb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 16px;
  text-align: center;
}
.kb-empty__text { font-size: 14px; color: var(--kb-caption); }

/* Onboarding profile-photo capture */
.kb-onboarding-photo-screen {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-family: var(--kb-font);
}

.kb-onboarding-photo-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  padding: 48px 32px calc(24px + env(safe-area-inset-bottom));
  flex-direction: column;
}

.kb-onboarding-photo-progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--kb-fill);
}

.kb-onboarding-photo-progress > div {
  height: 100%;
  border-radius: inherit;
  background: var(--kb-primary);
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-onboarding-photo-header {
  margin-top: 96px;
  margin-bottom: 56px;
}

.kb-onboarding-photo-header h1 {
  margin: 0;
  color: var(--kb-ink);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0;
}

.kb-onboarding-photo-header p {
  margin: 24px 0 0;
  color: var(--kb-caption);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}

.kb-onboarding-photo-error {
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--kb-safety);
  border-radius: 12px;
  background: var(--kb-safety);
  color: var(--kb-safety-deep);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.kb-onboarding-photo-form {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.kb-onboarding-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 12px;
}

.kb-onboarding-photo-slot {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  min-width: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
  background: var(--kb-border-muted);
}

.kb-onboarding-photo-slot--primary {
  grid-column: span 2;
  grid-row: span 2;
}

.kb-onboarding-photo-slot img {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.kb-onboarding-photo-placeholder {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: var(--kb-surface);
}

.kb-onboarding-photo-placeholder .material-symbols-outlined {
  font-size: 56px;
  font-variation-settings: "wght" 300;
}

.kb-onboarding-photo-slot:not(.kb-onboarding-photo-slot--primary) .kb-onboarding-photo-placeholder .material-symbols-outlined {
  font-size: 44px;
}

.kb-onboarding-photo-warning {
  margin: 24px 0 0;
  color: var(--kb-caption);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}

.kb-onboarding-photo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: auto;
  padding-top: 28px;
}

.kb-onboarding-photo-actions__previous,
.kb-onboarding-photo-actions__next {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
}

.kb-onboarding-photo-actions__previous {
  border: 1px solid var(--kb-border-muted);
  background: var(--kb-surface);
  color: var(--kb-ink);
}

.kb-onboarding-photo-actions__next {
  border: 1px solid transparent;
  background: var(--kb-primary);
  color: var(--kb-on-primary);
}

.kb-onboarding-photo-actions__next:disabled {
  background: var(--kb-fill);
  color: #d1d3d8;
  cursor: default;
}

@media (max-width: 380px) {
  .kb-onboarding-photo-shell {
    padding-right: 24px;
    padding-left: 24px;
  }

  .kb-onboarding-photo-header {
    margin-top: 72px;
    margin-bottom: 48px;
  }

  .kb-onboarding-photo-header h1 {
    font-size: 38px;
  }

  .kb-onboarding-photo-actions {
    gap: 12px;
  }
}

@media (max-width: 430px) {
  .kb-event-buddy-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .kb-event-buddy-row > .dui-btn,
  .kb-event-buddy-actions,
  .kb-event-request-form {
    justify-self: stretch;
    min-width: 0;
  }

  .kb-event-buddy-actions--split {
    min-width: 0;
  }

  .kb-event-request-form .dui-btn-block {
    width: 100%;
  }
}

.kb-profile-customization {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--kb-background);
  color: var(--kb-ink);
  font-family: var(--kb-font);
}

.kb-profile-customization__preview,
.kb-profile-customization__editor {
  box-sizing: border-box;
  width: min(100%, 640px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
}

.kb-profile-customization__preview {
  padding: 16px 20px 96px;
}

.kb-profile-customization__editor {
  padding: 16px 20px calc(96px + env(safe-area-inset-bottom));
}

.kb-profile-customization__topbar {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  min-height: 56px;
  align-items: center;
  gap: 8px;
}

.kb-profile-customization__editor-topbar {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  min-height: 88px;
  align-items: center;
  gap: 8px;
}

.kb-profile-customization__topbar-title {
  margin: 0;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.kb-profile-customization__icon-button,
.kb-profile-customization__icon-spacer {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
}

.kb-profile-customization__icon-button {
  border: 0;
  background: transparent;
  color: var(--kb-ink);
  cursor: pointer;
  text-decoration: none;
}

.kb-profile-customization__icon-button .material-symbols-outlined {
  font-size: 30px;
  font-variation-settings: "wght" 400;
}

.kb-profile-customization__hero {
  display: flex;
  min-height: calc(100dvh - 168px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}

.kb-profile-customization__avatar-wrap {
  position: relative;
  width: 176px;
  height: 196px;
}

.kb-profile-customization__avatar-ring {
  position: absolute;
  inset: 8px 8px 28px;
  border-radius: 9999px;
  background: var(--kb-fill);
}

.kb-profile-customization__avatar-ring::after {
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: var(--kb-background);
  content: "";
}

.kb-profile-customization__avatar {
  position: absolute;
  inset: 22px 22px 42px;
  z-index: 1;
  display: flex;
  width: 132px;
  height: 132px;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--kb-surface);
  border-radius: 9999px;
  background: var(--kb-fill);
  color: var(--kb-on-primary);
  font-size: 40px;
  font-weight: 700;
  object-fit: cover;
  box-shadow: var(--kb-shadow-card);
}

.kb-profile-customization__avatar--initials {
  background: var(--kb-primary);
}

.kb-profile-customization__edit-button {
  position: absolute;
  top: 6px;
  right: 0;
  z-index: 2;
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kb-border-muted);
  border-radius: 9999px;
  background: var(--kb-surface);
  color: var(--kb-body);
  box-shadow: var(--kb-shadow-card);
  cursor: pointer;
}

.kb-profile-customization__edit-button .material-symbols-outlined {
  font-size: 30px;
  font-variation-settings: "wght" 500;
}

.kb-profile-customization__completion-badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  transform: translateX(-50%);
  border-radius: 9999px;
  border: 1px solid var(--kb-border-muted);
  background: var(--kb-surface);
  color: var(--kb-body);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--kb-shadow-card);
}

.kb-profile-customization__identity h2 {
  margin: 0;
  color: var(--kb-ink);
  font-size: 26px;
  font-weight: 700;
  line-height: 35px;
}

.kb-profile-customization__identity p {
  margin: 4px 0 0;
  color: var(--kb-caption);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.kb-profile-customization__trust-pill {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 9999px;
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 500;
}

.kb-profile-customization__trust-pill svg {
  width: 22px;
  height: 22px;
  color: var(--kb-verified);
}

.kb-profile-customization__primary-action {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: var(--kb-primary);
  color: var(--kb-on-primary);
  padding: 0 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.kb-profile-customization__editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--kb-background);
}

.kb-profile-customization__editor[hidden] {
  display: none;
}

.kb-profile-customization .hidden {
  display: none !important;
}

.kb-profile-customization__editor-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: -16px -20px 0;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--kb-divider-subtle);
  background: var(--kb-surface);
}

.kb-profile-customization__editor-topbar > h1 {
  margin: 0;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.kb-profile-customization__progress {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 8px;
}

.kb-profile-customization__progress > span {
  color: var(--kb-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

.kb-profile-customization__progress > div {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--kb-fill);
}

.kb-profile-customization__progress > div > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--kb-primary);
}

.kb-profile-customization__editor-section {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--kb-border-subtle);
  border-radius: 12px;
  background: var(--kb-surface);
}

.kb-profile-customization__editor-section h2 {
  margin: 0;
  color: var(--kb-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.kb-profile-customization__editor-section p {
  margin: 0;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 20px;
}

.kb-profile-customization__section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kb-profile-customization__section-note {
  color: var(--kb-caption);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.kb-profile-customization__section-helper,
.kb-profile-customization__field-helper {
  color: var(--kb-body);
  font-size: 13px !important;
  font-weight: 400;
  line-height: 18px !important;
}

.kb-profile-customization__photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 12px;
}

.kb-profile-customization__photo-slot {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--kb-border-muted);
  border-radius: 16px;
  background: var(--kb-fill);
  cursor: pointer;
}

.kb-profile-customization__photo-slot:has(input:focus-visible) {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-profile-customization__photo-slot--primary {
  grid-column: span 2;
  grid-row: span 2;
}

.kb-profile-customization__photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kb-profile-customization__photo-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--kb-body);
}

.kb-profile-customization__photo-placeholder .material-symbols-outlined {
  font-size: 44px;
  font-variation-settings: "wght" 300;
}

.kb-profile-customization__photo-slot--primary .kb-profile-customization__photo-placeholder .material-symbols-outlined {
  font-size: 56px;
}

.kb-profile-customization__photo-tip {
  color: var(--kb-body) !important;
  font-size: 13px !important;
  font-weight: 400;
  line-height: 20px !important;
}

.kb-profile-customization__remove-photo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--kb-safety-deep);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.kb-profile-customization__remove-photo input {
  width: 20px;
  height: 20px;
  accent-color: var(--kb-safety-deep);
}

.kb-profile-customization__field {
  display: grid;
  gap: 8px;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 500;
}

.kb-profile-customization__field-grid {
  display: grid;
  gap: 16px;
}

.kb-profile-customization__field select,
.kb-profile-customization__field input:not([type="radio"]):not([type="checkbox"]),
.kb-profile-customization__field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--kb-border-muted);
  border-radius: 8px;
  background: var(--kb-fill) !important;
  color: var(--kb-ink);
  font-size: 16px;
}

.kb-profile-customization__field select,
.kb-profile-customization__field input:not([type="radio"]):not([type="checkbox"]) {
  min-height: 48px;
  padding: 0 16px;
}

.kb-profile-customization__field textarea {
  min-height: 112px;
  padding: 12px 16px;
  resize: vertical;
}

.kb-profile-customization__language-link {
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  color: var(--kb-ink);
  text-decoration: none;
}

.kb-profile-customization__language-link > .material-symbols-outlined {
  color: var(--kb-caption);
  font-size: 28px;
}

.kb-profile-customization__language-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.kb-profile-customization__language-copy p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.kb-profile-customization__language-copy p span {
  color: var(--kb-caption);
  font-weight: 500;
}

.kb-profile-customization__language-link:hover {
  border-color: var(--kb-border-muted);
  background: var(--kb-fill);
}

.kb-profile-customization__interest-entry {
  display: flex;
  width: 100%;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 12px;
  background: var(--kb-fill);
  color: var(--kb-ink);
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
}

.kb-interest-selector {
  display: grid;
  gap: 24px;
  min-width: 0;
  padding-bottom: 64px;
}

.kb-interest-selector__server-error {
  padding: 12px 16px;
  border: 1px solid var(--kb-safety);
  border-radius: 12px;
  background: var(--kb-safety);
  color: var(--kb-safety-deep);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.kb-interest-selector__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kb-interest-selector__status p,
.kb-interest-selector__status output,
.kb-interest-selector__limit {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.kb-interest-selector__status p {
  color: var(--kb-body);
}

.kb-interest-selector__status output {
  flex: none;
  color: var(--kb-ink);
  font-weight: 700;
}

.kb-interest-selector__limit {
  margin-top: -12px;
  color: var(--kb-safety-deep);
}

.kb-interest-selector__categories {
  display: flex;
  gap: 24px;
  margin-right: -16px;
  margin-left: -16px;
  overflow-x: auto;
  padding: 0 16px 4px;
  scrollbar-width: none;
}

.kb-interest-selector__categories::-webkit-scrollbar {
  display: none;
}

.kb-interest-selector__category {
  flex: none;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--kb-placeholder);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
}

.kb-interest-selector__category--active {
  border-bottom-color: var(--kb-ink);
  color: var(--kb-ink);
}

.kb-interest-selector__category:focus-visible,
.kb-interest-selector__pill:focus-within {
  outline: 2px solid var(--kb-primary);
  outline-offset: 2px;
}

.kb-interest-selector__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.kb-interest-selector__group legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.kb-interest-selector__group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kb-interest-selector__pill {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  border: 1px solid var(--kb-border-muted);
  border-radius: 9999px;
  background: var(--kb-surface);
  color: var(--kb-body);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition:
    background-color var(--kb-motion-fast, 150ms) var(--kb-ease-standard, ease),
    border-color var(--kb-motion-fast, 150ms) var(--kb-ease-standard, ease),
    color var(--kb-motion-fast, 150ms) var(--kb-ease-standard, ease);
}

.kb-interest-selector__pill span {
  display: inline-flex;
  min-height: 40px;
  max-width: 100%;
  align-items: center;
  padding: 0 12px;
  border-radius: inherit;
  overflow-wrap: anywhere;
}

.kb-interest-selector__pill:has(input:checked) {
  border-color: var(--kb-ink);
  background: var(--kb-ink);
  color: var(--kb-surface);
}

.kb-interest-selector__footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: flex;
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--kb-divider-subtle);
  background: var(--kb-surface);
}

.kb-interest-selector__footer button {
  flex: 1;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--kb-primary);
  color: var(--kb-on-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.kb-interest-selector__footer button:disabled {
  background: var(--kb-fill);
  color: var(--kb-placeholder);
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .kb-interest-selector__pill {
    transition: none;
  }
}

.kb-profile-customization__interest-entry-copy {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.kb-profile-customization__interest-entry-label {
  color: var(--kb-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.kb-profile-customization__interest-summary {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.kb-profile-customization__summary-chip,
.kb-profile-customization__summary-more {
  display: inline-flex;
  min-height: 32px;
  max-width: 100%;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 9999px;
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.kb-profile-customization__summary-more {
  background: var(--kb-fill);
  color: var(--kb-body);
}

.kb-profile-customization__interest-empty {
  color: var(--kb-caption);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.kb-profile-customization__interest-entry > .material-symbols-outlined {
  flex: none;
  color: var(--kb-placeholder);
  font-size: 30px;
}

.kb-profile-customization__interest-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  width: min(100%, 640px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--kb-surface);
  color: var(--kb-ink);
  box-shadow: var(--kb-shadow-float);
}

.kb-profile-customization__interest-sheet[hidden] {
  display: none;
}

.kb-profile-customization__interest-sheet-topbar {
  flex: none;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 72px;
  min-height: 64px;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 8px;
  background: var(--kb-surface);
}

.kb-profile-customization__interest-sheet-topbar h2 {
  margin: 0;
  color: var(--kb-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.kb-profile-customization__interest-sheet-icon,
.kb-profile-customization__interest-sheet-done {
  border: 0;
  background: transparent;
  color: var(--kb-ink);
  cursor: pointer;
  font-family: inherit;
}

.kb-profile-customization__interest-sheet-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.kb-profile-customization__interest-sheet-icon .material-symbols-outlined {
  font-size: 34px;
  font-variation-settings: "wght" 400;
}

.kb-profile-customization__interest-sheet-done {
  justify-self: end;
  padding: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.kb-profile-customization__interest-sheet-footer {
  flex: none;
  display: flex;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--kb-divider-subtle);
  background: var(--kb-surface);
}

.kb-profile-customization__interest-sheet-save {
  flex: 1;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--kb-primary);
  color: var(--kb-on-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

/* Hotwire Native hides the native nav bar, so this full-screen sheet starts at
   the very top of the viewport. Reserve the status-bar safe-area inset on the
   topbar so the close (X) and Done buttons stay tappable below the notch /
   Dynamic Island instead of sitting under the status bar. */
.hotwire-native .kb-profile-customization__interest-sheet-topbar {
  padding-top: calc(12px + env(safe-area-inset-top));
}

.kb-profile-customization__interest-sheet-body {
  display: grid;
  gap: 24px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 20px 32px;
}

.kb-profile-customization__interest-sheet-heading h3 {
  margin: 0;
  color: var(--kb-ink);
  font-size: 26px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0;
}

.kb-profile-customization__interest-sheet-heading p {
  margin: 16px 0 0;
  color: var(--kb-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
}

.kb-profile-customization__selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--kb-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.kb-profile-customization__selected-header output {
  color: var(--kb-body);
  font-size: 15px;
  font-weight: 700;
}

.kb-profile-customization__selected-tags {
  display: flex;
  min-height: 36px;
  flex-wrap: wrap;
  gap: 8px;
}

.kb-profile-customization__selected-tag {
  display: inline-flex;
  min-height: 36px;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--kb-primary);
  border-radius: 9999px;
  background: var(--kb-primary-tint);
  color: var(--kb-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.kb-profile-customization__selected-tag span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.kb-profile-customization__selected-tag .material-symbols-outlined {
  flex: none;
  font-size: 19px;
}

.kb-profile-customization__selected-empty,
.kb-profile-customization__interest-limit {
  color: var(--kb-caption);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.kb-profile-customization__interest-limit {
  margin: -12px 0 0;
  color: var(--kb-safety-deep);
}

.kb-profile-customization__interest-categories {
  display: flex;
  gap: 24px;
  margin-right: -20px;
  margin-left: -20px;
  overflow-x: auto;
  padding: 2px 20px 4px;
  scrollbar-width: none;
}

.kb-profile-customization__interest-categories::-webkit-scrollbar {
  display: none;
}

.kb-profile-customization__interest-category {
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kb-placeholder);
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  white-space: nowrap;
}

.kb-profile-customization__interest-category--active {
  color: var(--kb-ink);
}

.kb-profile-customization__interest-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.kb-profile-customization__interest-group legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.kb-profile-customization__interest-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
}

.kb-profile-customization__interest-pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--kb-border-muted);
  border-radius: 9999px;
  background: var(--kb-surface);
  color: var(--kb-body);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}

.kb-profile-customization__interest-pill span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 15px;
  border-radius: inherit;
  overflow-wrap: anywhere;
}

.kb-profile-customization__interest-pill:has(input:checked) {
  border-color: var(--kb-primary);
  background: var(--kb-primary-tint);
  color: var(--kb-primary);
}

.kb-profile-customization__interest-pill input:checked + span {
  background: transparent;
  color: inherit;
}

.kb-profile-customization__save-footer {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  box-sizing: border-box;
  /* Preview is the lighter of the two — Save keeps the wider share. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 8px;
  width: min(100%, 640px);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  border-top: 1px solid var(--kb-divider-subtle);
  background: var(--kb-surface);
}

.kb-profile-customization__preview-button,
.kb-profile-customization__save {
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.kb-profile-customization__save {
  border: 0;
  background: var(--kb-primary);
  color: var(--kb-on-primary);
}

/* Neutral outline — DESIGN.md §4 (low-emphasis profile actions), so the
   footer keeps a single orange CTA. */
.kb-profile-customization__preview-button {
  padding: 0 12px;
  border: 1px solid var(--kb-border-muted);
  background: transparent;
  color: var(--kb-ink);
}

.kb-profile-customization__preview-button:active {
  background: var(--kb-fill);
}

@media (max-width: 380px) {
  .kb-profile-customization__preview,
  .kb-profile-customization__editor {
    padding-right: 16px;
    padding-left: 16px;
  }

  .kb-profile-customization__editor-topbar {
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .kb-profile-customization__save-footer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .kb-profile-customization__preview-button,
  .kb-profile-customization__save {
    font-size: 15px;
  }
}

@media (min-width: 640px) {
  .kb-profile-customization__field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* MBTI bottom sheet — DESIGN.md §5 (20px sheet radius), §6 (s3 shadow),
   §15 (rise from y+40 / ease-enter / motion-standard; backdrop to
   rgba(0,0,0,0.5); dismissal lighter at motion-fast / ease-exit). */
.kb-mbti-sheet__backdrop,
.kb-mbti-sheet__panel {
  display: none;
}

.kb-mbti-sheet--open .kb-mbti-sheet__backdrop {
  opacity: 1;
}

.kb-mbti-sheet--open .kb-mbti-sheet__panel {
  transform: translateY(0);
  opacity: 1;
}

.kb-mbti-sheet__backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0.0, 0.0, 0.2, 1); /* motion-standard / ease-enter */
}

.kb-mbti-sheet__panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  box-sizing: border-box;
  width: min(100%, 640px);
  max-height: 80vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--kb-surface);
  border-radius: 20px 20px 0 0;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12); /* s3 */
  transform: translateY(40px);
  opacity: 0;
  /* Enter rides ease-enter / motion-standard (250ms); when the --open class
     drops, the same transition reverses on the lighter ease-exit curve. */
  transition:
    transform 250ms cubic-bezier(0.4, 0.0, 1, 1),
    opacity 150ms cubic-bezier(0.4, 0.0, 1, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.kb-mbti-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: 9999px;
  background: var(--kb-border-muted);
  margin: 12px auto 4px;
  flex: none;
}

.kb-mbti-sheet__header {
  padding: 12px 20px 8px;
}

.kb-mbti-sheet__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--kb-ink);
}

.kb-mbti-sheet__list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 12px 16px;
}

.kb-mbti-sheet__row {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
}

.kb-mbti-sheet__row:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: -2px;
}

.kb-mbti-sheet__row:hover {
  background: var(--kb-surface-muted);
}

.kb-mbti-sheet__row + .kb-mbti-sheet__row {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.kb-mbti-sheet__code {
  font-size: 15px;
  font-weight: 700;
  color: var(--kb-ink);
  min-width: 48px;
}

.kb-mbti-sheet__name {
  font-size: 14px;
  color: var(--kb-body);
}

.kb-mbti-sheet__blank {
  color: var(--kb-ink);
  font-size: 15px;
  font-weight: 500;
}

.kb-mbti-sheet__selection {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kb-border-muted);
  border-radius: 9999px;
  background: var(--kb-fill);
}

.kb-mbti-sheet__selection .material-symbols-outlined {
  color: var(--kb-on-primary);
  font-size: 16px;
  font-variation-settings: "wght" 700;
  opacity: 0;
}

/* Trigger field — matches the filled profile-editor controls while opening the
   existing mobile single-select sheet instead of accepting free text. */
.kb-mbti-sheet__trigger {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid var(--kb-border-muted);
  background: var(--kb-fill);
  color: var(--kb-placeholder);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.kb-mbti-sheet__trigger:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-mbti-sheet__trigger--filled {
  color: var(--kb-ink);
}

.kb-mbti-sheet__chevron {
  flex: none;
  color: var(--kb-caption);
}

@media (prefers-reduced-motion: reduce) {
  .kb-mbti-sheet__backdrop,
  .kb-mbti-sheet__panel {
    transition: none;
  }

  .kb-mbti-sheet--open .kb-mbti-sheet__panel {
    transform: none;
  }
}

/* Admin launch readiness */
.kb-launch {
  min-height: 100dvh;
  padding: 32px 20px 40px;
  background: var(--kb-background);
  color: var(--kb-ink);
  font-family: var(--kb-font);
}

.kb-launch__shell {
  width: min(100%, 1040px);
  margin: 0 auto;
}

.kb-launch__stack > * + * {
  margin-top: 24px;
}

.kb-launch__header,
.kb-launch__overview {
  display: grid;
  gap: 16px;
}

.kb-launch__eyebrow,
.kb-launch__label {
  color: var(--kb-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
}

.kb-launch__label--muted {
  color: var(--kb-caption);
}

.kb-launch__title {
  margin-top: 8px;
  color: var(--kb-ink);
  font-size: 26px;
  font-weight: 700;
  line-height: 35px;
}

.kb-launch__body {
  margin-top: 8px;
  max-width: 640px;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 22px;
}

.kb-launch__actions,
.kb-launch__nav {
  display: flex;
  gap: 8px;
}

.kb-launch__actions {
  flex-wrap: wrap;
}

.kb-launch__nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.kb-launch__nav::-webkit-scrollbar {
  display: none;
}

.kb-launch__button,
.kb-launch__nav-link {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-launch__nav-link {
  flex: 0 0 auto;
}

.kb-launch__button:active,
.kb-launch__nav-link:active {
  transform: scale(0.98);
}

.kb-launch__button {
  background: var(--kb-primary);
  color: var(--kb-surface);
}

.kb-launch__button:hover {
  background: var(--kb-primary-pressed);
}

.kb-launch__nav-link {
  border: 1px solid var(--kb-border);
  background: var(--kb-surface);
  color: var(--kb-primary);
}

.kb-launch__nav-link[aria-current="page"] {
  border-color: var(--kb-primary);
  background: var(--kb-primary);
  color: var(--kb-surface);
}

.kb-launch__summary,
.kb-launch__section,
.kb-launch__item {
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius-card);
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-launch__summary {
  padding: 20px;
}

.kb-launch__summary-title {
  color: var(--kb-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}

.kb-launch__summary-count {
  color: var(--kb-ink);
  font-size: 26px;
  font-weight: 700;
  line-height: 35px;
}

.kb-launch__summary-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kb-launch__stat {
  border-radius: 12px;
  padding: 12px;
  background: var(--kb-fill);
}

.kb-launch__stat-number {
  color: var(--kb-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}

.kb-launch__stat-label {
  margin-top: 4px;
  color: var(--kb-caption);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.kb-launch__section {
  padding: 16px;
}

.kb-launch__section-header {
  display: grid;
  gap: 8px;
}

.kb-launch__section-title {
  color: var(--kb-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}

.kb-launch__section-body {
  max-width: 640px;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 22px;
}

.kb-launch__list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.kb-launch__item {
  padding: 16px;
}

.kb-launch__item-main {
  display: grid;
  gap: 12px;
}

.kb-launch__item-title {
  margin-top: 4px;
  color: var(--kb-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.kb-launch__item-summary {
  margin-top: 8px;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 22px;
}

.kb-launch__status {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0 12px;
  background: var(--kb-fill);
  color: var(--kb-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.kb-launch__status--configured {
  background: var(--kb-international);
  color: var(--kb-primary);
}

.kb-launch__status--mocked-mvp {
  background: var(--kb-korean);
  color: var(--kb-primary);
}

.kb-launch__status--post-mvp {
  background: var(--kb-primary-tint);
  color: var(--kb-primary);
}

.kb-launch__status--needs-credentials,
.kb-launch__status--needs-review {
  background: var(--kb-safety);
  color: var(--kb-safety-deep);
}

.kb-launch__action {
  margin-top: 12px;
  border-left: 3px solid var(--kb-primary);
  border-radius: 8px;
  padding: 12px;
  background: var(--kb-fill);
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.kb-launch__text-link {
  color: var(--kb-primary);
  font-weight: 700;
  text-decoration: none;
}

.kb-launch__text-link:hover {
  text-decoration: underline;
}

.kb-launch__details {
  margin-top: 12px;
  border-top: 1px solid var(--kb-border);
  padding-top: 12px;
}

.kb-launch__details > summary {
  cursor: pointer;
  color: var(--kb-caption);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.kb-launch__detail-grid {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.kb-launch__env-row,
.kb-launch__meta-row {
  display: grid;
  gap: 8px;
  border-radius: 8px;
  padding: 12px;
  background: var(--kb-background);
}

.kb-launch__env-key,
.kb-launch__meta-key {
  overflow-wrap: anywhere;
  color: var(--kb-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.kb-launch__env-expected,
.kb-launch__meta-value {
  overflow-wrap: anywhere;
  color: var(--kb-body);
  font-size: 12px;
  line-height: 18px;
}

.kb-launch__empty {
  border-radius: 12px;
  padding: 16px;
  background: var(--kb-background);
  color: var(--kb-body);
  font-size: 14px;
  line-height: 22px;
}

@media (min-width: 768px) {
  .kb-launch__header,
  .kb-launch__overview {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }

  .kb-launch__item-main,
  .kb-launch__env-row,
  .kb-launch__meta-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

/* Admin JSON viewer (KTO API logs).
   Utility-only palette per DESIGN.md §12.1 — Karrot Orange stays scarce, so keys/strings
   use ink and Positive Green utility tones, not the brand accent. Token classes are emitted
   by the json_viewer Stimulus controller via DOM spans (never innerHTML). */
.kb-json-key { color: var(--kb-ink); font-weight: 600; }
.kb-json-string { color: #15c47e; }
.kb-json-number { color: #217cf9; }
.kb-json-boolean { color: #5c8a70; }
.kb-json-null { color: var(--kb-caption); font-style: italic; }
.kb-json-punct { color: var(--kb-border-muted); }
.kb-json-unparsed { color: var(--kb-body); }

/* Outing create/edit form — grouped card sections with accessible controls.
   Inputs inherit border/background/focus ring from the global form rules
   above; these classes own sectioning, layout, and spacing only. Shared by
   outings/new and outings/edit. */
.kb-outing-form { display: flex; flex-direction: column; gap: 12px; }

.kb-outing-form-shell {
  margin: 0 auto;
  max-width: 640px;
  padding: 16px 16px 96px;
}

.kb-outing-form-header { margin-bottom: 16px; }
.kb-outing-form-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--kb-caption);
  font-size: 13px;
  text-decoration: none;
}
.kb-outing-form-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--kb-ink);
  margin: 8px 0 0 0;
}
.kb-outing-form-notice {
  font-size: 13px;
  color: var(--kb-caption);
  margin: 6px 0 0 0;
}

.kb-outing-form-section {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border-subtle);
  border-radius: var(--kb-radius-card);
  box-shadow: var(--kb-shadow-card);
  padding: 16px;
}
.kb-outing-form-section__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--kb-ink);
  margin: 0 0 12px 0;
}

.kb-outing-form-field { margin-bottom: 16px; }
.kb-outing-form-field:last-child { margin-bottom: 0; }
.kb-outing-form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--kb-body);
  margin-bottom: 6px;
}
.kb-outing-form-control { width: 100%; padding: 12px; }
.kb-outing-form-hint {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--kb-caption);
}

.kb-outing-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kb-outing-form-row .kb-outing-form-field { margin-bottom: 0; }

.kb-outing-form-map {
  margin-top: 8px;
  height: 220px;
  border-radius: var(--kb-radius-control);
  overflow: hidden;
  border: 1px solid var(--kb-border-muted);
  background: var(--kb-fill);
}
.kb-outing-form-clear {
  margin-top: 12px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 8px;
  background: var(--kb-surface);
  color: var(--kb-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.kb-outing-form-submit { margin-top: 4px; }

/* Mobile meetup creation wizard */
.kb-outing-wizard-screen,
.kb-outing-wizard {
  min-height: 100dvh;
  background: var(--kb-surface);
  color: var(--kb-ink);
}

.kb-outing-wizard {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
}

.kb-outing-wizard .dui-btn-primary:not(:disabled):not([aria-disabled="true"]) {
  background: var(--kb-primary);
  color: var(--kb-on-primary);
}

.kb-outing-wizard__header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--kb-border-subtle);
  background: color-mix(in srgb, var(--kb-surface) 96%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.kb-outing-wizard__nav,
.kb-outing-wizard__progress-copy,
.kb-outing-wizard__progress-track,
.kb-outing-wizard__content,
.kb-outing-wizard__dock-inner {
  width: min(100%, 430px);
  margin-inline: auto;
}

.kb-outing-wizard__nav {
  display: grid;
  min-height: 48px;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
}

.kb-outing-wizard__icon-action {
  display: inline-flex;
  width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  color: var(--kb-ink);
  text-decoration: none;
}

.kb-outing-wizard__icon-action .material-symbols-outlined {
  font-size: 24px;
}

.kb-outing-wizard__title {
  margin: 0;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  overflow-wrap: anywhere;
}

.kb-outing-wizard__progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  color: var(--kb-body);
  font-size: 12px;
  line-height: 16px;
}

.kb-outing-wizard__progress-copy strong {
  color: var(--kb-ink);
  font-weight: 700;
}

.kb-outing-wizard__progress-track {
  height: 2px;
  overflow: hidden;
  background: var(--kb-fill);
}

.kb-outing-wizard__progress-track > span {
  display: block;
  width: 16.6667%; /* 1 of 6 steps — the pre-Stimulus default */
  height: 100%;
  border-radius: 2px;
  background: var(--kb-primary);
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-outing-wizard__content {
  display: grid;
  flex: 1 1 auto;
  gap: 12px;
  padding-top: 20px;
  padding-right: calc(16px + env(safe-area-inset-right));
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
  padding-left: calc(16px + env(safe-area-inset-left));
}

.kb-outing-wizard__panel {
  min-width: 0;
}

.kb-outing-wizard__panel-heading {
  margin: 0;
  color: var(--kb-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}

.kb-outing-wizard__panel-helper {
  margin: 4px 0 0;
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
}

.kb-outing-wizard__event-notice {
  margin: 16px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--kb-primary-tint);
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
}

.kb-outing-wizard__event-notice a {
  color: var(--kb-ink);
  font-weight: 700;
}

.kb-outing-wizard__fields {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.kb-outing-wizard__field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.kb-outing-wizard__label {
  display: block;
  margin: 0 0 6px;
  color: var(--kb-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.kb-outing-wizard__control {
  width: 100%;
  min-height: 48px;
  padding: 12px;
}

.kb-outing-wizard__control[aria-invalid="true"] {
  border-color: var(--kb-safety-deep) !important;
}

.kb-outing-wizard__control--multiline,
.kb-outing-form-control--multiline {
  min-height: 96px;
  line-height: 1.55;
  resize: none;
}

.kb-field-footnote {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 0;
}

.kb-field-footnote--end {
  justify-content: flex-end;
}

.kb-field-footnote__helper {
  margin: 0;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-field-footnote__count {
  flex: none;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.kb-field-footnote__count--full {
  color: var(--kb-safety-deep);
}

.kb-outing-wizard__field-error {
  margin: 6px 0 0;
  color: color-mix(in srgb, var(--kb-safety-deep) 85%, var(--kb-ink));
  font-size: 13px;
  line-height: 18px;
}

.kb-outing-wizard__segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: var(--kb-radius-control);
  background: var(--kb-fill);
}

.kb-outing-wizard__segmented input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.kb-outing-wizard__segmented label {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: var(--kb-radius-control);
  color: var(--kb-body);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.kb-outing-wizard__segmented input[type="radio"]:checked + label {
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
  color: var(--kb-ink);
  font-weight: 700;
}

.kb-outing-wizard__segmented input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

/* Type step — the category is one tap on a card, radio semantics underneath.
   Selection reads as Ink, per DESIGN.md §12.1: orange stays on the dock CTA. */
.kb-outing-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kb-outing-type-card {
  display: flex;
  min-height: 96px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 12px;
  background: var(--kb-surface);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--kb-motion-fast, 150ms) var(--kb-ease-standard, ease),
    background-color var(--kb-motion-fast, 150ms) var(--kb-ease-standard, ease);
}

.kb-outing-type-card__emoji {
  font-size: 28px;
  line-height: 32px;
}

.kb-outing-type-card__label {
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
}

/* Map pin — one glyph the host may override. The field is emoji-sized so it
   reads as a pin rather than a text box, and the placeholder carries the
   category default so leaving it empty is an obvious choice. */
.kb-outing-pin {
  margin-top: 20px;
}

.kb-outing-pin__helper {
  margin: 0 0 8px;
  color: var(--kb-caption);
  font-size: 13px;
  line-height: 18px;
}

.kb-outing-pin__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kb-outing-pin__field {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--kb-border-muted);
  border-radius: 12px;
  background: var(--kb-surface);
  font-size: 26px;
  line-height: 32px;
  text-align: center;
}

/* The placeholder is the category emoji, not text, so it fades with opacity —
   placeholder color has no effect on a glyph. */
.kb-outing-pin__field::placeholder {
  color: inherit;
  opacity: 0.5;
}

.kb-outing-pin__field:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-outing-pin__field[aria-invalid="true"] {
  border-color: var(--kb-safety-deep);
}

.kb-outing-pin__reset {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--kb-fill);
  color: var(--kb-ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* Checked state thickens to 2px without moving the card: the inset shadow adds
   the second pixel instead of a wider border. */
.kb-outing-type-card__input:checked + .kb-outing-type-card {
  border-color: var(--kb-ink);
  background: var(--kb-fill);
  box-shadow: inset 0 0 0 1px var(--kb-ink);
}

.kb-outing-type-card__input:checked + .kb-outing-type-card .kb-outing-type-card__label {
  font-weight: 700;
}

.kb-outing-type-card__input:focus-visible + .kb-outing-type-card {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-outing-type-card__input[aria-invalid="true"] + .kb-outing-type-card {
  border-color: var(--kb-safety-deep);
}

/* When step — the day is a chip row, the hour is optional. Selection speaks
   Ink like the type cards; orange stays on the dock CTA. */
.kb-outing-wizard.is-ready .kb-outing-when__fallback {
  display: none;
}

.kb-outing-when__dates {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.kb-outing-when__date-chip {
  display: flex;
  min-width: 56px;
  min-height: 64px;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 12px;
  background: var(--kb-surface);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color var(--kb-motion-fast, 150ms) var(--kb-ease-standard, ease),
    background-color var(--kb-motion-fast, 150ms) var(--kb-ease-standard, ease);
}

.kb-outing-when__date-day {
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-outing-when__date-number {
  color: var(--kb-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.kb-outing-when__date-input:checked + .kb-outing-when__date-chip {
  border-color: var(--kb-ink);
  background: var(--kb-fill);
  box-shadow: inset 0 0 0 1px var(--kb-ink);
}

.kb-outing-when__date-input:checked + .kb-outing-when__date-chip .kb-outing-when__date-day {
  color: var(--kb-ink);
  font-weight: 500;
}

.kb-outing-when__date-input:focus-visible + .kb-outing-when__date-chip {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-outing-when__date-input[aria-invalid="true"] + .kb-outing-when__date-chip {
  border-color: var(--kb-safety-deep);
}

.kb-outing-when__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kb-outing-when__mode-card {
  min-height: 88px;
}

.kb-outing-when__mode-helper {
  color: var(--kb-caption);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.kb-outing-wizard__location {
  min-width: 0;
}

/* Map step — the step is the map. Enhanced, the place panel drops the content
   padding and the canvas fills the space between the wizard header and the
   dock; the mode toggle and helper card float over it and the fields ride in a
   sheet beneath. Before Stimulus none of this applies and the stacked form
   carries the step. */
/* The map needs a definite height to fill: the form's usual min-height leaves
   the whole chain indefinite, so the map step pins it to the viewport and lets
   flex distribute real space instead of percentages. */
.kb-outing-wizard.is-ready[data-current-step="place"] {
  /* The native shell already pads the body by the top inset; without
     subtracting it here the step overflows the screen and the map's floating
     chrome slides under the sticky header. min-height must drop too — the
     base 100dvh minimum would win over this height and leave one inset of
     scroll slack, which is exactly the "buffer" that pushes the header down. */
  height: calc(100dvh - env(safe-area-inset-top, 0px));
  min-height: 0;
  /* clip, not hidden: overflow:hidden makes the form a scroll container, which
     re-bases the sticky header's env() top offset onto the form and shoves the
     header a full inset down on native. clip only clips. */
  overflow: clip;
}

/* The screen wrapper carries the same viewport minimum; on the map step it
   must follow the pinned form instead of re-adding the scrollable slack. */
.kb-outing-wizard-screen:has(.kb-outing-wizard.is-ready[data-current-step="place"]) {
  min-height: 0;
}

.kb-outing-wizard.is-ready[data-current-step="place"] .kb-outing-wizard__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  padding: 0;
}

.kb-outing-wizard.is-ready[data-current-step="place"] .kb-outing-wizard__panel--map {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

/* The floating chrome takes over the naming; the heading stays in the DOM as
   the step's focus target and accessible name. */
.kb-outing-wizard.is-ready .kb-outing-wizard__panel--map .kb-outing-wizard__panel-heading,
.kb-outing-wizard.is-ready .kb-outing-wizard__panel--map .kb-outing-wizard__panel-helper {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.kb-outing-wizard.is-ready[data-current-step="place"] .kb-outing-wizard__fields--map,
.kb-outing-wizard.is-ready[data-current-step="place"] .kb-outing-wizard__location {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 0;
}

/* Anchored to the map itself — never to the panel — so it can't drift under
   the sticky header whatever the platform's safe-area padding does. */
.kb-outing-map .kb-outing-map-toggle {
  position: absolute;
  top: 12px;
  right: 16px;
  left: 16px;
  z-index: 500;
  margin: 0;
}

.kb-outing-wizard.is-ready .kb-outing-map-toggle .kb-outing-wizard__segmented {
  box-shadow: var(--kb-shadow-card);
  background: var(--kb-surface);
}

/* isolation traps Leaflet's internal z-index ladder (panes run 200-1000) inside
   the map, so tiles and controls can never paint over the wizard chrome — the
   bug class the old inline preview shipped. */
.kb-outing-map {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 240px;
  isolation: isolate;
}

/* Flex, not height: 100% — the chain above only promises a min-height, and a
   percentage against that indefinite height resolves to zero. */
.kb-outing-map__canvas {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--kb-fill);
}

.kb-outing-map__canvas:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: -2px;
}

/* The city shortcut floats on the map it navigates, clear of the zoom stack
   (bottomright) and the attribution. */
.kb-outing-map__jump {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 500;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-outing-map__jump-select {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--kb-ink);
  font-size: 13px;
  font-weight: 500;
}

.kb-outing-map__jump-select:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: -2px;
}

/* Enhanced, the floating shortcut owns the city; the sheet's plain select is
   the no-JS fallback only. */
.kb-outing-wizard.is-ready .kb-outing-city-fallback {
  display: none;
}

.kb-outing-map__crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 500;
  width: 24px;
  height: 24px;
  margin: -32px 0 0 -12px;
  border: 3px solid var(--kb-surface);
  border-radius: 9999px 9999px 9999px 2px;
  background: var(--kb-ink);
  box-shadow: var(--kb-shadow-float);
  pointer-events: none;
  transform: rotate(-45deg);
}

/* An approximate meetup marks the centre of a circle, not an address, so the
   crosshair drops its pin shape for a plain dot sitting on the circle's centre.
   The Leaflet circle around it carries the meaning. */
.kb-outing-map__canvas.is-general ~ .kb-outing-map__crosshair {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-width: 2px;
  border-radius: 9999px;
  transform: none;
}

/* The fields ride under the map. Enhanced, the sheet clears the fixed dock
   (12px + 52px button + 12px = 76px, plus a 20px breath = 96px on the grid). */
.kb-outing-map__sheet {
  display: grid;
  gap: 12px;
}

.kb-outing-wizard.is-ready[data-current-step="place"] .kb-outing-map__sheet {
  flex: none;
  max-height: 45dvh;
  /* Clear the fixed dock (12 + 52 + 12) plus a 12px breath — no more. Extra
     clearance here reads as dead white space under the map. */
  padding: 12px 16px calc(88px + env(safe-area-inset-bottom));
  overflow-y: auto;
  border-top: 1px solid var(--kb-border-subtle);
  background: var(--kb-surface);
}

.kb-outing-map__canvas .leaflet-bar {
  border: 1px solid var(--kb-border-muted);
  border-radius: 8px;
  box-shadow: var(--kb-shadow-card);
}

.kb-outing-map__canvas .leaflet-bar a {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  min-height: 48px;
  border-color: var(--kb-border-muted);
  background: var(--kb-surface);
  color: var(--kb-ink);
  line-height: 48px;
}

.kb-outing-map__canvas .leaflet-bar a:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.kb-outing-map__canvas .leaflet-bar a:last-child {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.kb-outing-map__canvas .leaflet-bar a:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

@media (hover: hover) {
  .kb-outing-map__canvas .leaflet-bar a:not(.leaflet-disabled):hover {
    background: var(--kb-fill);
  }
}

.kb-outing-map__canvas .leaflet-bar a:not(.leaflet-disabled):active {
  background: var(--kb-fill);
  color: var(--kb-ink);
}

.kb-outing-map__canvas .leaflet-bar a.leaflet-disabled {
  background: var(--kb-fill);
  color: var(--kb-placeholder);
  cursor: not-allowed;
}

.kb-outing-map__canvas .leaflet-control-attribution {
  background: var(--kb-surface);
  color: var(--kb-body);
}

.kb-outing-map__canvas .leaflet-control-attribution a {
  color: var(--kb-ink);
  text-decoration: underline;
}

.kb-outing-map__canvas .leaflet-control-attribution a:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-outing-wizard__hint {
  margin: 8px 0 0;
  color: var(--kb-body);
  font-size: 12px;
  line-height: 16px;
}

/* Pin-first arrivals land here with the spot already set, so the hint leads the
   field instead of trailing it. */
.kb-outing-wizard__hint--pinned {
  margin: 0 0 8px;
}

.kb-outing-wizard__composition-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.kb-outing-wizard .kb-outing-composition__label {
  min-height: 48px;
  justify-content: center;
  margin: 0;
  padding: 0 8px;
  border-radius: 8px;
  text-align: center;
}

.kb-outing-wizard .kb-outing-composition__seats {
  grid-column: 1 / -1;
}

.kb-outing-wizard .kb-outing-composition__preset[value="custom"]:checked ~ .kb-outing-composition__seats {
  margin-top: 8px;
}

@media (hover: hover) {
  .kb-outing-wizard__segmented input[type="radio"]:not(:disabled) + label:hover,
  .kb-outing-wizard .kb-outing-composition__preset:not(:checked):not(:disabled) + .kb-outing-composition__label:hover {
    background: color-mix(in srgb, var(--kb-fill) 76%, var(--kb-surface));
  }

  .kb-outing-wizard .kb-outing-composition__preset:checked:not(:disabled) + .kb-outing-composition__label:hover {
    background: var(--kb-body);
  }
}

.kb-outing-wizard__segmented input[type="radio"]:not(:disabled) + label:active,
.kb-outing-wizard .kb-outing-composition__preset:not(:checked):not(:disabled) + .kb-outing-composition__label:active {
  background: var(--kb-fill);
}

.kb-outing-wizard .kb-outing-composition__preset:checked:not(:disabled) + .kb-outing-composition__label:active {
  background: var(--kb-body);
}

.kb-outing-wizard__segmented input[type="radio"]:disabled + label {
  background: var(--kb-fill);
  box-shadow: none;
  color: var(--kb-placeholder);
  cursor: not-allowed;
}

.kb-outing-wizard .kb-outing-composition__preset:disabled + .kb-outing-composition__label {
  background: var(--kb-fill);
  border-color: var(--kb-border-muted);
  box-shadow: none;
  color: var(--kb-placeholder);
  cursor: not-allowed;
}

.kb-outing-wizard__review {
  margin-top: 16px;
}

.kb-outing-wizard__review dl {
  margin: 0;
}

.kb-outing-wizard__review-row {
  display: grid;
  min-height: 64px;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--kb-border-subtle);
}

.kb-outing-wizard__review-row dt {
  color: var(--kb-body);
  font-size: 12px;
  line-height: 16px;
}

.kb-outing-wizard__review-row dd {
  margin: 2px 0 0;
  color: var(--kb-ink);
  font-size: 14px;
  line-height: 19px;
}

.kb-outing-wizard__edit {
  display: inline-flex;
  width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--kb-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.kb-outing-wizard__dock {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  padding-top: 12px;
  padding-right: calc(16px + env(safe-area-inset-right));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  padding-left: calc(16px + env(safe-area-inset-left));
  border-top: 1px solid var(--kb-border-subtle);
  background: color-mix(in srgb, var(--kb-surface) 96%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.kb-outing-wizard__dock-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}

.kb-outing-wizard__back-action {
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--kb-border-muted);
  border-radius: var(--kb-radius-control);
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

@media (hover: hover) {
  .kb-outing-wizard__icon-action:hover,
  .kb-outing-wizard__edit:hover,
  .kb-outing-wizard__back-action:hover {
    background: color-mix(in srgb, var(--kb-fill) 76%, var(--kb-surface));
  }
}

.kb-outing-wizard__icon-action:active,
.kb-outing-wizard__edit:active,
.kb-outing-wizard__back-action:active {
  background: var(--kb-fill);
}

.kb-outing-wizard__edit:disabled,
.kb-outing-wizard__back-action:disabled,
.kb-outing-wizard__edit[aria-disabled="true"],
.kb-outing-wizard__back-action[aria-disabled="true"] {
  background: var(--kb-fill);
  color: var(--kb-placeholder);
  cursor: not-allowed;
}

.kb-outing-wizard__next-action,
.kb-outing-wizard__submit {
  min-width: 0;
}

.kb-outing-wizard:not(.is-ready) .kb-outing-wizard__progress-copy,
.kb-outing-wizard:not(.is-ready) .kb-outing-wizard__progress-track,
.kb-outing-wizard:not(.is-ready) .kb-outing-wizard__next-action,
.kb-outing-wizard:not(.is-ready) .kb-outing-wizard__back-action {
  display: none;
}

.kb-outing-wizard:not(.is-ready) .kb-outing-wizard__enhancement-only {
  display: none;
}

.kb-outing-wizard:not(.is-ready) .kb-outing-wizard__submit {
  grid-column: 1 / -1;
}

.kb-outing-wizard.is-ready [hidden] {
  display: none !important;
}

.kb-outing-wizard.is-ready[data-step-direction="forward"] .kb-outing-wizard__panel:not([hidden]) {
  animation: kb-outing-wizard-forward 300ms cubic-bezier(0, 0, 0.2, 1);
}

.kb-outing-wizard.is-ready[data-step-direction="back"] .kb-outing-wizard__panel:not([hidden]) {
  animation: kb-outing-wizard-backward 300ms cubic-bezier(0, 0, 0.2, 1);
}

@keyframes kb-outing-wizard-forward {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes kb-outing-wizard-backward {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

.kb-outing-wizard .outing-location-pin {
  border: 0;
  background: transparent;
}

.kb-outing-wizard .outing-location-pin__body {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  transform: rotate(-45deg);
  border-radius: 50% 50% 50% 0;
  background: var(--kb-international-strong);
  box-shadow: var(--kb-shadow-card);
}

.kb-outing-wizard .outing-location-pin__body::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--kb-surface);
  content: "";
}

@media (prefers-reduced-motion: reduce) {
  .kb-outing-wizard__progress-track > span {
    transition: none;
  }

  .kb-outing-wizard.is-ready[data-step-direction="forward"] .kb-outing-wizard__panel:not([hidden]),
  .kb-outing-wizard.is-ready[data-step-direction="back"] .kb-outing-wizard__panel:not([hidden]) {
    animation: none;
  }
}

/* Meetup detail screen — mirrors the event detail idiom (nav back row,
   fact rows with icons) on the shared 430px shell. */
.kb-outing-detail-nav {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -4px 0 8px;
}

.kb-outing-detail-back {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 4px;
  margin-left: -4px;
  border-radius: 8px;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  text-decoration: none;
}

.kb-outing-detail-back:active {
  background: var(--kb-fill);
}

.kb-outing-detail-back .kb-event-icon {
  width: 16px;
  height: 16px;
}

.kb-outing-detail-report {
  color: var(--kb-caption);
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
}

.kb-outing-detail-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--kb-radius-control);
  background: var(--kb-fill);
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
}

.kb-outing-detail-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.kb-outing-detail-chips:empty {
  display: none;
}

.kb-outing-detail-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  background: var(--kb-primary-tint);
  color: var(--kb-ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.kb-outing-detail-title {
  margin: 0 0 12px;
  color: var(--kb-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  overflow-wrap: anywhere;
}

.kb-outing-detail-host {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--kb-border-subtle);
  border-radius: var(--kb-radius-control);
  background: var(--kb-surface);
}

.kb-outing-detail-host__avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 9999px;
  object-fit: cover;
}

.kb-outing-detail-host__avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kb-fill);
  color: var(--kb-body);
  font-size: 16px;
  font-weight: 500;
}

.kb-outing-detail-host__text {
  min-width: 0;
  flex: 1;
}

.kb-outing-detail-host__label {
  margin: 0;
  color: var(--kb-caption);
  font-size: 11px;
  line-height: 15px;
}

.kb-outing-detail-host__name {
  margin: 0;
  color: var(--kb-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}

.kb-outing-detail-host__role {
  flex: none;
  padding: 2px 8px;
  border-radius: 9999px;
  color: var(--kb-ink);
  font-size: 11px;
  line-height: 15px;
}

.kb-outing-detail-desc {
  margin: 0 0 16px;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kb-outing-detail-facts {
  margin: 0 0 24px;
  border-color: var(--kb-border-subtle);
}

.kb-outing-detail-meter {
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--kb-fill);
  overflow: hidden;
}

.kb-outing-detail-meter__fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--kb-primary);
}

.kb-outing-detail-comps {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.kb-outing-detail-comp {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  color: var(--kb-ink);
  font-size: 11px;
  line-height: 15px;
}

.kb-outing-detail-section {
  margin: 0 0 24px;
}

.kb-outing-detail-section--attendance {
  margin: 24px 0 0;
}

.kb-outing-detail-section__title {
  margin: 0 0 12px;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.kb-outing-detail-section--post-event {
  margin-top: 24px;
}

.kb-post-event-section__intro,
.kb-outings-recommendation-note {
  margin: -4px 0 12px;
  color: var(--kb-caption);
  font-size: 13px;
  line-height: 18px;
}

.kb-outings-recommendation-note {
  margin: 0 16px 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--kb-fill);
  color: var(--kb-body);
}

.kb-post-event-response-list {
  display: grid;
  gap: 8px;
}

.kb-event-post-event-response {
  grid-column: 1 / -1;
  width: 100%;
}

.kb-post-event-response {
  min-width: 0;
  border: 1px solid var(--kb-border-subtle);
  border-radius: 12px;
  background: var(--kb-surface);
  overflow: hidden;
}

.kb-post-event-response__person {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 12px;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}

.kb-post-event-response__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  object-fit: cover;
}

.kb-post-event-response__avatar--initial {
  background: var(--kb-fill);
  color: var(--kb-body);
}

.kb-post-event-response__details summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-top: 1px solid var(--kb-border-subtle);
  color: var(--kb-ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  list-style-position: inside;
}

.kb-post-event-response__details:first-child summary {
  border-top: 0;
}

.kb-post-event-response__details summary:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: -2px;
}

.kb-post-event-response__form-wrap {
  padding: 12px;
  border-top: 1px solid var(--kb-border-subtle);
}

.kb-post-event-response__privacy {
  margin: 0 0 16px;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-post-event-response__form {
  display: grid;
  gap: 16px;
}

.kb-post-event-response__form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.kb-post-event-response__form legend {
  margin-bottom: 8px;
  color: var(--kb-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

.kb-post-event-response__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.kb-post-event-response__choices--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kb-post-event-response__choices label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px;
  border: 1px solid var(--kb-border);
  border-radius: 8px;
  background: var(--kb-surface);
  color: var(--kb-body);
  cursor: pointer;
  font-size: 12px;
  line-height: 16px;
}

.kb-post-event-response__choices label:has(input:checked) {
  border-color: var(--kb-ink);
  background: var(--kb-fill);
  color: var(--kb-ink);
}

.kb-post-event-response__choices input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--kb-primary);
}

.kb-post-event-response__choices input:focus-visible {
  outline: 2px solid var(--kb-focus);
  outline-offset: 2px;
}

.kb-post-event-response__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--kb-border-subtle);
  background: var(--kb-fill);
}

.kb-post-event-response__status--mutual {
  background: var(--kb-primary-tint);
}

.kb-post-event-response__status strong {
  display: block;
  margin-bottom: 2px;
  color: var(--kb-ink);
  font-size: 13px;
  line-height: 18px;
}

.kb-post-event-response__status p {
  margin: 0;
  color: var(--kb-body);
  font-size: 12px;
  line-height: 16px;
}

@media (max-width: 420px) {
  .kb-post-event-response__choices {
    grid-template-columns: 1fr;
  }

  .kb-post-event-response__choices--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-post-event-response__status {
    align-items: stretch;
    flex-direction: column;
  }
}

.kb-outing-detail-members {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kb-outing-member-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  border-radius: 9999px;
  background: var(--kb-fill);
}

.kb-outing-member-chip__avatar {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 9999px;
  object-fit: cover;
}

.kb-outing-member-chip__avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kb-surface);
  color: var(--kb-caption);
  font-size: 11px;
  font-weight: 500;
}

.kb-outing-member-chip__name {
  color: var(--kb-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.kb-outing-member-chip__remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kb-caption);
  font-size: 11px;
  line-height: 15px;
  text-decoration: underline;
  cursor: pointer;
}

.kb-outing-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.kb-outing-detail-chat {
  margin: 0 0 16px;
}

.kb-outing-detail-chat .kb-event-icon {
  width: 18px;
  height: 18px;
}

.kb-outing-detail-requests {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kb-outing-detail-request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--kb-border-subtle);
  border-radius: var(--kb-radius-control);
  background: var(--kb-surface);
}

.kb-outing-detail-request__text {
  min-width: 0;
  flex: 1;
}

.kb-outing-detail-request__name {
  margin: 0;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
}

.kb-outing-detail-request__note {
  margin: 2px 0 0;
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.kb-outing-detail-request__actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.kb-outing-detail-recorded {
  color: var(--kb-caption);
  font-size: 13px;
  line-height: 18px;
}

.kb-outing-detail-join {
  margin: 0 0 24px;
}

.kb-outing-detail-join__actions {
  display: grid;
  gap: 8px;
}

.kb-outing-detail-join__notice {
  margin: 0 0 12px;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 19px;
}

.kb-outing-detail-join__notice--muted {
  margin: 0;
  color: var(--kb-caption);
}

.kb-outing-detail-join__helper {
  margin: 8px 0 12px;
  color: var(--kb-caption);
  font-size: 13px;
  line-height: 18px;
}

.kb-outing-join-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--kb-border-subtle);
  border-radius: var(--kb-radius-card);
  background: var(--kb-surface);
}

.kb-outing-join-form__heading h3,
.kb-outing-host-preferences h3 {
  margin: 0;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.kb-outing-join-form__heading p,
.kb-outing-join-form__privacy {
  margin: 4px 0 0;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-outing-join-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kb-outing-join-form .kb-outing-form-field {
  margin: 0;
}

.kb-outing-member-preferences {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
}

.kb-outing-member-preferences > div {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
  gap: 8px;
}

.kb-outing-member-preferences dt {
  color: var(--kb-caption);
  font-size: 11px;
  line-height: 15px;
}

.kb-outing-member-preferences dd {
  margin: 0;
  color: var(--kb-body);
  font-size: 12px;
  line-height: 16px;
  overflow-wrap: anywhere;
}

.kb-outing-member-chip__status {
  color: var(--kb-caption);
  font-size: 11px;
  line-height: 15px;
}

.kb-outing-arrival-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kb-outing-host-preferences {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--kb-border-subtle);
}

.kb-outing-host-preferences article {
  padding: 12px;
  border: 1px solid var(--kb-border-subtle);
  border-radius: var(--kb-radius-control);
  background: var(--kb-surface);
}

.kb-outing-host-preferences article > p {
  margin: 0;
  color: var(--kb-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

@media (max-width: 479px) {
  .kb-outing-join-form__grid {
    grid-template-columns: 1fr;
  }
}

/* Friends hub — mirrors the messages hub shell; rows reuse the message-list
   card. Role is a calm dot + label per DESIGN.md §4 Badges, never a filled
   pill. */
.kb-friends-hub {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--kb-background);
  color: var(--kb-ink);
}

.kb-friends-hub__shell {
  display: flex;
  width: 100%;
  max-width: 390px;
  min-height: calc(100dvh - 32px);
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
}

.kb-friends-hub__header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  min-height: 56px;
  padding-top: 2px;
}

.kb-friends-hub__header h1 {
  margin: 0;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.kb-friends-hub__back {
  justify-self: end;
  color: var(--kb-caption);
  font-size: 13px;
  text-decoration: none;
}

.kb-friends-hub__gate {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 16px;
  border: 1px solid var(--kb-border-subtle);
  border-radius: 12px;
  background: var(--kb-surface);
  text-align: center;
}

.kb-friends-hub__gate h3 {
  margin: 0;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
}

.kb-friends-hub__gate p {
  margin: 0 0 8px;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 19px;
}

.kb-friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
}

.kb-friend-row + .kb-friend-row {
  border-top: 1px solid var(--kb-border-subtle);
}

.kb-friend-row__link {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.kb-friend-row__avatar {
  width: 44px;
  height: 44px;
  overflow: hidden;
  background: var(--kb-fill);
  color: var(--kb-body);
  font-size: 14px;
  font-weight: 700;
}

.kb-friend-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kb-friend-row__content {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.kb-friend-row__name {
  overflow: hidden;
  color: var(--kb-ink);
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-friend-row__role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--kb-caption);
  font-size: 12px;
  font-weight: 500;
}

.kb-friend-row__role-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 9999px;
}

.kb-friend-row__role-dot--korean { background: var(--kb-korean-strong); }
.kb-friend-row__role-dot--international { background: var(--kb-international-strong); }

.kb-friend-row__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.kb-friend-row__actions .dui-btn-sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.kb-friend-header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.kb-friend-header-action--requested,
.kb-friend-header-action--friends {
  cursor: default;
}

.kb-messages-hub__friends-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  justify-self: end;
  color: var(--kb-caption);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.kb-messages-hub__friends-badge {
  box-sizing: border-box;
  position: absolute;
  top: 4px;
  right: -4px;
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--kb-surface);
  border-radius: 9999px;
  background: var(--kb-safety-deep);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* Blog publishing tools */
.kb-blog-admin {
  min-height: 100vh;
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
  background: var(--kb-background);
  color: var(--kb-ink);
}

.kb-blog-admin__shell {
  width: min(100%, 1024px);
  margin: 0 auto;
}

.kb-blog-admin--editor {
  padding-bottom: 32px;
}

.kb-blog-admin__panel,
.kb-blog-editor__block {
  border: 1px solid var(--kb-border);
  border-radius: 16px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-blog-admin__panel {
  padding: 20px;
}

.kb-blog-editor__block {
  overflow: clip;
}

.kb-blog-editor__block-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--kb-border);
  background: var(--kb-fill);
}

.kb-blog-editor__block-body {
  padding: 16px;
}

.kb-blog-editor__locale {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 8px;
  background: var(--kb-surface);
  color: var(--kb-body);
  font-size: 14px;
  font-weight: 700;
}

.kb-blog-editor__locale--active {
  border-color: var(--kb-primary);
  background: var(--kb-primary-tint);
  color: var(--kb-primary-strong);
}

.kb-blog-editor__icon-button {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kb-border-muted);
  border-radius: 8px;
  background: var(--kb-surface);
  color: var(--kb-ink);
}

.kb-blog-editor__icon-button:disabled {
  cursor: default;
  opacity: 0.4;
}

.kb-blog-editor__field {
  display: grid;
  gap: 8px;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
}

.kb-blog-editor__field-hint {
  color: var(--kb-caption);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.kb-blog-editor__rich-text {
  min-height: 160px;
}

.kb-blog-editor__media-preview {
  width: min(100%, 480px);
  overflow: hidden;
  border-radius: 12px;
  background: var(--kb-fill);
}

@media (max-width: 640px) {
  .kb-blog-admin {
    padding-right: 16px;
    padding-left: 16px;
  }

  .kb-blog-editor__block-header {
    align-items: stretch;
  }
}

/* Public blog */
.kb-blog-page {
  min-height: 100vh;
  background: var(--kb-background);
  color: var(--kb-ink);
}

.kb-blog-index,
.kb-blog-related,
.kb-blog-after-article {
  width: min(100% - 32px, 1024px);
  margin: 0 auto;
}

.kb-blog-index {
  padding: 56px 0 64px;
}

.kb-blog-index__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}

.kb-blog-index__eyebrow,
.kb-blog-section-label,
.kb-blog-card__category,
.kb-blog-newsletter__eyebrow,
.kb-blog-callout__eyebrow,
.kb-blog-cta__eyebrow {
  color: var(--kb-primary-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.kb-blog-index__title {
  margin-top: 8px;
  font-size: 26px;
  font-weight: 700;
  line-height: 35px;
}

.kb-blog-index__intro {
  max-width: 640px;
  margin-top: 12px;
  color: var(--kb-body);
  font-size: 16px;
  line-height: 24px;
}

.kb-blog-index__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.kb-blog-category-menu {
  position: relative;
}

.kb-blog-category-menu summary,
.kb-blog-index__rss {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  border: 1px solid var(--kb-border-muted);
  border-radius: 8px;
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.kb-blog-category-menu summary {
  min-width: 140px;
  justify-content: space-between;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
}

.kb-blog-category-menu summary::-webkit-details-marker {
  display: none;
}

.kb-blog-category-menu summary::after {
  content: "⌄";
  margin-left: 12px;
  color: var(--kb-caption);
}

.kb-blog-category-menu nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: grid;
  width: 240px;
  overflow: hidden;
  border: 1px solid var(--kb-border);
  border-radius: 12px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-float);
}

.kb-blog-category-menu nav a {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: 0 16px;
  color: var(--kb-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.kb-blog-category-menu nav a:hover,
.kb-blog-category-menu nav a[aria-current="page"] {
  background: var(--kb-primary-tint);
  color: var(--kb-primary-strong);
}

.kb-blog-index__rss {
  padding: 0 12px;
}

.kb-blog-section-label {
  margin-bottom: 16px;
}

.kb-blog-featured {
  margin-bottom: 48px;
  overflow: hidden;
  border: 1px solid var(--kb-border);
  border-radius: 16px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-blog-featured__link {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  color: inherit;
  text-decoration: none;
}

.kb-blog-featured__image {
  min-height: 320px;
  overflow: hidden;
  background: var(--kb-fill);
}

.kb-blog-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
}

.kb-blog-featured__title {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.kb-blog-featured__excerpt {
  margin-top: 12px;
  color: var(--kb-body);
  font-size: 15px;
  line-height: 24px;
}

.kb-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.kb-blog-card {
  overflow: hidden;
  border: 1px solid var(--kb-border);
  border-radius: 16px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-blog-card:hover {
  box-shadow: var(--kb-shadow-float);
  transform: translateY(-2px);
}

.kb-blog-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.kb-blog-card__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--kb-fill);
}

.kb-blog-card__body {
  padding: 20px;
}

.kb-blog-card__title {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}

.kb-blog-card__excerpt {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 22px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.kb-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-blog-empty {
  border: 1px solid var(--kb-border);
  border-radius: 16px;
  padding: 32px;
  color: var(--kb-body);
  text-align: center;
}

.kb-blog-empty a {
  display: inline-flex;
  margin-top: 12px;
  color: var(--kb-primary-strong);
  font-size: 14px;
  font-weight: 700;
}

.kb-blog-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  color: var(--kb-caption);
  font-size: 13px;
}

.kb-blog-pagination a {
  justify-self: start;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--kb-fill);
  color: var(--kb-ink);
  font-weight: 700;
  text-decoration: none;
}

.kb-blog-pagination a:last-child {
  justify-self: end;
}

.kb-blog-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 24px;
  margin-top: 64px;
  padding: 32px;
  border: 1px solid var(--kb-border);
  border-radius: 16px;
  background: var(--kb-primary-tint);
}

.kb-blog-newsletter__title {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}

.kb-blog-newsletter__body {
  margin-top: 8px;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 22px;
}

.kb-blog-newsletter__form {
  display: flex;
  align-self: center;
  gap: 8px;
}

.kb-blog-newsletter__input {
  min-width: 0;
  flex: 1;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 8px;
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-size: 16px;
}

.kb-blog-newsletter__button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--kb-primary);
  color: var(--kb-on-primary);
  font-size: 14px;
  font-weight: 700;
}

.kb-blog-newsletter__privacy {
  grid-column: 2;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-blog-newsletter__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
}

.kb-blog-preview {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--kb-primary-tint);
  color: var(--kb-body);
  font-size: 13px;
}

.kb-blog-article {
  padding: 56px 16px 64px;
}

.kb-blog-article__header {
  width: min(100%, 640px);
  margin: 0 auto;
}

.kb-blog-article__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.kb-blog-article__categories a {
  color: var(--kb-primary-strong);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.kb-blog-article__title {
  margin-top: 24px;
  font-size: 26px;
  font-weight: 700;
  line-height: 35px;
  text-wrap: balance;
}

.kb-blog-article__excerpt {
  margin-top: 16px;
  color: var(--kb-body);
  font-size: 16px;
  line-height: 24px;
}

.kb-blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
  color: var(--kb-caption);
  font-size: 13px;
  line-height: 18px;
}

.kb-blog-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.kb-blog-share__label {
  color: var(--kb-caption);
  font-size: 12px;
  font-weight: 700;
}

.kb-blog-share__button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 8px;
  background: var(--kb-surface);
  color: var(--kb-body);
  font-size: 13px;
  font-weight: 700;
}

.kb-blog-share__button .material-symbols-outlined {
  font-size: 18px;
}

.kb-blog-article__cover {
  width: min(100%, 960px);
  margin: 48px auto 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--kb-fill);
  aspect-ratio: 16 / 9;
}

.kb-blog-article__layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 640px);
  gap: 40px;
  width: min(100%, 880px);
  margin: 48px auto 0;
}

.kb-blog-toc {
  color: var(--kb-body);
  font-size: 13px;
  line-height: 19px;
}

.kb-blog-toc--desktop {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
}

.kb-blog-toc__title,
.kb-blog-toc summary {
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
}

.kb-blog-toc ol {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.kb-blog-toc a {
  color: inherit;
  text-decoration: none;
}

.kb-blog-toc a:hover {
  color: var(--kb-primary-strong);
}

.kb-blog-toc__subitem {
  padding-left: 12px;
}

.kb-blog-toc--mobile {
  display: none;
  margin-bottom: 32px;
  padding: 16px;
  border: 1px solid var(--kb-border);
  border-radius: 12px;
}

.kb-blog-toc--mobile summary {
  cursor: pointer;
}

.kb-blog-article__content {
  min-width: 0;
}

.kb-blog-article__content > *:first-child {
  margin-top: 0;
}

.kb-blog-prose {
  margin-top: 24px;
  color: var(--kb-body);
  font-size: 16px;
  line-height: 28px;
}

.kb-blog-prose > * + *,
.kb-blog-callout__body > * + *,
.kb-blog-cta__body > * + *,
.kb-blog-faq__answer > * + *,
.kb-blog-quote blockquote > * + * {
  margin-top: 16px;
}

.kb-blog-prose :is(ul, ol) {
  display: grid;
  gap: 8px;
  padding-left: 24px;
}

.kb-blog-prose a,
.kb-blog-callout a,
.kb-blog-faq a {
  color: var(--kb-primary-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kb-blog-prose blockquote {
  padding-left: 16px;
  border-left: 3px solid var(--kb-border-muted);
}

.kb-blog-prose pre {
  overflow-x: auto;
  padding: 16px;
  border-radius: 8px;
  background: var(--kb-fill);
  font-family: "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 20px;
}

.kb-blog-article__h2 {
  margin-top: 48px;
  scroll-margin-top: 88px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.kb-blog-article__h3 {
  margin-top: 32px;
  scroll-margin-top: 88px;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}

.kb-blog-figure,
.kb-blog-video {
  margin: 32px 0;
}

.kb-blog-figure__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--kb-fill);
}

.kb-blog-figure__caption {
  margin-top: 8px;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.kb-blog-video__frame {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--kb-ink);
  aspect-ratio: 16 / 9;
}

.kb-blog-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.kb-blog-table-scroll {
  margin: 32px 0;
  overflow-x: auto;
  border: 1px solid var(--kb-border-muted);
  border-radius: 12px;
}

.kb-blog-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 21px;
}

.kb-blog-table caption {
  padding: 12px 16px;
  border-bottom: 1px solid var(--kb-border-muted);
  color: var(--kb-ink);
  font-weight: 700;
  text-align: left;
}

.kb-blog-table :is(th, td) {
  padding: 12px 16px;
  border-right: 1px solid var(--kb-border);
  border-bottom: 1px solid var(--kb-border);
  text-align: left;
  vertical-align: top;
}

.kb-blog-table th {
  background: var(--kb-fill);
  color: var(--kb-ink);
  font-weight: 700;
}

.kb-blog-table tr:last-child td {
  border-bottom: 0;
}

.kb-blog-table :is(th, td):last-child {
  border-right: 0;
}

.kb-blog-callout,
.kb-blog-cta,
.kb-blog-quote {
  margin: 32px 0;
  padding: 20px;
  border: 1px solid var(--kb-border);
  border-radius: 16px;
}

.kb-blog-callout {
  background: var(--kb-fill);
}

.kb-blog-callout--helpful {
  background: var(--kb-primary-tint);
}

.kb-blog-callout__title,
.kb-blog-cta__title {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.kb-blog-callout__body,
.kb-blog-cta__body,
.kb-blog-faq__answer,
.kb-blog-quote blockquote {
  margin-top: 8px;
  color: var(--kb-body);
  font-size: 15px;
  line-height: 25px;
}

.kb-blog-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-blog-cta__button {
  display: inline-flex;
  min-height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--kb-primary);
  color: var(--kb-on-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.kb-blog-cta--inline {
  display: block;
  box-shadow: none;
}

.kb-blog-cta--inline .kb-blog-cta__button {
  margin-top: 16px;
}

.kb-blog-faq {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--kb-border);
}

.kb-blog-faq__question {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.kb-blog-quote {
  background: var(--kb-surface);
}

.kb-blog-quote figcaption {
  margin-top: 12px;
  color: var(--kb-caption);
  font-size: 13px;
}

.kb-blog-divider {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--kb-border);
}

.kb-blog-article__footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--kb-border);
}

.kb-blog-after-article {
  width: min(100% - 32px, 880px);
}

.kb-blog-related {
  padding: 64px 0;
}

.kb-blog-related > h2 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.kb-blog-rail {
  grid-column: 2;
  min-width: 0;
  margin-top: 48px;
}

.kb-blog-rail__inner {
  display: grid;
  gap: 32px;
}

.kb-blog-rail__resource,
.kb-blog-rail__related {
  padding: 16px;
  border: 1px solid var(--kb-border);
  border-radius: 12px;
  background: var(--kb-surface);
}

.kb-blog-rail__resource {
  background: var(--kb-fill);
}

.kb-blog-rail__eyebrow,
.kb-blog-related-story__category {
  color: var(--kb-primary-strong);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
}

.kb-blog-rail__resource h2,
.kb-blog-rail__related h2 {
  margin-top: 4px;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.kb-blog-rail__resource > p:not(.kb-blog-rail__eyebrow),
.kb-blog-rail__related > p {
  margin-top: 8px;
  color: var(--kb-body);
  font-size: 13px;
  line-height: 20px;
}

.kb-blog-rail__resource-link {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 0 12px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 8px;
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.kb-blog-rail__stories {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.kb-blog-related-story__link {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: 64px;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.kb-blog-related-story__image {
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--kb-fill);
}

.kb-blog-related-story__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kb-blog-related-story__copy {
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-direction: column;
}

.kb-blog-related-story__title {
  margin-top: 2px;
  overflow-wrap: anywhere;
  color: var(--kb-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

@media (min-width: 1120px) {
  .kb-blog-article__layout--with-rail {
    grid-template-columns: 176px minmax(0, 640px) 240px;
    gap: 32px;
    width: min(100%, 1120px);
  }

  .kb-blog-rail {
    grid-row: 1;
    grid-column: 3;
    margin-top: 0;
  }

  .kb-blog-rail__inner {
    position: sticky;
    top: 88px;
  }
}

.kb-blog-resource {
  width: min(100% - 32px, 760px);
  margin: 0 auto;
  padding: 56px 0 64px;
}

.kb-blog-resource__header {
  width: min(100%, 640px);
  margin: 0 auto;
}

.kb-blog-resource__eyebrow,
.kb-blog-resource__step {
  color: var(--kb-primary-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.kb-blog-resource__header h1 {
  margin-top: 8px;
  color: var(--kb-ink);
  font-size: 26px;
  font-weight: 700;
  line-height: 35px;
}

.kb-blog-resource__header > p:last-of-type {
  margin-top: 12px;
  color: var(--kb-body);
  font-size: 16px;
  line-height: 24px;
}

.kb-blog-resource__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.kb-blog-resource__download,
.kb-blog-resource__back,
.kb-blog-resource__closing a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.kb-blog-resource__download,
.kb-blog-resource__closing a {
  border: 1px solid var(--kb-primary);
  background: var(--kb-primary);
  color: var(--kb-on-primary);
}

.kb-blog-resource__back {
  border: 1px solid var(--kb-border-muted);
  background: var(--kb-surface);
  color: var(--kb-ink);
}

.kb-blog-resource__sheet {
  display: grid;
  gap: 0;
  margin-top: 40px;
  overflow: hidden;
  border: 1px solid var(--kb-border);
  border-radius: 16px;
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-blog-resource__sheet section {
  padding: 24px;
}

.kb-blog-resource__sheet section + section {
  border-top: 1px solid var(--kb-border);
}

.kb-blog-resource__sheet h2 {
  margin-top: 4px;
  color: var(--kb-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}

.kb-blog-resource__sheet section > p:not(.kb-blog-resource__step) {
  margin-top: 8px;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 22px;
}

.kb-blog-resource__writing-lines {
  height: 88px;
  margin-top: 16px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    var(--kb-border) 27px,
    var(--kb-border) 28px
  );
}

.kb-blog-resource__prompt-list,
.kb-blog-resource__checklist {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 22px;
}

.kb-blog-resource__prompt-list {
  padding-left: 20px;
}

.kb-blog-resource__plan {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.kb-blog-resource__plan > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--kb-fill);
  color: var(--kb-body);
  font-size: 14px;
  line-height: 22px;
}

.kb-blog-resource__plan strong {
  color: var(--kb-ink);
}

.kb-blog-resource__checklist {
  padding: 0;
  list-style: none;
}

.kb-blog-resource__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kb-blog-resource__checklist li span {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid var(--kb-border-muted);
  border-radius: 8px;
  background: var(--kb-surface);
}

.kb-blog-resource__closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding: 20px;
  border-radius: 16px;
  background: var(--kb-primary-tint);
  color: var(--kb-body);
  font-size: 14px;
  line-height: 22px;
}

@media (max-width: 768px) {
  .kb-blog-index {
    padding-top: 40px;
  }

  .kb-blog-index__header {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 40px;
  }

  .kb-blog-index__tools {
    justify-content: space-between;
  }

  .kb-blog-featured__link {
    grid-template-columns: 1fr;
  }

  .kb-blog-featured__image {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .kb-blog-featured__body {
    padding: 20px;
  }

  .kb-blog-grid {
    grid-template-columns: 1fr;
  }

  .kb-blog-newsletter {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .kb-blog-newsletter__privacy {
    grid-column: 1;
  }

  .kb-blog-article {
    padding-top: 40px;
  }

  .kb-blog-article__layout {
    display: block;
    width: min(100%, 640px);
    margin-top: 32px;
  }

  .kb-blog-toc--desktop {
    display: none;
  }

  .kb-blog-toc--mobile {
    display: block;
  }

  .kb-blog-rail {
    margin-top: 40px;
  }

  .kb-blog-article__cover {
    margin-top: 32px;
    border-radius: 0;
  }

  .kb-blog-resource {
    padding-top: 40px;
  }
}

@media (max-width: 480px) {
  .kb-blog-index__tools,
  .kb-blog-newsletter__form,
  .kb-blog-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .kb-blog-category-menu,
  .kb-blog-category-menu summary {
    width: 100%;
  }

  .kb-blog-category-menu nav {
    right: auto;
    left: 0;
    width: 100%;
  }

  .kb-blog-newsletter__button,
  .kb-blog-cta__button {
    width: 100%;
  }

  .kb-blog-preview {
    align-items: flex-start;
    flex-direction: column;
  }

  .kb-blog-resource__actions,
  .kb-blog-resource__closing {
    align-items: stretch;
    flex-direction: column;
  }

  .kb-blog-resource__download,
  .kb-blog-resource__back,
  .kb-blog-resource__closing a {
    width: 100%;
  }

  .kb-blog-resource__sheet section {
    padding: 20px 16px;
  }

  .kb-blog-resource__plan > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media print {
  .kb-blog-resource {
    width: 100%;
    padding: 0;
  }

  .kb-blog-resource__actions,
  .kb-blog-resource__closing,
  .kb-blog-resource ~ footer,
  .kb-blog-page > header {
    display: none;
  }

  .kb-blog-resource__sheet {
    margin-top: 24px;
    border-color: var(--kb-border-muted);
    box-shadow: none;
  }
}

/* Marketing landing — restrained editorial direction informed by Timeleft.
   A small set of strong photographs makes the social outcome tangible while
   typography, spacing, and trust copy keep the journey calm. */
.kb-landing {
  overflow: clip;
  background: var(--kb-background) !important;
  color: var(--kb-ink);
  font-family: var(--kb-font);
}

.kb-landing-shell {
  width: min(100%, 1248px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.kb-landing-nav {
  position: absolute;
  z-index: 40;
  top: 0;
  right: 0;
  left: 0;
  color: #ffffff;
}

body.hotwire-native.kb-safe-area-top .kb-landing-nav {
  top: env(safe-area-inset-top);
}

.kb-landing-nav__inner {
  display: grid;
  min-height: 80px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}

.kb-landing-nav__wordmark {
  justify-self: start;
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  text-decoration: none;
}

.kb-landing-nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.kb-landing-nav__links a,
.kb-landing-nav__login {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-landing-nav__links a:hover,
.kb-landing-nav__login:hover {
  opacity: 0.72;
}

.kb-landing-nav__actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 20px;
}

.kb-landing-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--kb-primary);
  color: var(--kb-on-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  transition:
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-landing-button:hover {
  background: color-mix(in srgb, var(--kb-primary) 94%, #000000);
  transform: translateY(-1px);
}

.kb-landing-button:active {
  transform: none;
}

.kb-landing-button--nav {
  min-height: 40px;
  padding-inline: 20px;
  background: #ffffff;
  color: var(--kb-ink);
  font-size: 14px;
}

.kb-landing-button--nav:hover {
  background: rgba(255, 255, 255, 0.88);
}

.kb-landing-hero {
  position: relative;
  display: flex;
  min-height: 720px;
  height: 100svh;
  max-height: 880px;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background: #171919;
}

.kb-landing-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 13, 13, 0.76) 0%, rgba(10, 13, 13, 0.48) 38%, rgba(10, 13, 13, 0.08) 70%, rgba(10, 13, 13, 0.04) 100%),
    linear-gradient(0deg, rgba(10, 13, 13, 0.24) 0%, rgba(10, 13, 13, 0) 44%);
  content: "";
}

.kb-landing-hero__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.kb-landing-hero__inner {
  display: flex;
  align-items: center;
}

.kb-landing-hero__content {
  width: min(100%, 520px);
  padding-block: 128px 64px;
  color: #ffffff;
}

.kb-landing-hero__content h1 {
  max-width: 500px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.08;
}

.kb-landing-hero__lead {
  max-width: 420px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 24px;
}

.kb-landing-button--hero {
  min-width: 176px;
  margin-top: 32px;
  padding-inline: 28px;
}

.kb-landing-hero__trust {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  line-height: 19px;
}

.kb-landing-eyebrow {
  margin: 0 0 12px;
  color: var(--kb-caption);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
}

.kb-landing-section-copy h2 {
  max-width: 500px;
  margin: 0;
  color: var(--kb-ink);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}

.kb-landing-section-copy > p:last-child {
  max-width: 460px;
  margin: 20px 0 0;
  color: var(--kb-body);
  font-size: 16px;
  line-height: 24px;
}

.kb-landing-conversation {
  padding-block: 128px;
  background: var(--kb-background);
}

.kb-landing-conversation__layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.76fr) minmax(0, 1.24fr);
  align-items: center;
  gap: 80px;
}

.kb-landing-conversation__heading h2 {
  max-width: 480px;
}

.kb-landing-conversation__heading > p:last-child {
  max-width: 440px;
}

.kb-landing-conversation__figure {
  margin: 0;
}

.kb-landing-conversation__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  object-fit: cover;
  object-position: 72% center;
}

.kb-landing-conversation__figure figcaption {
  margin-top: 12px;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-landing-exchange {
  margin-top: 40px;
  border-top: 1px solid var(--kb-border-subtle);
  border-bottom: 1px solid var(--kb-border-subtle);
}

.kb-landing-exchange p {
  display: grid;
  margin: 0;
  padding-block: 20px;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  color: var(--kb-body);
  font-size: 13px;
  line-height: 20px;
}

.kb-landing-exchange p + p {
  border-top: 1px solid var(--kb-border-subtle);
}

.kb-landing-exchange span {
  color: var(--kb-caption);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
}

.kb-landing-steps {
  padding-block: 128px;
  border-top: 1px solid var(--kb-divider-subtle);
  background: var(--kb-background);
}

.kb-landing-steps__layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.24fr);
  align-items: start;
  gap: 96px;
}

.kb-landing-steps__story {
  position: sticky;
  top: 40px;
}

.kb-landing-steps__story h2 {
  max-width: 440px;
  margin: 0;
  color: var(--kb-ink);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}

.kb-landing-steps__intro {
  max-width: 440px;
  margin: 20px 0 0;
  color: var(--kb-body);
  font-size: 15px;
  line-height: 22px;
}

.kb-landing-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kb-landing-steps__list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  gap: 16px;
  padding-block: 32px;
  border-top: 1px solid var(--kb-border-subtle);
}

.kb-landing-steps__list li:last-child {
  border-bottom: 1px solid var(--kb-border-subtle);
}

.kb-landing-step-number {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kb-border-subtle);
  border-radius: 12px;
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}

.kb-landing-steps__list h3 {
  margin: 0;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.kb-landing-steps__list p {
  max-width: 400px;
  margin: 6px 0 0;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 20px;
}

.kb-landing-steps__boundary {
  margin: 24px 0 0;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 17px;
}

.kb-landing-real-life {
  padding-block: 128px;
  border-top: 1px solid var(--kb-divider-subtle);
  background: var(--kb-background);
}

.kb-landing-real-life__heading {
  max-width: 720px;
}

.kb-landing-real-life__heading h2 {
  max-width: 640px;
}

.kb-landing-real-life__heading > p:last-child {
  max-width: 620px;
}

.kb-landing-real-life__figure {
  margin: 64px 0 0;
}

.kb-landing-real-life__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: 16px;
  object-fit: cover;
  object-position: center 46%;
}

.kb-landing-real-life__figure figcaption {
  margin-top: 12px;
  color: var(--kb-caption);
  font-size: 12px;
  line-height: 16px;
}

.kb-landing-real-life__details {
  display: grid;
  margin-top: 48px;
  border-top: 1px solid var(--kb-border-subtle);
  border-bottom: 1px solid var(--kb-border-subtle);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kb-landing-real-life__details article {
  padding: 40px 40px 40px 0;
}

.kb-landing-real-life__details article + article {
  padding-inline: 40px;
  border-left: 1px solid var(--kb-border-subtle);
}

.kb-landing-real-life__details article:last-child {
  padding-right: 0;
}

.kb-landing-detail-number {
  color: var(--kb-caption);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}

.kb-landing-real-life__details h3 {
  margin: 24px 0 0;
  color: var(--kb-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.kb-landing-real-life__details p {
  margin: 8px 0 0;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 20px;
}

.kb-landing-role-paths {
  padding-block: 112px 80px;
  border-top: 1px solid var(--kb-divider-subtle);
  background: var(--kb-background);
}

.kb-landing-role-paths__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  align-items: end;
  gap: 64px;
}

.kb-landing-role-paths__heading h2 {
  max-width: 560px;
  margin: 0;
  color: var(--kb-ink);
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
}

.kb-landing-role-paths__heading > p:last-child {
  max-width: 420px;
  justify-self: end;
  margin: 0;
  color: var(--kb-body);
  font-size: 15px;
  line-height: 22px;
}

.kb-landing-role-paths__grid {
  margin-top: 48px;
  border-top: 1px solid var(--kb-border-subtle);
}

.kb-landing-role-card {
  display: grid;
  min-height: 240px;
  padding: 32px 0;
  grid-template-columns: minmax(220px, 0.62fr) minmax(128px, 0.3fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid var(--kb-border-subtle);
  color: var(--kb-ink);
  text-decoration: none;
  transition:
    background-color var(--kb-motion-fast) var(--kb-ease-standard),
    color var(--kb-motion-fast) var(--kb-ease-standard);
}

.kb-landing-role-card:hover {
  background: var(--kb-fill);
}

.kb-landing-role-card:active {
  background: var(--kb-surface-muted);
}

.kb-landing-role-card:focus-visible {
  z-index: 1;
  outline: 2px solid var(--kb-primary);
  outline-offset: 4px;
}

.kb-landing-role-card__figure {
  min-width: 0;
  margin: 0;
}

.kb-landing-role-card__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  object-fit: cover;
}

.kb-landing-role-card__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--kb-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.kb-landing-role-card__status span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
}

.kb-landing-role-card--korean .kb-landing-role-card__status span {
  background: var(--kb-korean-strong);
}

.kb-landing-role-card--international .kb-landing-role-card__status span {
  background: var(--kb-international-strong);
}

.kb-landing-role-card__copy {
  max-width: 520px;
}

.kb-landing-role-card__copy h3 {
  margin: 0;
  color: var(--kb-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.kb-landing-role-card__copy p {
  margin: 12px 0 0;
  color: var(--kb-body);
  font-size: 15px;
  line-height: 22px;
}

.kb-landing-role-card__action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  color: var(--kb-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.kb-landing-role-card__arrow {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid var(--kb-border-muted);
  border-radius: 9999px;
  background: var(--kb-surface);
  transition:
    transform var(--kb-motion-fast) var(--kb-ease-standard),
    border-color var(--kb-motion-fast) var(--kb-ease-standard),
    background-color var(--kb-motion-fast) var(--kb-ease-standard),
    color var(--kb-motion-fast) var(--kb-ease-standard);
}

.kb-landing-role-card__arrow .material-symbols-outlined {
  font-size: 18px;
}

.kb-landing-role-card:hover .kb-landing-role-card__arrow {
  border-color: var(--kb-ink);
  background: var(--kb-ink);
  color: var(--kb-surface);
  transform: translateX(4px);
}

.kb-landing-faq {
  padding-block: 80px 112px;
  border-top: 1px solid var(--kb-divider-subtle);
  background: var(--kb-background);
}

.kb-landing-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 96px;
}

.kb-landing-faq__heading {
  position: static;
}

.kb-landing-faq__heading h2 {
  max-width: 400px;
  margin: 0;
  color: var(--kb-ink);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}

.kb-landing-faq__heading > p:last-child {
  max-width: 380px;
  margin: 20px 0 0;
  color: var(--kb-body);
  font-size: 15px;
  line-height: 22px;
}

.kb-landing-faq__list {
  border-top: 1px solid var(--kb-border-subtle);
}

.kb-landing-faq__list details {
  border-bottom: 1px solid var(--kb-border-subtle);
}

.kb-landing-faq__list summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  color: var(--kb-ink);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  list-style: none;
}

.kb-landing-faq__list summary::-webkit-details-marker {
  display: none;
}

.kb-landing-faq__list summary:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--kb-focus);
  outline-offset: 4px;
}

.kb-landing-faq__list summary .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--kb-caption);
  font-size: 22px;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-landing-faq__list details[open] summary .material-symbols-outlined {
  transform: rotate(180deg);
}

.kb-landing-faq__list details > p {
  max-width: 600px;
  margin: 8px 0 24px;
  padding-right: 40px;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 22px;
}

.kb-landing-final {
  padding: 24px;
  background: var(--kb-background);
}

.kb-landing-final__inner {
  padding: 96px 32px;
  border-radius: 16px;
  background: var(--kb-ink);
  text-align: center;
}

.kb-landing-final .kb-landing-eyebrow {
  color: rgba(255, 255, 255, 0.58);
}

.kb-landing-final h2 {
  max-width: 720px;
  margin: 0 auto;
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.kb-landing-final__inner > p:not(.kb-landing-eyebrow, .kb-landing-final__boundary) {
  max-width: 560px;
  margin: 20px auto 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  line-height: 24px;
}

.kb-landing-button--final {
  gap: 8px;
  min-width: 184px;
  margin-top: 32px;
  padding-inline: 28px;
}

.kb-landing-button--final .material-symbols-outlined {
  font-size: 19px;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-landing-button--final:hover .material-symbols-outlined {
  transform: translateX(3px);
}

.kb-landing-final__boundary {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  line-height: 17px;
}

.kb-landing-footer {
  padding-block: 80px 40px;
  background: var(--kb-background);
}

.kb-landing-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: 80px;
}

.kb-landing-footer__brand > a {
  color: var(--kb-ink);
  font-size: 25px;
  font-weight: 800;
  line-height: 32px;
  text-decoration: none;
  letter-spacing: -0.04em;
}

.kb-landing-footer__brand p {
  max-width: 320px;
  margin: 16px 0 0;
  color: var(--kb-body);
  font-size: 14px;
  line-height: 21px;
}

.kb-landing-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: end;
  gap: 56px;
}

.kb-landing-footer__nav div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.kb-landing-footer__nav p {
  margin: 0 0 4px;
  color: var(--kb-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.kb-landing-footer__nav a {
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
}

.kb-landing-footer__nav a:hover {
  color: var(--kb-ink);
}

.kb-landing-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--kb-border-subtle);
}

.kb-landing-footer__legal p {
  margin: 0;
  color: var(--kb-caption);
  font-size: 11px;
  line-height: 16px;
}

.kb-landing-reveal.is-reveal-pending {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--kb-motion-slow) var(--kb-ease-enter),
    transform var(--kb-motion-slow) var(--kb-ease-enter);
}

.kb-landing-reveal.is-reveal-pending.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes kb-landing-hero-settle {
  from {
    opacity: 0.84;
    transform: scale(1.02);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes kb-landing-content-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kb-landing-hero__image {
  animation: kb-landing-hero-settle var(--kb-motion-slow) var(--kb-ease-enter) both;
}

.kb-landing-nav__inner,
.kb-landing-hero__content {
  animation: kb-landing-content-enter var(--kb-motion-slow) var(--kb-ease-enter) both;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .kb-landing-shell {
    padding-left: max(32px, env(safe-area-inset-left));
    padding-right: max(32px, env(safe-area-inset-right));
  }

  .kb-landing-conversation,
  .kb-landing-steps,
  .kb-landing-real-life {
    padding-block: 96px;
  }

  .kb-landing-role-paths {
    padding-block: 96px 72px;
  }

  .kb-landing-faq {
    padding-block: 72px 96px;
  }

  .kb-landing-conversation__layout {
    gap: 40px;
  }

  .kb-landing-steps__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  .kb-landing-real-life__details article {
    padding-right: 24px;
  }

  .kb-landing-real-life__details article + article {
    padding-inline: 24px;
  }

  .kb-landing-role-paths__heading {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
    gap: 40px;
  }

  .kb-landing-role-card {
    grid-template-columns: minmax(184px, 0.56fr) minmax(104px, 0.24fr) minmax(0, 1fr);
    gap: 24px;
  }

  .kb-landing-role-card__action {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .kb-landing-faq__inner {
    gap: 56px;
  }
}

@media (max-width: 767px) {
  .kb-landing-nav__inner {
    min-height: 64px;
    grid-template-columns: 1fr auto;
    gap: 16px;
  }

  .kb-landing-nav__links,
  .kb-landing-nav__login {
    display: none;
  }

  .kb-landing-nav__actions {
    gap: 0;
  }

  .kb-landing-button--nav {
    display: none;
  }

  .kb-landing-hero {
    min-height: 720px;
    height: 100svh;
    max-height: 840px;
    align-items: flex-end;
  }

  .kb-landing-hero::after {
    background:
      linear-gradient(0deg, rgba(10, 13, 13, 0.88) 0%, rgba(10, 13, 13, 0.56) 46%, rgba(10, 13, 13, 0.04) 80%),
      linear-gradient(90deg, rgba(10, 13, 13, 0.16) 0%, rgba(10, 13, 13, 0) 100%);
  }

  .kb-landing-hero__image {
    object-position: 60% center;
  }

  .kb-landing-hero__content {
    width: 100%;
    padding-block: 104px 48px;
  }

  .kb-landing-hero__content h1 {
    max-width: 340px;
    font-size: 36px;
    line-height: 42px;
  }

  .kb-landing-hero__lead {
    max-width: 340px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 20px;
  }

  .kb-landing-button--hero {
    width: 100%;
    margin-top: 24px;
  }

  .kb-landing-hero__trust {
    margin-top: 12px;
  }

  .kb-landing-section-copy h2,
  .kb-landing-role-paths__heading h2 {
    font-size: 26px;
    line-height: 35px;
  }

  .kb-landing-conversation {
    padding-block: 64px;
  }

  .kb-landing-conversation__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .kb-landing-conversation__figure img {
    aspect-ratio: 4 / 3;
    object-position: 72% center;
  }

  .kb-landing-exchange {
    margin-top: 32px;
  }

  .kb-landing-steps {
    padding-block: 64px;
  }

  .kb-landing-steps__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .kb-landing-steps__story {
    position: static;
  }

  .kb-landing-steps__story h2 {
    font-size: 26px;
    line-height: 35px;
  }

  .kb-landing-steps__list {
    margin-top: 0;
  }

  .kb-landing-steps__list li,
  .kb-landing-steps__list li + li,
  .kb-landing-steps__list li:last-child {
    padding: 20px 0;
  }

  .kb-landing-steps__list li:last-child {
    border-bottom: 1px solid var(--kb-border-subtle);
  }

  .kb-landing-real-life,
  .kb-landing-role-paths,
  .kb-landing-faq {
    padding-block: 64px;
  }

  .kb-landing-role-paths {
    padding-bottom: 48px;
  }

  .kb-landing-faq {
    padding-top: 48px;
  }

  .kb-landing-real-life__details {
    margin-top: 48px;
    grid-template-columns: 1fr;
  }

  .kb-landing-real-life__figure {
    margin-top: 40px;
  }

  .kb-landing-real-life__figure img {
    aspect-ratio: 4 / 3;
    object-position: center;
  }

  .kb-landing-real-life__details article,
  .kb-landing-real-life__details article + article,
  .kb-landing-real-life__details article:last-child {
    padding: 32px 0;
    border-top: 1px solid var(--kb-border-subtle);
    border-left: 0;
  }

  .kb-landing-real-life__details article:first-child {
    border-top: 0;
  }

  .kb-landing-role-paths__heading {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .kb-landing-role-paths__heading > p:last-child {
    justify-self: start;
    margin: 0;
  }

  .kb-landing-role-paths__grid {
    margin-top: 32px;
  }

  .kb-landing-role-card {
    min-height: 0;
    padding: 32px 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .kb-landing-role-card__figure {
    margin-bottom: 24px;
  }

  .kb-landing-role-card__copy {
    margin-top: 16px;
  }

  .kb-landing-role-card__copy h3 {
    font-size: 20px;
    line-height: 27px;
  }

  .kb-landing-role-card__action {
    grid-column: auto;
    justify-content: space-between;
    justify-self: stretch;
    margin-top: 24px;
  }

  .kb-landing-faq__inner,
  .kb-landing-footer__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .kb-landing-faq__heading {
    position: static;
  }

  .kb-landing-faq__heading h2 {
    font-size: 26px;
    line-height: 35px;
  }

  .kb-landing-faq__list summary {
    min-height: 64px;
    font-size: 15px;
    line-height: 21px;
  }

  .kb-landing-faq__list details > p {
    padding-right: 24px;
  }

  .kb-landing-final {
    padding: 12px;
  }

  .kb-landing-final__inner {
    padding: 64px 20px;
  }

  .kb-landing-final h2 {
    font-size: 30px;
    line-height: 38px;
  }

  .kb-landing-button--final {
    width: 100%;
  }

  .kb-landing-footer {
    padding-block: 64px 32px;
  }

  .kb-landing-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 40px 24px;
  }

  .kb-landing-footer__legal {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-landing-nav__inner,
  .kb-landing-hero__content,
  .kb-landing-hero__image {
    animation: none;
  }

  .kb-landing-reveal.is-reveal-pending,
  .kb-landing-reveal.is-reveal-pending.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .kb-landing-button,
  .kb-landing-nav__links a,
  .kb-landing-nav__login,
  .kb-landing-faq__list summary .material-symbols-outlined,
  .kb-landing-button--final .material-symbols-outlined {
    transition: none;
  }
}

/* Composer: blocked-post feedback ------------------------------------- */
.kb-composer-topic--missing {
  box-shadow: 0 0 0 2px var(--kb-safety-deep);
}

.kb-composer-topic--missing select,
.kb-composer-topic--missing span {
  color: var(--kb-safety-deep);
}

@keyframes kb-attention-shake {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(3px); }
  50% { transform: translateX(-3px); }
  100% { transform: none; }
}

.kb-attention-shake {
  animation: kb-attention-shake 320ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .kb-attention-shake {
    animation: none;
  }
}

/* ============================================================
   1:1 call controls (calls#show)

   The call canvas opts out of every `main:not([data-call-canvas])` rule above,
   so this surface has to own its own press, focus, and disabled treatment —
   it inherits none of the global button normalisation.

   DESIGN.md mapping:
   - idle toggle  -> Neutral Weak (§4: #f3f4f5 fill, Ink glyph)
   - engaged      -> Ink fill + white glyph (§4 Chips "Selected")
   - end call     -> Critical Solid (§4: Safety Red Deep #f04452 + white)
   - disabled     -> §14 (fill + muted glyph, geometry unchanged)
   - press/focus  -> §15 motion-fast / ease-standard, §2 focus ring
   ============================================================ */

.kb-call-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--kb-shadow-float);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* The toggles are grouped so a failed call can retract them while End — the
   only exit inside thumb reach — stays on screen. */
.kb-call-toggles {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

/* application.css loads after tailwind.css, so the display above would
   otherwise beat the `hidden` utility the call controller toggles. */
.kb-call-toggles.hidden {
  display: none;
}

.kb-call-control {
  display: flex;
  width: 56px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.kb-call-control--end {
  width: 64px;
}

.kb-call-control__button {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: var(--kb-fill);
  color: var(--kb-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--kb-motion-fast) var(--kb-ease-standard),
    color var(--kb-motion-fast) var(--kb-ease-standard),
    transform var(--kb-motion-fast) var(--kb-ease-standard);
}

.kb-call-control__button .material-symbols-outlined {
  font-size: 26px;
}

/* Critical Solid. The pale safety tint cannot carry white text, so the
   destructive control uses Safety Red Deep (DESIGN.md §2, §4). */
.kb-call-control__button--end {
  width: 64px;
  height: 64px;
  background: var(--kb-safety-deep);
  color: #ffffff;
}

.kb-call-control__button--end .material-symbols-outlined {
  font-size: 30px;
}

/* A filled toggle means "changed from default" — muted mic, camera on. The
   glyph says which one; the fill is what makes it readable at a glance
   mid-call, which an icon swap alone never was. */
.kb-call-control__button.is-active {
  background: var(--kb-ink);
  color: var(--kb-on-primary);
}

.kb-call-control__button:active {
  transform: scale(0.98);
}

.kb-call-control__button:focus-visible {
  outline: 2px solid var(--kb-primary);
  outline-offset: 2px;
}

/* Last and highest-specificity so it wins over --end and .is-active: a
   locked or unavailable control must not read as live or engaged. */
.kb-call-control__button:disabled,
.kb-call-control__button[aria-disabled="true"] {
  background: var(--kb-fill);
  color: var(--kb-placeholder);
  cursor: default;
  pointer-events: none;
}

.kb-call-control__label {
  color: var(--kb-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  text-align: center;
}

.kb-call-control__button:disabled ~ .kb-call-control__label,
.kb-call-control__button[aria-disabled="true"] ~ .kb-call-control__label {
  color: var(--kb-placeholder);
}

@media (hover: hover) {
  .kb-call-control__button:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--kb-border-muted);
  }

  .kb-call-control__button.is-active:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--kb-body);
  }

  .kb-call-control__button--end:not(:disabled):not([aria-disabled="true"]):hover {
    background: color-mix(in srgb, var(--kb-safety-deep) 88%, #000000);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-call-control__button {
    transition: none;
  }

  .kb-call-control__button:active {
    transform: none;
  }
}

/* Chat message reactions
   ---------------------------------------------------------------------------
   Pills hang under the bubble and only render once a reaction exists, so an
   untouched thread keeps its density (Principle 8). The "you reacted" state is
   the one orange moment here: tint fill plus a hairline brand border, no solid
   fill competing with the composer CTA (Principle 1). */
.kb-reaction-row {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 4px;
}

.kb-reaction-row[hidden] {
  display: none;
}

.kb-reaction-pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--kb-fill);
  color: var(--kb-body);
  font-size: 13px;
  line-height: 18px;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kb-reaction-pill--mine {
  background: var(--kb-primary-tint);
  border-color: var(--kb-primary);
  color: var(--kb-ink);
}

.kb-reaction-pill__count {
  font-size: 12px;
  font-weight: 500;
}

.kb-reaction-anchor {
  position: relative;
  display: inline-flex;
}

.kb-reaction-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--kb-border);
  border-radius: 16px;
  background: var(--kb-surface);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1),
              transform 150ms cubic-bezier(0, 0, 0.2, 1);
}

.kb-reaction-picker[hidden] {
  display: none;
}

.kb-reaction-picker--closed {
  opacity: 0;
  transform: translateY(4px);
}

.kb-reaction-picker--start {
  left: 0;
}

.kb-reaction-picker--end {
  right: 0;
}

.kb-reaction-picker__option {
  display: inline-flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
}

.kb-reaction-picker__option[aria-pressed="true"] {
  background: var(--kb-primary-tint);
}

@media (prefers-reduced-motion: reduce) {
  .kb-reaction-pill,
  .kb-reaction-picker {
    transition: none;
  }
}

/* ========================================================================
   Pull-to-refresh (web) — scoped list PTR used where native PTR is disabled.
   See app/javascript/controllers/pull_to_refresh_controller.js.
   DESIGN.md §Motion: this is a *web* PTR, not the licensed native-platform
   exception, so it uses damped resistance + an ease-out return — no spring,
   no overshoot, no bounce.
   ======================================================================== */
.kb-pull-refresh {
  position: relative;
}

.kb-pull-refresh__track {
  will-change: transform;
}

/* Sits in normal flow above the content; its height is driven by the
   controller, so the gap it opens exactly tracks the translated content. */
.kb-pull-refresh__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  overflow: hidden;
}

.kb-pull-refresh__spinner {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  border: 2.5px solid var(--kb-border, rgba(26, 28, 32, 0.12));
  border-top-color: var(--kb-primary, #ff6600);
  opacity: 0.4;
}

/* Only spin while a refresh is actually running. */
.kb-pull-refresh.is-refreshing .kb-pull-refresh__spinner {
  opacity: 1;
  animation: kb-pull-refresh-spin 0.8s linear infinite;
}

/* "Ready to release" cue — opacity lift only, no color/bounce change. */
.kb-pull-refresh.is-ready .kb-pull-refresh__spinner {
  opacity: 0.85;
}

@keyframes kb-pull-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Visually hidden, screen-reader-live status ("Refreshing" / "Updated"). */
.kb-pull-refresh__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kb-pull-refresh.is-refreshing .kb-pull-refresh__spinner {
    animation: none;
  }
}