/* Kevin Solo public experience contract
   Loaded after page styles. It standardizes public typography, navigation,
   responsive behavior and touch targets without changing business logic. */

:root {
  --kv-display-home: 68px;
  --kv-display-feature: 64px;
  --kv-display-article: 56px;
  --kv-display-compact: 46px;
  --kv-public-max: 1410px;
  --kv-public-reading: 820px;
  --kv-public-gutter: 32px;
  --kv-public-ink: #24241f;
  --kv-public-muted: #6f6b63;
  --kv-public-green: #123f35;
  --kv-public-green-2: #245645;
  --kv-public-wine: #92283a;
  --kv-public-paper: #fffdf8;
  --kv-public-canvas: #f4ead6;
  --kv-public-line: rgba(35, 49, 42, 0.14);
  --kv-public-shadow: 0 20px 54px rgba(43, 37, 28, 0.09);
  --kv-public-radius: 20px;
  --kv-public-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --kv-public-display: "Songti SC", "STSong", "SimSun", serif;
}

html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) {
  max-width: 100%;
  overflow-x: clip;
  color: var(--kv-public-ink);
  font-family: var(--kv-public-sans);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin),
body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) *,
body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) *::before,
body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) *::after {
  box-sizing: border-box;
}

body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) img,
body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) video,
body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) canvas,
body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) iframe {
  max-width: 100%;
}

[data-kv-title] {
  max-width: 100%;
  margin-top: 0;
  color: var(--kv-public-ink);
  font-family: var(--kv-public-display);
  font-weight: 700;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  overflow-wrap: break-word;
  text-wrap: pretty;
  white-space: normal !important;
}

body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) [data-kv-title="home"] {
  max-width: 12ch;
  font-size: var(--kv-display-home) !important;
  line-height: 1.04 !important;
}

body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) [data-kv-title="feature"] {
  max-width: 18ch;
  font-size: var(--kv-display-feature) !important;
}

body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) [data-kv-title="article"] {
  max-width: 19ch;
  font-size: var(--kv-display-article) !important;
  line-height: 1.08 !important;
}

body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) [data-kv-title="compact"] {
  max-width: 20ch;
  font-size: var(--kv-display-compact) !important;
  line-height: 1.08 !important;
}

body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) .kv-title-line {
  display: block !important;
}

.kv-title-mobile-line {
  display: inline;
}

body.kv-quiz:has(#quizShell) .hero [data-kv-title="feature"] {
  font-size: var(--kv-display-feature) !important;
}

/* Public navigation: preserve each template's structure, unify behavior. */
[data-kv-nav] {
  width: 100%;
  max-width: 100%;
  padding-left: max(var(--kv-public-gutter), env(safe-area-inset-left));
  padding-right: max(var(--kv-public-gutter), env(safe-area-inset-right));
  color: var(--kv-public-ink);
  font-family: var(--kv-public-sans);
  letter-spacing: 0;
}

[data-kv-nav] a,
[data-kv-nav] button {
  min-width: 0;
  letter-spacing: 0;
  text-underline-offset: 4px;
}

[data-kv-nav] a:focus-visible,
[data-kv-nav] button:focus-visible,
body:not(.kv-admin) a:focus-visible,
body:not(.kv-admin) button:focus-visible,
body:not(.kv-admin) input:focus-visible,
body:not(.kv-admin) select:focus-visible,
body:not(.kv-admin) textarea:focus-visible {
  outline: 3px solid rgba(184, 137, 77, 0.42);
  outline-offset: 3px;
}

body:not(.kv-admin) .btn,
body:not(.kv-admin) [class*="btn-"] {
  min-height: 44px;
  letter-spacing: 0;
}

body:not(.kv-admin) p,
body:not(.kv-admin) li,
body:not(.kv-admin) dd,
body:not(.kv-admin) blockquote {
  letter-spacing: 0;
  text-wrap: pretty;
}

/* Homepage: keep the report sample beside the message without collision. */
.kv-home .hero-grid {
  align-items: start !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(460px, 0.82fr) !important;
  gap: 64px !important;
}

.kv-home .hero-copy,
.kv-home .hero-report-card {
  min-width: 0;
}

.kv-home .hero-title {
  margin-bottom: 32px !important;
}

.kv-home .hero-subtitle,
.kv-home .hero-stance {
  max-width: 780px;
}

