/* Laboratorio Python: usa i colori del tema del sito (chiaro e scuro) */
.lab {
  --lab-bg: var(--md-default-bg-color);
  --lab-fg: var(--md-default-fg-color);
  --lab-muted: var(--md-default-fg-color--light);
  --lab-line: var(--md-default-fg-color--lightest);
  --lab-sunk: var(--md-code-bg-color);
  --lab-accent: var(--md-accent-fg-color);
  --lab-primary: var(--md-primary-fg-color);
  --lab-on-primary: var(--md-primary-bg-color);
  --lab-echo: #9a4b00;
  --lab-bad: #b3261e;
  --lab-bad-soft: rgba(179, 38, 30, 0.08);
  --lab-good: #17784a;
  --lab-errline: rgba(179, 38, 30, 0.14);
  margin: 1.4em 0;
  container-type: inline-size;
  border: 1px solid var(--lab-line);
  border-radius: 10px;
  background: var(--lab-bg);
  overflow: hidden;
  font-size: 0.72rem;
}
[data-md-color-scheme="slate"] .lab {
  --lab-echo: #f2a65a;
  --lab-bad: #ff8b7d;
  --lab-bad-soft: rgba(255, 139, 125, 0.1);
  --lab-good: #6fd39c;
  --lab-errline: rgba(255, 139, 125, 0.16);
}

.lab-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.45rem 0.7rem; background: var(--lab-sunk); border-bottom: 1px solid var(--lab-line);
}
.lab-title { font-weight: 700; color: var(--lab-fg); }
.lab-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.62rem; font-weight: 600; color: var(--lab-muted); white-space: nowrap; }
.lab-status::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: currentColor; }
.lab-status[data-s="loading"]::before, .lab-status[data-s="running"]::before { animation: lab-pulse 1s ease-in-out infinite; }
.lab-status[data-s="ready"], .lab-status[data-s="done"] { color: var(--lab-good); }
.lab-status[data-s="running"] { color: var(--lab-primary); }
.lab-status[data-s="waiting"] { color: var(--lab-echo); }
.lab-status[data-s="error"], .lab-status[data-s="stopped"], .lab-status[data-s="fatal"] { color: var(--lab-bad); }
@keyframes lab-pulse { 50% { opacity: 0.25; } }

.lab-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.lab--progetto .lab-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.lab--progetto .lab-console-wrap { border-left: 1px solid var(--lab-line); }
.lab--esempio .lab-console-wrap { border-top: 1px solid var(--lab-line); }
.lab-editor { display: flex; flex-direction: column; min-width: 0; }

.lab-tabs { display: flex; gap: 0.1rem; overflow-x: auto; border-bottom: 1px solid var(--lab-line); padding: 0 0.3rem; }
.lab-tab {
  font-family: var(--md-code-font-family); font-size: 0.66rem; color: var(--lab-muted); background: none; border: 0;
  border-bottom: 2px solid transparent; padding: 0.55rem 0.6rem 0.45rem; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.lab-tab:hover { color: var(--lab-fg); }
.lab-tab[aria-selected="true"] { color: var(--lab-fg); border-bottom-color: var(--lab-primary); }
.lab-tab-kind { font-family: var(--md-text-font-family); font-size: 0.52rem; letter-spacing: 0.05em; text-transform: uppercase; }
.lab-tab-dot { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--lab-echo); }
.lab-tab--add { color: var(--lab-primary); }
.lab-newfile { font-family: var(--md-code-font-family); font-size: 0.66rem; margin: 0.3rem; padding: 0.2rem 0.4rem; border: 1px solid var(--lab-primary); border-radius: 4px; background: var(--lab-bg); color: var(--lab-fg); width: 11rem; }

.lab .CodeMirror {
  height: auto; font-family: var(--md-code-font-family); font-size: 0.72rem; line-height: 1.55;
  background: var(--lab-bg); color: var(--lab-fg);
}
.lab--esempio .CodeMirror-scroll { min-height: 3rem; max-height: 26rem; }
.lab--progetto .CodeMirror { height: 28rem; }
.lab .CodeMirror-gutters { background: var(--lab-sunk); border-right: 1px solid var(--lab-line); }
.lab .CodeMirror-linenumber { color: var(--lab-muted); }
.lab .CodeMirror-cursor { border-left: 2px solid var(--lab-primary); }
.lab .CodeMirror-selected, .lab .CodeMirror-focused .CodeMirror-selected { background: var(--md-accent-fg-color--transparent) !important; }
.lab .cm-s-default .cm-keyword { color: var(--md-code-hl-keyword-color); font-weight: 600; }
.lab .cm-s-default .cm-string { color: var(--md-code-hl-string-color); }
.lab .cm-s-default .cm-number { color: var(--md-code-hl-number-color); }
.lab .cm-s-default .cm-comment { color: var(--md-code-hl-comment-color); font-style: italic; }
.lab .cm-s-default .cm-def { color: var(--md-code-hl-function-color); font-weight: 600; }
.lab .cm-s-default .cm-builtin { color: var(--md-code-hl-constant-color); }
.lab .cm-s-default .cm-variable, .lab .cm-s-default .cm-variable-2, .lab .cm-s-default .cm-property,
.lab .cm-s-default .cm-operator, .lab .cm-s-default .cm-punctuation { color: var(--lab-fg); }
.lab .cm-s-default .cm-meta { color: var(--md-code-hl-special-color); }
.lab .lab-errline { background: var(--lab-errline); }

