/* =====================================================================
   TRex training - site styles (screen + print/PDF)
   ===================================================================== */

:root {
  --md-text-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --md-code-font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
  /* custom admonition icons (simple shapes, no external resources) */
  --md-admonition-icon--decision: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 22 12 12 22 2 12Z M12 6 6 12 12 18 18 12Z"/></svg>');
  --md-admonition-icon--production: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 23 21H1Z M11 9v6h2V9Z M11 17v2h2v-2Z"/></svg>');
  --md-admonition-icon--lvr: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 21V7l6-4 6 4v4h6v10Z M6 9v2h2V9Z M10 9v2h2V9Z M6 13v2h2v-2Z M10 13v2h2v-2Z M16 14v2h2v-2Z M16 18v1h2v-1Z"/></svg>');
  --md-admonition-icon--why: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 17h-2v-2h2Zm2.1-7.7-.9.9c-.7.7-1.2 1.3-1.2 2.8h-2v-.5c0-1.1.5-2.1 1.2-2.8l1.2-1.3c.4-.4.6-.9.6-1.4a2 2 0 0 0-4 0H8a4 4 0 0 1 8 0c0 .9-.4 1.7-.9 2.3Z"/></svg>');
}

/* ---- custom admonitions: decision / production / lvr / why ---------- */
.md-typeset .admonition.decision, .md-typeset details.decision { border-color: #7B1FA2; }
.md-typeset .decision > .admonition-title, .md-typeset .decision > summary { background-color: rgba(123, 31, 162, .1); }
.md-typeset .decision > .admonition-title::before, .md-typeset .decision > summary::before {
  background-color: #7B1FA2; -webkit-mask-image: var(--md-admonition-icon--decision); mask-image: var(--md-admonition-icon--decision); }

.md-typeset .admonition.production, .md-typeset details.production { border-color: #D84315; }
.md-typeset .production > .admonition-title, .md-typeset .production > summary { background-color: rgba(216, 67, 21, .1); }
.md-typeset .production > .admonition-title::before, .md-typeset .production > summary::before {
  background-color: #D84315; -webkit-mask-image: var(--md-admonition-icon--production); mask-image: var(--md-admonition-icon--production); }

.md-typeset .admonition.lvr, .md-typeset details.lvr { border-color: #00796B; }
.md-typeset .lvr > .admonition-title, .md-typeset .lvr > summary { background-color: rgba(0, 121, 107, .1); }
.md-typeset .lvr > .admonition-title::before, .md-typeset .lvr > summary::before {
  background-color: #00796B; -webkit-mask-image: var(--md-admonition-icon--lvr); mask-image: var(--md-admonition-icon--lvr); }

.md-typeset .admonition.why, .md-typeset details.why { border-color: #1565C0; }
.md-typeset .why > .admonition-title, .md-typeset .why > summary { background-color: rgba(21, 101, 192, .1); }
.md-typeset .why > .admonition-title::before, .md-typeset .why > summary::before {
  background-color: #1565C0; -webkit-mask-image: var(--md-admonition-icon--why); mask-image: var(--md-admonition-icon--why); }

/* ---- status badges --------------------------------------------------- */
.md-typeset .badge {
  display: inline-block; padding: .05em .55em; border-radius: .8em; font-size: .72em; font-weight: 700;
  letter-spacing: .02em; vertical-align: .08em; white-space: nowrap; border: 1px solid transparent;
}
.md-typeset .badge.ok      { background: #E8F5E9; color: #1B5E20; border-color: #A5D6A7; }   /* verified */
.md-typeset .badge.confirm { background: #FFF8E1; color: #6D4C41; border-color: #FFE082; }   /* confirm on device / bench */
.md-typeset .badge.decision{ background: #F3E5F5; color: #6A1B9A; border-color: #CE93D8; }   /* open decision */
.md-typeset .badge.doc     { background: #E3F2FD; color: #0D47A1; border-color: #90CAF9; }   /* from documentation */
.md-typeset .badge.illus   { background: #ECEFF1; color: #37474F; border-color: #B0BEC5; }   /* illustrative values */

/* ---- figures ---------------------------------------------------------- */
.md-typeset figure { margin: 1.2em auto; }
.md-typeset figure img.diagram, .md-typeset img.diagram {
  width: 100%; max-width: 100%; background: #fff; border: 1px solid #E0E4E8; border-radius: 6px; padding: 4px;
}
.md-typeset figcaption { font-size: .78rem; color: #546E7A; max-width: 95%; margin-top: .4em; }
.md-typeset figcaption em { font-style: normal; font-weight: 700; }

/* ---- tables ----------------------------------------------------------- */
.md-typeset table:not([class]) { font-size: .72rem; }
.md-typeset table:not([class]) th { background: #ECEFF1; }

/* ---- learning objectives / takeaways -------------------------------- */
.md-typeset .admonition.abstract { border-color: #3949AB; }

/* ---- animation player ----------------------------------------------- */
.md-typeset .trex-anim { margin: 1.4em 0; }
.trex-anim-screen { border: 1px solid #DDE3E8; border-radius: 8px; overflow: hidden; background: #fff; }
.trex-anim-stage svg { display: block; width: 100%; height: auto; }
.trex-anim-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4em; padding: .45em .6em;
  background: #ECEFF1; border-top: 1px solid #DDE3E8; font-size: .72rem;
}
.trex-anim-bar button {
  font: inherit; cursor: pointer; padding: .25em .7em; border-radius: 4px;
  border: 1px solid #B0BEC5; background: #fff; color: #263238;
}
.trex-anim-bar button:hover { background: #E8EAF6; border-color: #5C6BC0; }
.trex-anim-bar .trex-anim-play { background: #3949AB; color: #fff; border-color: #3949AB; min-width: 6.5em; }
.trex-anim-bar .trex-anim-play:hover { background: #303F9F; }
.trex-anim-bar select { font: inherit; }
.trex-anim-pos { margin-left: auto; color: #546E7A; font-weight: 700; }
.trex-anim-video { font-weight: 700; }
.trex-anim-print { display: none; }
.trex-anim-error { padding: 1em; background: #FFEBEE; color: #B71C1C; border-radius: 6px; }

/* ---- video page ------------------------------------------------------ */
.md-typeset video { width: 100%; border: 1px solid #DDE3E8; border-radius: 6px; background: #000; }

/* ---- small helpers --------------------------------------------------- */
.print-only { display: none; }
.md-typeset .compact li { margin-bottom: .1em; }
.md-typeset kbd { font-size: .8em; }

/* ---- cover page (print-site plugin) ---------------------------------- */
.trex-cover { padding-top: 22vh; }
.trex-cover-kicker { text-transform: uppercase; letter-spacing: .18em; color: #5C6BC0; font-weight: 700; font-size: .9rem; }
.trex-cover h1 { font-size: 2.3rem !important; line-height: 1.15; color: #1A237E !important; margin: .3em 0 .5em; }
.trex-cover-sub { font-size: 1.05rem; color: #37474F; max-width: 36em; }
.trex-cover-meta { margin-top: 3em; color: #607D8B; font-size: .85rem; }

/* =====================================================================
   PRINT / PDF
   ===================================================================== */
@page {
  size: A4;
  margin: 16mm 15mm 18mm 15mm;
  @bottom-left { content: "LVR-InfoKom - TRex platform training"; font-size: 8pt; color: #90A4AE; }
  @bottom-right { content: counter(page); font-size: 9pt; color: #546E7A; }
}
@media print {
  .trex-anim-screen, .screen-only, .md-typeset video { display: none !important; }
  .trex-anim-print, .print-only { display: block !important; }
  .trex-anim-print-title { font-size: 8.5pt; color: #546E7A; font-style: italic; margin: .3em 0 .4em; }
  .trex-anim-print-frame { width: 86%; margin: 0 auto .5em; break-inside: avoid; page-break-inside: avoid;
    border: 1px solid #DDE3E8; border-radius: 5px; overflow: hidden; }
  .trex-anim-print-frame svg { display: block; width: 100%; height: auto; }
  .md-typeset figure, .md-typeset .admonition, .md-typeset details, .md-typeset table,
  .md-typeset .highlight { break-inside: avoid; page-break-inside: avoid; }
  .md-typeset h1, .md-typeset h2, .md-typeset h3 { break-after: avoid; page-break-after: avoid; }
  .md-typeset details::details-content { content-visibility: visible; display: block; }
  .md-typeset { font-size: .66rem; }
  .md-typeset table:not([class]) { font-size: .6rem; }
  .md-typeset a.headerlink { display: none; }
}

/* ---- long site title in the primary navigation must wrap instead of overlapping the first entry ---- */
.md-nav--primary > .md-nav__title { height: auto; white-space: normal; line-height: 1.3; padding-bottom: .5rem; }

/* ---- single left navigation column (toc.integrate): wider, because the right-hand column is gone.
   Material keeps the navigation at 11.5rem via the padding of .md-sidebar__inner, so both are adjusted. ---- */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary { width: 15rem; }
  [dir=ltr] .md-sidebar--primary .md-sidebar__inner { padding-right: calc(100% - 14.4rem); }
}

/* ---- the section you are reading: clearly marked in the left navigation; Material moves the mark while you scroll ---- */
.md-sidebar--primary .md-nav--secondary .md-nav__link--active {
  color: var(--md-primary-fg-color);
  font-weight: 700;
  background-color: rgba(64, 81, 181, .10);
  border-radius: .2rem;
  box-shadow: inset .2rem 0 0 var(--md-primary-fg-color);
  padding-left: .5rem;         /* room for the bar; the negative margin keeps the text where it was */
  margin-left: -.5rem;
  padding-right: .3rem;
}

/* ---- code in table cells: never split a name in the middle (Material's word-break: break-word did, e.g.
   STLTXSingleBu|rst). Single names stay on one line; commands wrap only at their spaces. The classes are set by
   assets/js/table-code.js; without the script, code still breaks only at spaces and hyphens, never between letters. ---- */
.md-typeset table:not([class]) code { word-break: normal; overflow-wrap: normal; }
.md-typeset table:not([class]) code.code-nowrap,
.md-typeset table:not([class]) code .code-token { white-space: nowrap; }