/* Sprint138: official API panel final readability fix
   Scoped only to .s131-official-panel to avoid conflicts with calculator engine, theme toggle, and other cards. */

.s131-official-panel,
.s131-official-panel * {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

/* Light mode: force readable text tokens inside the official API panel only. */
html:not([data-theme="dark"]) .s131-official-panel,
body:not(.dark) .s131-official-panel {
  color: #07111f !important;
}

html:not([data-theme="dark"]) .s131-official-panel .s131-official-title,
html:not([data-theme="dark"]) .s131-official-panel .s131-section-title,
html:not([data-theme="dark"]) .s131-official-panel strong,
html:not([data-theme="dark"]) .s131-official-panel label,
body:not(.dark) .s131-official-panel .s131-official-title,
body:not(.dark) .s131-official-panel .s131-section-title,
body:not(.dark) .s131-official-panel strong,
body:not(.dark) .s131-official-panel label {
  color: #07111f !important;
  font-weight: 950 !important;
}

html:not([data-theme="dark"]) .s131-official-panel span,
html:not([data-theme="dark"]) .s131-official-panel p,
html:not([data-theme="dark"]) .s131-official-panel .s131-note,
body:not(.dark) .s131-official-panel span,
body:not(.dark) .s131-official-panel p,
body:not(.dark) .s131-official-panel .s131-note {
  color: #263348 !important;
  font-weight: 760 !important;
}

html:not([data-theme="dark"]) .s131-official-panel .s131-api-query-card,
body:not(.dark) .s131-official-panel .s131-api-query-card {
  background: #f5f8fd !important;
  border-color: #b8c5d8 !important;
}

html:not([data-theme="dark"]) .s131-official-panel .s131-api-row input,
body:not(.dark) .s131-official-panel .s131-api-row input {
  background: #ffffff !important;
  color: #07111f !important;
  border-color: #b8c5d8 !important;
  -webkit-text-fill-color: #07111f !important;
}

html:not([data-theme="dark"]) .s131-official-panel .s131-api-row input::placeholder,
body:not(.dark) .s131-official-panel .s131-api-row input::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]) .s131-official-panel .s131-api-result,
body:not(.dark) .s131-official-panel .s131-api-result {
  background: #ffffff !important;
  color: #263348 !important;
  border-color: #b8c5d8 !important;
  -webkit-text-fill-color: #263348 !important;
}

html:not([data-theme="dark"]) .s131-official-panel .s131-api-result[data-ok="true"],
body:not(.dark) .s131-official-panel .s131-api-result[data-ok="true"] {
  background: #e7fbf6 !important;
  color: #073b35 !important;
  border: 1px solid #2dd4bf !important;
  -webkit-text-fill-color: #073b35 !important;
}

html:not([data-theme="dark"]) .s131-official-panel .s131-api-result[data-ok="false"],
body:not(.dark) .s131-official-panel .s131-api-result[data-ok="false"] {
  background: #fff1f2 !important;
  color: #7f1d1d !important;
  border: 1px solid #fca5a5 !important;
  -webkit-text-fill-color: #7f1d1d !important;
}

html:not([data-theme="dark"]) .s131-official-panel .s131-source-links a,
body:not(.dark) .s131-official-panel .s131-source-links a,
html:not([data-theme="dark"]) .s131-official-panel .s131-tag,
body:not(.dark) .s131-official-panel .s131-tag {
  color: #1744c8 !important;
  -webkit-text-fill-color: #1744c8 !important;
  background: #eef4ff !important;
  border-color: #b9c9ff !important;
}

/* Dark mode: same panel, no white remnants and no faint helper text. */
html[data-theme="dark"] .s131-official-panel,
html.dark .s131-official-panel,
body.dark .s131-official-panel {
  background: #0f1b2d !important;
  border-color: #3d516c !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .s131-official-panel .s131-official-title,
html[data-theme="dark"] .s131-official-panel .s131-section-title,
html[data-theme="dark"] .s131-official-panel strong,
html[data-theme="dark"] .s131-official-panel label,
html.dark .s131-official-panel .s131-official-title,
html.dark .s131-official-panel .s131-section-title,
html.dark .s131-official-panel strong,
html.dark .s131-official-panel label,
body.dark .s131-official-panel .s131-official-title,
body.dark .s131-official-panel .s131-section-title,
body.dark .s131-official-panel strong,
body.dark .s131-official-panel label {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html[data-theme="dark"] .s131-official-panel span,
html[data-theme="dark"] .s131-official-panel p,
html[data-theme="dark"] .s131-official-panel .s131-note,
html.dark .s131-official-panel span,
html.dark .s131-official-panel p,
html.dark .s131-official-panel .s131-note,
body.dark .s131-official-panel span,
body.dark .s131-official-panel p,
body.dark .s131-official-panel .s131-note {
  color: #d5dee9 !important;
  -webkit-text-fill-color: #d5dee9 !important;
}

html[data-theme="dark"] .s131-official-panel .s131-api-query-card,
html.dark .s131-official-panel .s131-api-query-card,
body.dark .s131-official-panel .s131-api-query-card {
  background: #14243a !important;
  border-color: #3d516c !important;
}

html[data-theme="dark"] .s131-official-panel .s131-api-row input,
html.dark .s131-official-panel .s131-api-row input,
body.dark .s131-official-panel .s131-api-row input {
  background: #0b1628 !important;
  color: #f8fafc !important;
  border-color: #4b6384 !important;
  -webkit-text-fill-color: #f8fafc !important;
}

html[data-theme="dark"] .s131-official-panel .s131-api-result,
html.dark .s131-official-panel .s131-api-result,
body.dark .s131-official-panel .s131-api-result {
  background: #0b1628 !important;
  color: #d5dee9 !important;
  border-color: #4b6384 !important;
  -webkit-text-fill-color: #d5dee9 !important;
}

html[data-theme="dark"] .s131-official-panel .s131-api-result[data-ok="true"],
html.dark .s131-official-panel .s131-api-result[data-ok="true"],
body.dark .s131-official-panel .s131-api-result[data-ok="true"] {
  background: rgba(20,184,166,.18) !important;
  color: #ccfbf1 !important;
  border-color: #2dd4bf !important;
  -webkit-text-fill-color: #ccfbf1 !important;
}

html[data-theme="dark"] .s131-official-panel .s131-api-result[data-ok="false"],
html.dark .s131-official-panel .s131-api-result[data-ok="false"],
body.dark .s131-official-panel .s131-api-result[data-ok="false"] {
  background: rgba(239,68,68,.18) !important;
  color: #fee2e2 !important;
  border-color: #fca5a5 !important;
  -webkit-text-fill-color: #fee2e2 !important;
}

/* Keep selection readable, but this does not affect normal text color. */
.s131-official-panel ::selection {
  background: rgba(30, 91, 255, .82) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}