.lab-toolbar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.5rem 0.6rem; border-top: 1px solid var(--lab-line); }
.lab-btn {
  font: inherit; font-size: 0.66rem; font-weight: 700; border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer;
  border: 1px solid var(--lab-line); background: var(--lab-bg); color: var(--lab-fg);
}
.lab-btn:hover { border-color: var(--lab-primary); }
.lab-btn:disabled { opacity: 0.45; cursor: default; border-color: var(--lab-line); }
.lab-btn--run { background: var(--lab-primary); border-color: var(--lab-primary); color: var(--lab-on-primary); }
.lab-btn--warn { color: var(--lab-bad); border-color: var(--lab-bad); }
.lab-btn--quiet { font-weight: 500; }
.lab-btn:focus-visible, .lab-tab:focus-visible, .lab-link:focus-visible { outline: 2px solid var(--lab-accent); outline-offset: 2px; }
.lab-kbd { margin-left: auto; font-family: var(--md-code-font-family); font-size: 0.58rem; color: var(--lab-muted); }
.lab-confirm { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.55rem 0.7rem; background: var(--lab-sunk); border-top: 1px solid var(--lab-line); }
.lab-confirm[hidden] { display: none; }
.lab-confirm span { flex: 1 1 16rem; }

.lab-console-wrap { display: flex; flex-direction: column; min-width: 0; }
.lab-console-wrap[hidden] { display: none; }
.lab-console-head {
  display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.4rem 0.25rem 0.7rem;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lab-muted);
  border-bottom: 1px solid var(--lab-line); background: var(--lab-sunk);
}
.lab-console-head .lab-btn { text-transform: none; letter-spacing: 0; padding: 0.15rem 0.5rem; }
.lab-console {
  flex: 1; min-height: 9rem; max-height: 30rem; overflow: auto; padding: 0.6rem 0.75rem 0.8rem;
  font-family: var(--md-code-font-family); font-size: 0.68rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.lab--progetto .lab-console { min-height: 20rem; }
.lab-echo { color: var(--lab-echo); font-weight: 700; }
.lab-err { color: var(--lab-bad); }
.lab-note { display: block; margin-top: 0.5rem; font-family: var(--md-text-font-family); font-size: 0.62rem; color: var(--lab-muted); white-space: normal; }
.lab-placeholder { font-family: var(--md-text-font-family); color: var(--lab-muted); white-space: normal; }
.lab-placeholder code { font-size: 0.85em; }
.lab-stdin {
  font: inherit; color: var(--lab-echo); font-weight: 700; background: transparent; border: 0;
  border-bottom: 2px solid var(--lab-echo); padding: 0 0.1rem; width: 12ch; max-width: 100%; outline: none;
}
.lab-stdin:focus { background: var(--md-accent-fg-color--transparent); }
.lab-ask { display: block; margin-top: 0.3rem; font-family: var(--md-text-font-family); font-size: 0.6rem; color: var(--lab-echo); }
.lab-error { display: block; margin-top: 0.5rem; border: 1px solid var(--lab-bad); border-radius: 6px; overflow: hidden; white-space: normal; }
.lab-error pre { margin: 0; padding: 0.5rem 0.65rem; background: var(--lab-bad-soft); color: var(--lab-bad); font-size: 0.64rem; white-space: pre-wrap; overflow-x: auto; }
.lab-why { display: grid; gap: 0.3rem; padding: 0.5rem 0.65rem 0.6rem; font-family: var(--md-text-font-family); font-size: 0.68rem; line-height: 1.5; color: var(--lab-fg); }
.lab-why code { font-size: 0.85em; }
.lab-link { font: inherit; font-size: 0.64rem; font-weight: 700; color: var(--md-typeset-a-color); background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; text-decoration: underline; text-underline-offset: 3px; }
.lab-img { display: block; max-width: 100%; margin: 0.6rem 0; border-radius: 6px; background: #fff; }

/* editor e console affiancati solo se il laboratorio e' largo abbastanza */
@container (max-width: 760px) {
  .lab--progetto .lab-body { grid-template-columns: minmax(0, 1fr); }
  .lab--progetto .lab-console-wrap { border-left: 0; border-top: 1px solid var(--lab-line); }
  .lab--progetto .CodeMirror { height: 24rem; }
  .lab--progetto .lab-console { min-height: 14rem; }
}
@media (max-width: 30em) {
  .lab--progetto .CodeMirror { height: 18rem; }
  .lab-kbd { display: none; }
  /* sul telefono le schede dei file vanno su più righe, così si vedono tutte */
  .lab-tabs { flex-wrap: wrap; overflow-x: visible; }
  .lab-toolbar .lab-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-status::before { animation: none !important; }
}