/* ============================================================================
   User manual entry (manual_user/general/index) and the path for authors
   (manual_user/authoring_path/*)
   ----------------------------------------------------------------------------
   Continues the start page (extra.css, section 4): same tokens, same card
   family, same rule that no block declares a font size of its own except
   small print. Sea is the primary ink, headings stay chocolate through the
   scheme rules in extra.css, peach and sprout appear only as bands that carry
   ink text (7.54:1 and 8.17:1, measured in extra.css).

   The authoring_path pages are generated by bin/gen_authoring_path.py; the
   classes below are the only markup contract between generator and page.

   Plain CSS, prefix oo-mh-.
   2026, frentix GmbH, https://frentix.com
   ========================================================================== */

.md-typeset {
  --oo-mh-line: var(--md-default-fg-color--lightest);
  --oo-mh-muted: var(--md-default-fg-color--light);
  --oo-mh-ink: var(--md-typeset-a-color);
  --oo-mh-tint: rgba(18, 99, 101, 0.08);
}
[data-md-color-scheme=slate] .md-typeset {
  --oo-mh-tint: rgba(111, 194, 196, 0.10);
}

/* ---- head ---------------------------------------------------------------- */
.md-typeset .oo-mh-lede {
  max-width: 42em;
  margin: 0 0 0.4em;
}
.md-typeset .oo-mh-meta {
  margin: 0 0 1.4em;
  color: var(--oo-mh-muted);
  font-size: 0.7rem;
}

/* ---- role blocks ---------------------------------------------------------- */
.md-typeset .oo-mh-roles {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 0.9em;
  margin: 0 0 1.8em;
}
.md-typeset .oo-mh-role {
  padding: 0.9em 1em 1em;
  border: 1px solid var(--oo-mh-line);
  border-radius: var(--oo-radius-lg);
  background: var(--md-default-bg-color);
}
.md-typeset .oo-mh-role--develop {
  --oo-accent: var(--oo-sea);
  --oo-accent-tint: rgba(18, 99, 101, 0.12);
  border-color: var(--oo-sea);
  box-shadow: inset 0 0 0 1px var(--oo-sea);
}
.md-typeset .oo-mh-role--teach {
  --oo-accent: var(--oo-forest);
  --oo-accent-tint: rgba(17, 98, 79, 0.12);
}
.md-typeset .oo-mh-role--learn {
  --oo-accent: var(--oo-berry);
  --oo-accent-tint: rgba(143, 31, 64, 0.12);
}
[data-md-color-scheme=slate] .md-typeset .oo-mh-role--develop {
  --oo-accent: #6FC2C4;
  --oo-accent-tint: rgba(111, 194, 196, 0.14);
  border-color: #6FC2C4;
  box-shadow: inset 0 0 0 1px #6FC2C4;
}
[data-md-color-scheme=slate] .md-typeset .oo-mh-role--teach {
  --oo-accent: #63C0A5;
  --oo-accent-tint: rgba(99, 192, 165, 0.14);
}
[data-md-color-scheme=slate] .md-typeset .oo-mh-role--learn {
  --oo-accent: #E495AC;
  --oo-accent-tint: rgba(228, 149, 172, 0.14);
}
.md-typeset .oo-mh-role__head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 0.5em;
}
.md-typeset .oo-mh-role__head h2 {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.25;
}
.md-typeset .oo-mh-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.4em;
  height: 2.4em;
  border-radius: var(--oo-radius-sm);
  color: var(--oo-accent);
  background: var(--oo-accent-tint);
}
.md-typeset .oo-mh-role__text {
  margin: 0 0 0.7em;
  color: var(--oo-mh-muted);
}
.md-typeset .oo-mh-role ol {
  margin: 0;
  padding: 0 0 0 1.3em;
}
.md-typeset .oo-mh-role ol li {
  margin: 0.25em 0;
}
.md-typeset .oo-mh-go {
  margin: 0.8em 0 0;
}
.md-typeset .oo-mh-go a,
.md-typeset a.oo-mh-pcard__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
}

