@layer components {
  /* The interactive editor: a dark console in both themes, matching its dark Ace theme. Its
     children read the palette from --py-*. */
  .py-editor-wrap {
    --py-background: #1d1f21;
    --py-chrome: #262829;
    --py-rule: #3a3d42;
    --py-text: #c5c8c6;

    background: var(--py-background);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
  }
  .py-panes {
    block-size: 360px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-block-size: 200px;
    overflow: hidden;
    resize: vertical;
  }
  .py-pane {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &.py-pane--input { border-inline-end: 1px solid var(--py-rule); }
  }
  .py-pane-label {
    background: var(--py-background);
    border-block-end: 1px solid var(--py-rule);
    color: #777;
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
    user-select: none;
  }
  .py-ace-wrap {
    flex: 1;
    overflow: auto;
  }
  .py-output {
    --py-output-color: var(--py-text);

    background: var(--py-background);
    color: var(--py-output-color);
    flex: 1;
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    margin: 0;
    overflow: auto;
    padding: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;

    &.py-output--error { --py-output-color: #cc6666; }
  }
  .py-toolbar {
    align-items: center;
    background: var(--py-chrome);
    border-block-end: 1px solid var(--py-rule);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 0.5rem 0.75rem;
  }
  /* Follows exam display prefs (#944); it sits in the toolbar row. The console (pane labels,
     output) and the Ace editor are left alone: a user font colour there could vanish against
     the fixed dark background. */
  .py-status {
    color: var(--exam-font-colour, #999);
    flex: 1;
    font-size: calc(0.8rem * var(--exam-font-scale, 1));
  }
  .py-run-btn,
  .py-stop-btn { min-inline-size: 4rem; }

  /* stdin modal, shown before execution when the code uses input() */
  .py-stdin-backdrop {
    align-items: center;
    background: rgba(0 0 0 / 0.55);
    border-radius: 6px;
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
    z-index: 10;

    &[hidden] { display: none; }
  }
  .py-stdin-modal {
    background: var(--py-chrome);
    border: 1px solid var(--py-rule);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    inline-size: min(420px, 90%);
    padding: 1.25rem 1.5rem;
  }
  .py-stdin-modal-title {
    color: #81a2be;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    margin: 0;

    code { color: #b5bd68; }
  }
  .py-stdin-prompt {
    color: var(--py-text);
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    margin: 0;
    white-space: pre-wrap;

    &[hidden] { display: none; }
  }
  /* input.py-stdin-field, not .py-stdin-field: core's input[type="text"] outranked the class, so
     the field used to render as a light form control inside the dark modal. */
  input.py-stdin-field {
    background: var(--py-background);
    border: 1px solid var(--py-rule);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--py-text);
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    inline-size: 100%;
    padding: 0.5rem 0.75rem;

    &:focus {
      outline: 2px solid var(--color-accent);
      outline-offset: -2px;
    }
  }
  .py-stdin-modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-block-start: 0.25rem;
  }
}