/* SPDX-License-Identifier: Apache-2.0 */
.notebook {
  --notebook-line: #b9cbc8;
  --notebook-paper: #fbfdfb;
  --notebook-accent: #126663;
  margin: 1rem 0; padding: 1rem; min-width: 0;
  border: 1px solid var(--notebook-line); border-radius: 10px;
  background: linear-gradient(135deg, #eff7f3, var(--notebook-paper) 45%, #f9f5ea);
  color: #203d3a;
}
.notebook__toolbar, .notebook__cell-header { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.notebook__title { margin: 0 .5rem 0 0; font: 600 1.3rem Georgia, "Noto Serif CJK SC", serif; }
.notebook__name { flex: 1 1 12rem; min-width: 0; max-width: 24rem; padding: .5rem; }
.notebook__button { padding: .4rem .6rem; border: 1px solid var(--notebook-line); border-radius: 5px; background: #fff; color: inherit; cursor: pointer; }
.notebook__button:hover:not(:disabled) { background: #e3f2ed; border-color: var(--notebook-accent); }
.notebook__button:disabled { opacity: .45; cursor: not-allowed; }
.notebook__button:focus-visible, .notebook input:focus-visible, .notebook textarea:focus-visible { outline: 3px solid #c69434; outline-offset: 2px; }
.notebook__help, .notebook__scope, .notebook__message { font-size: .86rem; line-height: 1.6; overflow-wrap: anywhere; }
.notebook__message { color: #9c3527; min-height: 1.4em; }
.notebook__cells { display: grid; gap: .8rem; min-width: 0; }
.notebook__cell { padding: .8rem; min-width: 0; border: 1px solid var(--notebook-line); border-left: 4px solid var(--notebook-line); border-radius: 6px; background: var(--notebook-paper); }
.notebook__cell[data-selected="true"] { border-left-color: var(--notebook-accent); }
.notebook__cell[data-cell-status="error"] { border-left-color: #b23e2e; }
.notebook__cell[data-cell-status="stale"] .notebook__result { opacity: .55; }
.notebook__cell[data-cell-status="running"] { border-left-color: #c69434; }
.notebook__status { margin-right: auto; font-size: .8rem; color: #57706c; }
.notebook__source { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 12rem; overflow: auto; font-size: .86rem; }
.notebook__text { display: block; width: 100%; box-sizing: border-box; min-height: 6rem; margin-top: .6rem; padding: .6rem; resize: vertical; border: 1px solid var(--notebook-line); border-radius: 4px; font: inherit; line-height: 1.7; }
.notebook__result { margin-top: .8rem; padding: .8rem; max-width: 100%; overflow-x: auto; border-top: 1px dashed var(--notebook-line); }
.notebook__result[data-render-state="source"] { white-space: pre-wrap; overflow-wrap: anywhere; }
.notebook__error { color: #9c3527; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .86rem; }
@media (max-width: 520px) {
  .notebook { padding: .65rem; }
  .notebook__cell { padding: .55rem; }
  .notebook__title { flex-basis: 100%; }
  .notebook__name { max-width: none; }
  .notebook__button { min-height: 2.4rem; }
}