/* style component */
x-two-panel {
  --two-height: var(--app-panel-height);
  --two-panel-pad: 0rem;
}

/* style component panels */
x-two-panel::part(left-panel),
x-two-panel::part(right-panel) {
  border: 2px solid black; padding:0.5rem 0.5rem;
  font-family: "Comic Neue", Arial, sans-serif;
}

x-two-panel[collapsed-left]::part(right-panel) { 
  display: flex; flex-direction: column; min-height: 0; 
}
x-two-panel[collapsed-left]::part(right-scroller) { 
  height: auto; flex: 1 1 auto; min-height: 0; overflow: auto; 
}

.left-slot {
  height: calc(var(--app-panel-height) - 2rem);
  display:flex;
  flex-direction: column;
  min-height: 0rem;
}

pre.code-demo {
  margin: 0 0 1rem;
  padding: 0rem;
  background: transparent;
  overflow-x: auto;
  border-radius: 8px;
}

pre.code-demo > code {
  display:block;
  padding:1rem;
  /* background-color: #211414; */
  /* color: #f4fbce; */
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.35;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: inherit;
  text-indent: 0 !important;          /* beats global “hanging” styles */
  transform: none !important;         /* kills translateX tricks */
  padding-inline-start: 0.25rem;      /* force logical-left padding */
  background-clip: padding-box;       /* background covers padding */
}

/* visible dark box lives on the CHILD, not the slotted element */
.code-box {
  display: block;
  padding: 0rem 0.75rem;        /* ← inner gutter you want */
  background: #211414;
  color: #f4fbce;
  border-radius: 8px;
  overflow-x: auto;        /* scroll the whole code box */
}

/* keep <pre> neutral so the child controls the visuals */
.code-box > pre.code-demo {
  margin: 0;
  padding: 0;              /* avoid double padding */
  background: transparent; /* dark bg is on .code-box */
  font: 0.85rem/1.35 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre;
}
.code-box > pre.code-demo > code { white-space: inherit; }

.marked-box {
  min-height: 5rem;
  padding: 0.25rem 0rem;
}
.mark {
  background-color: red;
  position: relative;
  z-index: 100;
  /* width:2rem; */
  height:0.15rem;
}

.left-slot .marked-box { display: none; }
.left-slot .marked-box.active { display: block; }