.kv-home .hero-report-card {
  width: 100%;
  max-width: 610px;
  justify-self: end;
}

/* Product and assessment feature pages. */
.kv-knowledge [data-kv-title="feature"],
.kv-prompts [data-kv-title="feature"],
.kv-about [data-kv-title="feature"],
.kv-articles [data-kv-title="feature"],
.kv-diagnosis-sample [data-kv-title="feature"],
.kv-fuye [data-kv-title="feature"],
.kv-quiz [data-kv-title="feature"],
.kv-report [data-kv-title="feature"] {
  margin-bottom: 24px;
}

.kv-knowledge .knowledge-hero-copy,
.kv-prompts .hero-copy,
.kv-diagnosis-sample .diagnosis-hero-copy,
.kv-fuye .hero > *,
.kv-quiz .panel,
.kv-report .hero {
  min-width: 0;
}

.kv-prompts .hero-grid,
.kv-knowledge .knowledge-hero-grid,
.kv-diagnosis-sample .diagnosis-hero-grid {
  align-items: start;
}

/* Article system: predictable reading width and a quieter headline scale. */
body.kv-article > [data-kv-title="article"] {
  width: min(calc(100% - 64px), 1040px);
  margin: 72px auto 32px;
}

.kv-article-category [data-kv-title="feature"],
.kv-articles [data-kv-title="feature"] {
  margin-bottom: 24px;
}

.kv-article article,
.kv-article .article-body,
.kv-article .article-content {
  overflow-wrap: break-word;
}

@media (max-width: 1240px) {
  :root {
    --kv-display-home: 60px;
    --kv-display-feature: 56px;
    --kv-display-article: 50px;
    --kv-display-compact: 42px;
    --kv-public-gutter: 28px;
  }

  .kv-home .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr) !important;
    gap: 40px !important;
  }

  .kv-home .hero-report-card {
    max-width: 560px;
  }
}

@media (max-width: 980px) {
  :root {
    --kv-display-home: 54px;
    --kv-display-feature: 48px;
    --kv-display-article: 44px;
    --kv-display-compact: 38px;
    --kv-public-gutter: 24px;
  }

  body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) [data-kv-title="home"] {
    max-width: 13ch;
  }

  [data-kv-nav] {
    min-height: 68px;
  }

  .kv-home .hero-grid,
  .kv-prompts .hero-grid,
  .kv-knowledge .knowledge-hero-grid,
  .kv-diagnosis-sample .diagnosis-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .kv-home .hero-grid {
    gap: 48px !important;
  }

  .kv-home .hero-report-card {
    max-width: 720px;
    justify-self: start;
  }

  body.kv-knowledge .page,
  body.kv-diagnosis-sample .page,
  body.kv-prompts > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(32px, env(safe-area-inset-left)) !important;
    padding-right: max(32px, env(safe-area-inset-right)) !important;
  }

  .kv-prompts .hero-card,
  .kv-knowledge .knowledge-product-card,
  .kv-diagnosis-sample .diagnosis-sample-card {
    width: 100%;
    max-width: 720px;
  }

  body.kv-article > [data-kv-title="article"] {
    width: min(calc(100% - 48px), 900px);
    margin-top: 56px;
  }
}

