/*
 * KN Origin Lab
 * Phase 20F.3G — Product Contrast & Surface Parity
 */

.kn-safe-area-shell {
  width: 100%;
  max-width: 120rem !important;
}

[data-reading-surface="true"] {
  width: 100% !important;
  min-width: 0;
  zoom: 1 !important;
  transform: none !important;
  transform-origin: top left;
}

:where(
  .kn-reading-content,
  .kn-readable,
  .tutorial-body,
  .concept-body,
  .prose,
  [data-reading-content="true"],
  main article p,
  main article li,
  main article blockquote
) {
  font-size:
    calc(
      1rem *
      var(--reader-display-scale)
    ) !important;
}

html[data-theme="light"] body .text-ink-300 {
  color: rgb(86 101 121) !important;
}

html[data-theme="light"] body .text-ink-400 {
  color: rgb(70 85 105) !important;
}

html[data-theme="light"] body .text-ink-500 {
  color: rgb(71 85 105) !important;
}

html[data-theme="light"] body .border-border {
  border-color: rgb(198 210 223) !important;
}

html[data-theme="light"] body .border-border-strong {
  border-color: rgb(166 184 202) !important;
}

html[data-theme="light"] body .bg-paper {
  background-color: rgb(243 247 251) !important;
}

html[data-theme="light"] body .bg-surface-2 {
  background-color: rgb(246 249 252) !important;
}

html[data-theme="light"] body .bg-surface-3 {
  background-color: rgb(234 240 246) !important;
}

html[data-theme="light"] body
  .placeholder\:text-ink-300::placeholder {
  color: rgb(100 116 139) !important;
  opacity: 1;
}

html[data-theme="light"] body
  :where(.shadow-card, .shadow-panel).border-border {
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.9) inset,
    0 10px 30px rgb(15 23 42 / 0.065) !important;
}

body .kn-blueprint.bg-slate-950,
body .kn-blueprint[class*="from-slate-950"] {
  background-color: rgb(2 6 23) !important;
}

body .kn-blueprint.bg-slate-950.text-white {
  color: rgb(248 250 252) !important;
}

body .kn-blueprint.bg-slate-950 .text-slate-300 {
  color: rgb(203 213 225) !important;
}

body .kn-blueprint.bg-slate-950 .text-slate-400 {
  color: rgb(148 163 184) !important;
}

html[data-theme="dark"] body .text-ink-300 {
  color: rgb(148 163 184) !important;
}

html[data-theme="dark"] body .text-ink-400 {
  color: rgb(174 188 207) !important;
}

html[data-theme="dark"] body .text-ink-500 {
  color: rgb(188 201 216) !important;
}

html[data-theme="dark"] body .border-border {
  border-color: rgb(65 82 103) !important;
}

html[data-theme="dark"] body .border-border-strong {
  border-color: rgb(87 105 128) !important;
}

html[data-theme="dark"] body .bg-paper {
  background-color: rgb(7 17 31) !important;
}

html[data-theme="dark"] body .bg-surface-2 {
  background-color: rgb(17 31 50) !important;
}

html[data-theme="dark"] body .bg-surface-3 {
  background-color: rgb(23 40 62) !important;
}

html[data-theme="dark"] body
  .placeholder\:text-ink-300::placeholder {
  color: rgb(148 163 184) !important;
  opacity: 1;
}

html[data-theme="dark"] body
  :where(.shadow-card, .shadow-panel).border-border {
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.025) inset,
    0 14px 38px rgb(0 0 0 / 0.28) !important;
}

@media (min-width: 120rem) {
  .kn-safe-area-shell {
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reading-surface="true"] *,
  [data-reading-surface="true"] *::before,
  [data-reading-surface="true"] *::after {
    transition-duration: 0.001ms !important;
  }
}