/* ---- station tiles (home and path index) ---------------------------------- */
.md-typeset .oo-mh-stations > ol {
  display: grid;
  /* seven in a row where there is room, otherwise the row wraps instead of
     breaking the station names inside a word */
  grid-template-columns: repeat(auto-fit, minmax(5.4em, 1fr));
  gap: 0.35em;
  margin: 0.4em 0 0;
  padding: 0;
  list-style: none;
}
.md-typeset .oo-mh-stations > ol > li {
  margin: 0;
  padding: 0;
}
.md-typeset .oo-mh-stations > ol > li > a {
  display: block;
  height: 100%;
  padding: 0.5em 0.3em;
  border: 1px solid var(--oo-mh-line);
  border-radius: var(--oo-radius-sm);
  color: var(--md-typeset-color);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  hyphens: manual;
  transition: border-color 0.2s, background-color 0.2s;
}
.md-typeset .oo-mh-stations > ol > li > a:hover,
.md-typeset .oo-mh-stations > ol > li > a:focus-visible {
  border-color: var(--oo-mh-ink);
  background: var(--oo-mh-tint);
  color: var(--oo-mh-ink);
}
.md-typeset .oo-mh-stations small {
  display: block;
  margin-top: 0.2em;
  color: var(--oo-mh-muted);
  font-weight: 400;
  font-size: 0.6rem;
  hyphens: manual;
}
/* on the path index the tiles have the whole width */
.md-typeset > .oo-mh-stations > ol > li > a {
  padding: 0.8em 0.4em;
}

/* ---- phase cards ---------------------------------------------------------- */
.md-typeset .oo-mh-phasecards,
.md-typeset .oo-mh-news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9em;
  margin: 0.6em 0 1.8em;
}
.md-typeset .oo-mh-pcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--oo-mh-line);
  border-radius: var(--oo-radius-lg);
  background: var(--md-default-bg-color);
}
.md-typeset .oo-mh-pcard__band {
  padding: 0.7em 0.9em;
}
.md-typeset .oo-mh-pcard__band h3 {
  margin: 0;
  color: inherit;
  font-weight: 700;
  line-height: 1.25;
}
.md-typeset .oo-mh-pcard__kicker {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
.md-typeset .oo-mh-pcard--know .oo-mh-pcard__band {
  background: var(--oo-sea);
  color: #fff;
}
.md-typeset .oo-mh-pcard--apply .oo-mh-pcard__band {
  background: var(--oo-sprout);
  color: var(--oo-ink);
}
.md-typeset .oo-mh-pcard--deepen .oo-mh-pcard__band {
  background: var(--oo-peach);
  color: var(--oo-ink);
}
.md-typeset .oo-mh-pcard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0.8em 0.9em 0.9em;
}
.md-typeset .oo-mh-pcard__body > p {
  margin: 0 0 0.7em;
}
.md-typeset .oo-mh-pcard__aside {
  margin: 0.4em 0 0 !important;
  padding-top: 0.6em;
  border-top: 1px solid var(--oo-mh-line);
  color: var(--oo-mh-muted);
}

/* ---- new in 21.0 ---------------------------------------------------------- */
.md-typeset .oo-mh-news {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.md-typeset .oo-mh-new {
  padding: 0.7em 0.8em 0.8em;
  border: 1px solid var(--oo-mh-line);
  border-top: 3px solid var(--oo-peach);
  border-radius: var(--oo-radius);
  background: var(--md-default-bg-color);
}
.md-typeset .oo-mh-new > p {
  margin: 0 0 0.4em;
}
.md-typeset a.oo-mh-new__title {
  font-weight: 700;
}
.md-typeset a.oo-mh-new__rn {
  display: block;
  margin-top: 0.3em;
  color: var(--oo-mh-muted);
  font-size: 0.65rem;
}
.md-typeset a.oo-mh-new__rn:hover {
  color: var(--oo-mh-ink);
}

/* ---- reference list ------------------------------------------------------- */
.md-typeset .oo-mh-ref > ul {
  columns: 3;
  column-gap: 1.6em;
  margin: 0.4em 0 1em;
  padding: 0;
  list-style: none;
}
.md-typeset .oo-mh-ref > ul > li {
  margin: 0 0 0.35em;
  break-inside: avoid;
}

/* ---- path pages ----------------------------------------------------------- */
.md-typeset .oo-mh-sub {
  margin: -0.6em 0 1em;
  color: var(--oo-mh-muted);
}
.md-typeset .oo-mh-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 1em 0;
}
.md-typeset .oo-mh-phase {
  padding: 0.2em 0.75em;
  border: 1px solid var(--oo-mh-line);
  border-radius: var(--oo-radius-sm);
  color: var(--oo-mh-muted);
}
.md-typeset .oo-mh-phase b {
  color: var(--md-typeset-color);
}
.md-typeset .oo-mh-phase--on {
  border-color: var(--oo-mh-ink);
  background: var(--oo-mh-tint);
  color: var(--oo-mh-ink);
}
.md-typeset .oo-mh-hint {
  color: var(--oo-mh-muted);
}

