/* KIRU 163 — launch accessibility and resilient first-render contract. */
.k163-skip {
  position: fixed;
  inset: max(10px, env(safe-area-inset-top)) auto auto max(10px, env(safe-area-inset-left));
  z-index: 2147483647;
  max-width: calc(100vw - 20px);
  padding: 12px 16px;
  border: 2px solid currentColor;
  border-radius: 12px;
  background: #fff;
  color: #171226;
  font: 800 14px/1.2 system-ui, sans-serif;
  box-shadow: 0 12px 36px rgb(17 12 30 / 28%);
  transform: translateY(-180%);
  transition: transform 120ms ease;
}

.k163-skip:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #ff3f69 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgb(255 255 255 / 92%) !important;
}

html[data-kiru-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: #ff7292 !important;
  box-shadow: 0 0 0 5px rgb(13 11 29 / 94%) !important;
}

/* The legacy concept markup remains as a no-JS fallback source only. Never
   expose invented people or activity while the real community client boots. */
#community:not(.k150-community) > :not(.k163-community-boot) { display: none !important; }

.k163-community-boot {
  display: grid;
  gap: 6px;
  min-height: 180px;
  align-content: center;
  justify-items: center;
  padding: 32px;
  text-align: center;
  color: #625b72;
}

.k163-community-boot::before {
  content: "";
  width: 30px;
  height: 30px;
  border: 3px solid rgb(244 63 94 / 20%);
  border-top-color: #f43f5e;
  border-radius: 50%;
  animation: k163-spin 700ms linear infinite;
}

.k163-community-boot b { color: #171226; font-size: 18px; }
.k163-community-boot span { max-width: 38ch; line-height: 1.55; }
html[data-kiru-theme="dark"] .k163-community-boot { color: #bdb6ca; }
html[data-kiru-theme="dark"] .k163-community-boot b { color: #fff; }

@keyframes k163-spin { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .k163-community-boot::before { animation: none; border-color: #f43f5e; }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight !important;
    box-shadow: none !important;
  }
  .k163-community-boot::before { border-color: CanvasText; }
}

@media (max-width: 760px) {
  .k163-skip { font-size: 16px; }
  :where(button, [role="button"], input, select) { min-height: 44px; }
}

/* KIRU 181 — one clear search affordance. The shortcut remains active in
   JavaScript, but its nested keycap made the header read as two search bars. */
body.kiru-core84 #searchOpen {
  justify-content: flex-start !important;
  gap: 10px !important;
  box-shadow: 0 8px 24px rgb(37 26 78 / 7%) !important;
}

body.kiru-core84 #searchOpen > kbd {
  display: none !important;
}

body.kiru-core84 #searchOpen > b {
  flex: 1 1 auto;
  text-align: left;
}

body.kiru-core84 #searchOpen > span {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
}

/* KIRU 182 — the search dialog is one control. The containing label carries
   the accessible focus state, so the text input must not draw a second box. */
body.kiru-core84 .v47-search-shell [data-v47-search-form] input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

body.kiru-core84 .v47-search-shell [data-v47-search-form] label:focus-within {
  border-color: var(--k84-crimson) !important;
  box-shadow: 0 0 0 4px rgb(244 63 94 / 10%) !important;
}