@media (max-width: 720px) {
  :root {
    --kv-display-home: 42px;
    --kv-display-feature: 40px;
    --kv-display-article: 36px;
    --kv-display-compact: 34px;
    --kv-public-gutter: 20px;
    --kv-public-radius: 16px;
  }

  [data-kv-nav] {
    min-height: 60px;
    padding-left: max(var(--kv-public-gutter), env(safe-area-inset-left));
    padding-right: max(var(--kv-public-gutter), env(safe-area-inset-right));
  }

  [data-kv-nav] a,
  [data-kv-nav] button,
  body:not(.kv-admin) .btn,
  body:not(.kv-admin) [class*="btn-"] {
    min-height: 44px;
  }

  body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) [data-kv-title="home"],
  body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) [data-kv-title="feature"],
  body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) [data-kv-title="article"],
  body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) [data-kv-title="compact"] {
    max-width: 100%;
  }

  .kv-home .hero-grid {
    gap: 36px !important;
  }

  body.kv-knowledge .page,
  body.kv-diagnosis-sample .page,
  body.kv-prompts > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
  }

  .kv-title-mobile-line {
    display: block !important;
  }

  .kv-knowledge .knowledge-hero-copy h1 {
    width: auto !important;
  }

  .kv-site-nav[data-kv-nav="public"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .kv-site-nav[data-kv-nav="public"] .kv-site-brand {
    min-height: 44px !important;
    justify-self: start;
  }

  .kv-site-nav[data-kv-nav="public"] .kv-site-links {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    scrollbar-width: none;
  }

  .kv-site-nav[data-kv-nav="public"] .kv-site-links::-webkit-scrollbar {
    display: none;
  }

  .kv-site-nav[data-kv-nav="public"] .kv-site-links a {
    display: inline-flex !important;
    min-height: 44px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    white-space: nowrap !important;
  }

  .kv-home .hero-title,
  .kv-knowledge [data-kv-title="feature"],
  .kv-prompts [data-kv-title="feature"],
  .kv-about [data-kv-title="feature"],
  .kv-articles [data-kv-title="feature"],
  .kv-diagnosis-sample [data-kv-title="feature"],
  .kv-fuye [data-kv-title="feature"],
  .kv-quiz [data-kv-title="feature"],
  .kv-report [data-kv-title="feature"] {
    margin-bottom: 20px !important;
  }

  .kv-home .hero-actions,
  .kv-knowledge .btn-row,
  .kv-prompts .hero-actions,
  .kv-diagnosis-sample .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .kv-home .hero-actions > *,
  .kv-knowledge .btn-row > *,
  .kv-prompts .hero-actions > *,
  .kv-diagnosis-sample .hero-actions > * {
    width: 100%;
    justify-content: center;
  }

  body.kv-article > [data-kv-title="article"] {
    width: min(calc(100% - 40px), 680px);
    margin: 40px auto 24px;
  }
}

@media (max-width: 430px) {
  :root {
    --kv-display-home: 34px;
    --kv-display-feature: 34px;
    --kv-display-article: 32px;
    --kv-display-compact: 30px;
    --kv-public-gutter: 16px;
  }

  [data-kv-title] {
    line-height: 1.10 !important;
  }

  body:not(.kv-admin):not(.kv-fuye-admin):not(.kv-prompts-admin) [data-kv-title="home"] {
    line-height: 1.06 !important;
  }

  [data-kv-nav] {
    min-height: 56px;
  }

  .kv-site-nav[data-kv-nav="public"] .kv-site-links {
    gap: 7px !important;
  }

  .kv-site-nav[data-kv-nav="public"] .kv-site-links a {
    min-height: 40px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 14px !important;
  }

  body.kv-articles .kv-site-nav[data-kv-nav="public"] .kv-site-links a[href="/articles/"],
  body.kv-article-category .kv-site-nav[data-kv-nav="public"] .kv-site-links a[href="/articles/"] {
    display: none !important;
  }

  .kv-home .hero-grid {
    gap: 28px !important;
  }

  .kv-home .hero-title {
    margin-bottom: 22px !important;
  }

  .kv-home .portrait-frame {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.kv-article > [data-kv-title="article"] {
    width: min(calc(100% - 32px), 600px);
    margin-top: 32px;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  body.kv-prompts .header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  body.kv-prompts .header-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px 14px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  body.kv-prompts .logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.kv-prompts .header-cta {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin-left: 0 !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    white-space: nowrap !important;
  }

  body.kv-prompts .search-bar {
    order: 0 !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    flex-basis: auto !important;
    max-width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
  }

  body.kv-prompts .filters {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding-bottom: 12px !important;
  }

  body.kv-prompts .filters > span {
    display: none !important;
  }

  body.kv-prompts .filter-btn {
    flex: 0 1 auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 340px) {
  :root {
    --kv-display-home: 30px;
    --kv-display-feature: 30px;
    --kv-display-article: 29px;
    --kv-display-compact: 28px;
  }

  .kv-site-nav[data-kv-nav="public"] {
    gap: 6px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .kv-site-nav[data-kv-nav="public"] .kv-site-links {
    gap: 5px !important;
  }

  .kv-site-nav[data-kv-nav="public"] .kv-site-links a {
    min-height: 36px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.kv-admin) *,
  body:not(.kv-admin) *::before,
  body:not(.kv-admin) *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}