/* term cards */
.md-typeset .oo-mh-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9em;
  margin: 0.6em 0 1.2em;
  /* every card of the page has the height of the tallest card on the page */
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.md-typeset .oo-mh-term {
  display: flex;
  flex-direction: column;
  padding: 0.8em 1em 0.6em;
  border: 1px solid var(--oo-mh-line);
  border-radius: var(--oo-radius-lg);
  background: var(--md-default-bg-color);
}
.md-typeset .oo-mh-term h3 {
  margin: 0 0 0.3em;
  font-weight: 700;
}
.md-typeset .oo-mh-kind,
.md-typeset .oo-mh-kicker {
  margin: 0 0 0.2em;
  color: var(--oo-mh-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.md-typeset .oo-mh-term > p {
  margin: 0 0 0.6em;
}
.md-typeset .oo-mh-partof {
  margin: 0.8em 0 0.2em !important;
  color: var(--oo-mh-muted);
}
.md-typeset .oo-mh-term details {
  margin: 0.4em 0;
}

/* two doors */
.md-typeset .oo-mh-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9em;
  margin: 0.6em 0 1.4em;
}
.md-typeset .oo-mh-door {
  padding: 0.8em 1em;
  border: 1px solid var(--oo-mh-line);
  border-radius: var(--oo-radius-lg);
  background: var(--md-default-bg-color);
}
.md-typeset .oo-mh-door > p {
  margin: 0 0 0.5em;
}
.md-typeset .oo-mh-door > p:last-child {
  margin-bottom: 0;
}

/* Navigation des Autorenwegs: vor dem Titel und am Seitenende */
.md-typeset .oo-mh-nav {
  margin: 0 0 1.4em;
  padding: 0.6em 0.8em;
  border: 1px dashed var(--oo-sea);
  border-radius: var(--oo-radius);
  background: rgba(18, 99, 101, 0.06);
}
.md-typeset .oo-mh-nav > p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
  margin: 0;
}
.md-typeset .oo-mh-nav + h1 {
  margin-top: 0;
}
.md-typeset .oo-mh-nav__label {
  flex: 0 0 100%;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oo-sea);
  margin-bottom: 0.2em;
}
.md-typeset .oo-mh-nav .oo-mh-btn {
  white-space: nowrap;
}
.md-typeset .oo-mh-nav .oo-mh-btn--next {
  margin-left: auto;
}
[data-md-color-scheme="slate"] .md-typeset .oo-mh-nav {
  border-color: #6FC2C4;
  background: rgba(111, 194, 196, 0.10);
}
[data-md-color-scheme="slate"] .md-typeset .oo-mh-nav__label {
  color: #6FC2C4;
}
.md-typeset .oo-mh-nav .oo-mh-btn {
  display: inline-block;
  padding: 0.45em 1.1em;
  border: 1px solid var(--oo-sea);
  border-radius: var(--oo-radius);
  color: var(--oo-sea);
  font-weight: 700;
  text-decoration: none;
}
.md-typeset .oo-mh-nav .oo-mh-btn--next {
  background: var(--oo-sea);
  color: #fff;
}
.md-typeset .oo-mh-nav .oo-mh-btn:hover,
.md-typeset .oo-mh-nav .oo-mh-btn:focus-visible {
  border-color: var(--oo-sea-dark);
  background: var(--oo-sea-dark);
  color: #fff;
}
[data-md-color-scheme="slate"] .md-typeset .oo-mh-nav .oo-mh-btn {
  border-color: #6FC2C4;
  color: #6FC2C4;
}
[data-md-color-scheme="slate"] .md-typeset .oo-mh-nav .oo-mh-btn--next {
  background: #6FC2C4;
  color: #0F5456;
}

/* ---- narrow screens ------------------------------------------------------- */
@media screen and (max-width: 76.1875em) {
  .md-typeset .oo-mh-roles {
    grid-template-columns: 1fr 1fr;
  }
  .md-typeset .oo-mh-role--develop {
    grid-column: 1 / -1;
  }
  .md-typeset .oo-mh-news {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 59.9375em) {
  .md-typeset .oo-mh-roles,
  .md-typeset .oo-mh-phasecards,
  .md-typeset .oo-mh-terms,
  .md-typeset .oo-mh-doors {
    grid-template-columns: 1fr;
  }
  .md-typeset .oo-mh-news {
    grid-template-columns: 1fr 1fr;
  }
  .md-typeset .oo-mh-ref > ul {
    columns: 2;
  }
}
@media screen and (max-width: 29.9375em) {
  .md-typeset .oo-mh-news {
    grid-template-columns: 1fr 1fr;
  }
  .md-typeset .oo-mh-ref > ul {
    columns: 1;
  }
}