/* ============================================================
   Makerspace HoPro – V1 Design
   ============================================================ */

/* --- Typography & Headings --------------------------------- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Tables ------------------------------------------------ */

.md-typeset table:not([class]) {
  font-size: 0.82rem;
  box-shadow: none;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
}

.md-typeset table:not([class]) td {
  border: none;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* --- Code blocks ------------------------------------------- */

.md-typeset pre > code {
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  font-size: 0.875em;
}

.md-typeset code {
  border-radius: 4px;
  font-size: 0.875em;
}

/* --- Buttons ----------------------------------------------- */

.md-typeset .md-button {
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- Admonitions ------------------------------------------- */

.md-typeset .admonition,
.md-typeset details {
  font-size: 0.82rem;
  box-shadow: none;
  border-radius: 0 6px 6px 0;
}

.md-typeset details:not([open]) > summary {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Custom admonition: code */
:root {
  --md-admonition-icon--code: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>');
}
.md-typeset .admonition.code,
.md-typeset details.code {
  border-color: #3B82F6;
}
.md-typeset .code > .admonition-title,
.md-typeset .code > summary {
  background-color: rgba(59, 130, 246, 0.12);
  border-left: 3px solid #3B82F6;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.md-typeset .code > .admonition-title::before,
.md-typeset .code > summary::before {
  top: 50%;
  transform: translateY(-50%);
  background-color: #3B82F6;
  -webkit-mask-image: var(--md-admonition-icon--code);
  mask-image: var(--md-admonition-icon--code);
}

/* Custom admonition: info */
:root {
  --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>');
}
.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: #F97316;
}
.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: rgba(249, 115, 22, 0.12);
  border-left: 3px solid #F97316;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
  top: 50%;
  transform: translateY(-50%);
  background-color: #F97316;
  -webkit-mask-image: var(--md-admonition-icon--info);
  mask-image: var(--md-admonition-icon--info);
}

/* Custom admonition: question */
:root {
  --md-admonition-icon--question: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>');
}
.md-typeset .admonition.question,
.md-typeset details.question {
  border-color: #10B981;
}
.md-typeset .question > .admonition-title,
.md-typeset .question > summary {
  background-color: rgba(16, 185, 129, 0.12);
  border-left: 3px solid #10B981;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.md-typeset .question > .admonition-title::before,
.md-typeset .question > summary::before {
  top: 50%;
  transform: translateY(-50%);
  background-color: #10B981;
  -webkit-mask-image: var(--md-admonition-icon--question);
  mask-image: var(--md-admonition-icon--question);
}

/* Custom admonition: attention */
:root {
  --md-admonition-icon--attention: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>');
}
.md-typeset .admonition.attention,
.md-typeset details.attention {
  border-color: #EF4444;
}
.md-typeset .attention > .admonition-title,
.md-typeset .attention > summary {
  background-color: rgba(239, 68, 68, 0.12);
  border-left: 3px solid #EF4444;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.md-typeset .attention > .admonition-title::before,
.md-typeset .attention > summary::before {
  top: 50%;
  transform: translateY(-50%);
  background-color: #EF4444;
  -webkit-mask-image: var(--md-admonition-icon--attention);
  mask-image: var(--md-admonition-icon--attention);
}

/* Custom admonition: check */
:root {
  --md-admonition-icon--check: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>');
}
.md-typeset .admonition.check,
.md-typeset details.check {
  border-color: #10B981;
}
.md-typeset .check > .admonition-title,
.md-typeset .check > summary {
  background-color: rgba(16, 185, 129, 0.12);
  border-left: 3px solid #10B981;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.md-typeset .check > .admonition-title::before,
.md-typeset .check > summary::before {
  top: 50%;
  transform: translateY(-50%);
  background-color: #10B981;
  -webkit-mask-image: var(--md-admonition-icon--check);
  mask-image: var(--md-admonition-icon--check);
}

/* Custom admonition: note */
:root {
  --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>');
}
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: #6366F1;
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(99, 102, 241, 0.12);
  border-left: 3px solid #6366F1;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  top: 50%;
  transform: translateY(-50%);
  background-color: #6366F1;
  -webkit-mask-image: var(--md-admonition-icon--note);
  mask-image: var(--md-admonition-icon--note);
}

/* Custom admonition: ph-exam */
:root {
  --md-admonition-icon--ph-exam: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="9" y1="7" x2="15" y2="7"/><line x1="9" y1="11" x2="15" y2="11"/><line x1="9" y1="15" x2="13" y2="15"/></svg>');
}
.md-typeset .admonition.ph-exam,
.md-typeset details.ph-exam {
  border-color: #EC4899;
}
.md-typeset .ph-exam > .admonition-title,
.md-typeset .ph-exam > summary {
  background-color: rgba(236, 72, 153, 0.12);
  border-left: 3px solid #EC4899;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.md-typeset .ph-exam > .admonition-title::before,
.md-typeset .ph-exam > summary::before {
  top: 50%;
  transform: translateY(-50%);
  background-color: #EC4899;
  -webkit-mask-image: var(--md-admonition-icon--ph-exam);
  mask-image: var(--md-admonition-icon--ph-exam);
}

/* Custom admonition: ph-movie */
:root {
  --md-admonition-icon--ph-movie: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>');
}
.md-typeset .admonition.ph-movie,
.md-typeset details.ph-movie {
  border-color: #F59E0B;
}
.md-typeset .ph-movie > .admonition-title,
.md-typeset .ph-movie > summary {
  background-color: rgba(245, 158, 11, 0.12);
  border-left: 3px solid #F59E0B;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.md-typeset .ph-movie > .admonition-title::before,
.md-typeset .ph-movie > summary::before {
  top: 50%;
  transform: translateY(-50%);
  background-color: #F59E0B;
  -webkit-mask-image: var(--md-admonition-icon--ph-movie);
  mask-image: var(--md-admonition-icon--ph-movie);
}

/* --- Terminal (termynal.js) -------------------------------- */

:root {
  --color-bg: #1E1E2E;
  --color-text: #CDD6F4;
  --color-text-subtle: #6C7086;
}

[data-termynal] {
  text-align: left;
  width: 540px;
  max-width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.85rem;
  font-family: "JetBrains Mono", "Roboto Mono", Consolas, Menlo, monospace;
  border-radius: 8px;
  padding: 70px 40px 32px;
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

[data-termynal]:before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FF5F57;
  box-shadow: 22px 0 0 #FFBD2E, 44px 0 0 #28CA41;
}

[data-ty]:not([data-termynal]) { white-space: pre; }
[data-ty] { display: block; line-height: 1.6; }
[data-ty]:before { content: ""; display: inline-block; vertical-align: middle; }
[data-ty="input"]:before, [data-ty-prompt]:before { margin-right: 0.75em; color: var(--color-text-subtle); }
[data-ty="input"]:before { content: "$"; }
[data-ty][data-ty-prompt]:before { content: attr(data-ty-prompt); }
[data-ty-cursor]:after {
  content: attr(data-ty-cursor);
  font-family: monospace;
  margin-left: 0.5em;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ============================================================
   Interactive Python Exercises
   ============================================================ */

.py-exercise {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
  background: var(--md-code-bg-color);
}

.py-desc {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.py-code {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: 0.75rem 1rem;
  font-family: "JetBrains Mono", "Roboto Mono", Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
  tab-size: 4;
}

.py-code:focus {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: -1px;
}

.py-controls {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.py-run,
.py-test {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.py-run {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

.py-test {
  background: #10B981;
  color: #fff;
}

.py-run:hover,
.py-test:hover {
  opacity: 0.85;
}

/* IPython console header bar (injected by JS) */
.py-console-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding: 0.35rem 0.9rem;
  background: #13192a;
  border: 1px solid #2a3248;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  color: #6c7a94;
  user-select: none;
}

.py-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.py-dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.py-dots span:nth-child(1) { background: #FF5F57; }
.py-dots span:nth-child(2) { background: #FFBD2E; }
.py-dots span:nth-child(3) { background: #28CA41; }

.py-console-title {
  letter-spacing: 0.03em;
}

/* Output area: connected to header when header is present */
.py-console-header + .py-output {
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.py-output {
  margin-top: 0.75rem;
  min-height: 2rem;
  padding: 0.65rem 1rem;
  background: #1a2035;
  color: #CDD6F4;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.82rem;
  border: 1px solid #2a3248;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

/* IPython-style prompt colors */
.py-ipython-prompt {
  color: #4ec9a0;
  font-weight: 700;
}

.py-ipython-out {
  color: #CDD6F4;
}

.py-ipython-err {
  color: #f48771;
}

.py-result {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 1.4rem;
}

.py-pass {
  color: #10B981;
}

.py-fail {
  color: #EF4444;
}

/* ============================================================
   Navigation – mehrere Zeilen auf grossen Bildschirmen
   ============================================================ */

@media screen and (min-width: 60em) {
  .md-tabs {
    height: auto;
    overflow: visible;
  }

  .md-tabs__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.15rem;
    padding: 0.15rem 0.5rem 0.25rem;
  }

  .md-tabs__item {
    height: 2.2rem;
  }

  .md-tabs__link {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
  }
}