/* Improve readability of notebook code input/output blocks in Sphinx HTML. */

/* myst-nb / jupyter-sphinx style containers */
div.cell {
  margin: 1rem 0 1.25rem;
}

div.cell_input,
div.nbinput {
  border: 1px solid #b6d7ff;
  border-left: 6px solid #1f6feb;
  border-radius: 8px;
  background: #f7fbff;
  padding: 0.2rem;
  margin-bottom: 0.4rem;
}

div.cell_output,
div.nboutput {
  border: 1px solid #d0d7de;
  border-left: 6px solid #6e7781;
  border-radius: 8px;
  background: #f6f8fa;
  padding: 0.2rem;
}

/* Label input/output explicitly */
div.cell_input::before,
div.nbinput::before {
  content: "In";
  display: inline-block;
  font-weight: 700;
  font-size: 0.8rem;
  color: #1f6feb;
  background: #e9f2ff;
  border: 1px solid #b6d7ff;
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  margin: 0.35rem 0.45rem;
}

div.cell_output::before,
div.nboutput::before {
  content: "Out";
  display: inline-block;
  font-weight: 700;
  font-size: 0.8rem;
  color: #57606a;
  background: #f3f4f6;
  border: 1px solid #d0d7de;
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  margin: 0.35rem 0.45rem;
}

/* Keep prompts secondary when present (e.g., old nbsphinx output). */
.nbinput .prompt,
.nboutput .prompt,
.cell_input .prompt,
.cell_output .prompt {
  opacity: 0.72;
  font-weight: 600;
}

/* Prevent wide outputs from breaking layout. */
.cell_output .output,
.nboutput .output,
.cell_output pre,
.nboutput pre {
  overflow-x: auto;
}

/* Make output areas visually distinct from input code blocks. */
.cell_output pre,
.nboutput pre,
.cell_output .output_area,
.nboutput .output_area {
  background: #f3f4f6;
  border-radius: 6px;
}

/* Keep contrast in Furo dark mode.
   Furo sets data-theme on <body>, not <html>, so selectors must use body[data-theme="dark"]. */
body[data-theme="dark"] div.cell_output,
body[data-theme="dark"] div.nboutput {
  
  border: 1px solid #3d444d;
  border-left: 3px solid #f5b120;
  background: #f3f4f6;
}

body[data-theme="dark"] div.cell_output::before,
body[data-theme="dark"] div.nboutput::before {
  color: #1f6feb;
  background: #e9f2ff;
  border: 1px solid #b6d7ff;
}

body[data-theme="dark"] .cell_output pre,
body[data-theme="dark"] .nboutput pre,
body[data-theme="dark"] .cell_output .output,
body[data-theme="dark"] .nboutput .output,
body[data-theme="dark"] .cell_output .output_area,
body[data-theme="dark"] .nboutput .output_area {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
}

body[data-theme="dark"] .cell_output pre *,
body[data-theme="dark"] .nboutput pre *,
body[data-theme="dark"] .cell_output .output *,
body[data-theme="dark"] .nboutput .output *,
body[data-theme="dark"] .cell_output .output_area *,
body[data-theme="dark"] .nboutput .output_area * {
  color: #d4d4d4 !important;
}

/* prefers-color-scheme: dark (auto mode) */
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) div.cell_output,
  body:not([data-theme="light"]) div.nboutput {
    border: 1px solid #3d444d;
    border-left: 6px solid #8b949e;
    background: #22272e;
  }

  body:not([data-theme="light"]) div.cell_output::before,
  body:not([data-theme="light"]) div.nboutput::before {
    color: #1f6feb;
    background: #e9f2ff;
    border: 1px solid #b6d7ff;
  }

  body:not([data-theme="light"]) .cell_output pre,
  body:not([data-theme="light"]) .nboutput pre,
  body:not([data-theme="light"]) .cell_output .output,
  body:not([data-theme="light"]) .nboutput .output,
  body:not([data-theme="light"]) .cell_output .output_area,
  body:not([data-theme="light"]) .nboutput .output_area {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
  }

  body:not([data-theme="light"]) .cell_output pre *,
  body:not([data-theme="light"]) .nboutput pre *,
  body:not([data-theme="light"]) .cell_output .output *,
  body:not([data-theme="light"]) .nboutput .output *,
  body:not([data-theme="light"]) .cell_output .output_area *,
  body:not([data-theme="light"]) .nboutput .output_area * {
    color: #d4d4d4 !important;
  }
}