/* Knowledge pages (role, hub, regulation, glossary, term): hover and state colours, the reading layout and
   responsive rules. Static styles stay inline in the templates, so overrides need !important. Wrapping,
   focus ring and reduced motion come from base.css. */
main [id] { scroll-margin-top: 96px; }
/* German headings and card titles hyphenate only long compounds ("Gover-nance", "Model-le" never split). */
main:lang(de) :is(h1, h2, .mrm-wrap) { hyphens: auto; hyphenate-limit-chars: 14 5 5; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; }
.kn-crumbs a:hover { color: #fff !important; }

/* Links as the homepage .h-link: ink, hairline underline that turns orange on hover */
.kn-link, .kn-src { color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--ink-300); text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast); }
.kn-link { font: 500 16px var(--font-body); white-space: nowrap; }
.kn-src { color: var(--ink-700); overflow-wrap: anywhere; }
.kn-link:hover, .kn-src:hover, .kn-row:hover .kn-link, .kn-card:hover .kn-link { color: var(--ink-900); text-decoration-color: var(--orange-500); }
.kn-term:hover { text-decoration: underline; text-decoration-color: var(--orange-500); text-underline-offset: 4px; }

/* Ruled cells and rows: hover lifts to white (homepage .h-feat) */
.kn-card, .kn-row, .kn-tag, .kn-az, .kn-filter { text-decoration: none; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.kn-card:hover, .kn-row:hover { background: var(--white) !important; }
.kn-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-tag:hover { background: var(--white); border-color: var(--ink-900); color: var(--ink-900); }
.kn-az:hover { border-color: #fff !important; color: #fff !important; }

/* Hub jurisdiction toggles (as the booking chips): active filter in orange */
.kn-filter { border: 1px solid var(--night-700); background: transparent; color: var(--text-on-dark-muted); }
.kn-filter:hover { border-color: var(--text-on-dark-muted); color: #fff; }
.kn-filter[aria-pressed="true"] { border-color: var(--paper); background: var(--paper); color: var(--ink-900); }

/* Role view: KPI tiles in two columns, one below 400 px */
.kn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 399.98px) { .kn-kpis { grid-template-columns: 1fr; } }

/* Article with facts box; the text column keeps a readable measure */
.kn-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: start; } /* explicit track: nowrap tags in the aside must not widen it */
.kn-prose { max-width: 68ch; }
@media (max-width: 1023.98px) { .kn-facts { max-width: 68ch; } } /* stacked under the text: same measure */
@media (min-width: 1024px) {
  .kn-article { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; }
  .kn-facts { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; } /* DORA's facts are taller than a laptop screen */
}

/* FAQ (details / summary): the + turns orange and rotates when open */
.kn-faq summary { list-style: none; }
.kn-faq summary::-webkit-details-marker { display: none; }
.kn-faq[open] .kn-faq-x { transform: rotate(45deg); color: var(--orange-600) !important; }

@media (max-width: 1100px) { .kn-grid4 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 1000px) { .kn-grid3 { grid-template-columns: 1fr !important; } }
@media (max-width: 900px) {
  .kn-row { grid-template-columns: 1fr !important; padding: 24px 20px !important; }
  .kn-row-meta { flex-direction: row !important; flex-wrap: wrap; gap: 4px 16px !important; }
  .kn-band { grid-template-columns: 1fr !important; }
  .kn-band .mrm-tile { min-height: 0 !important; aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
  .kn-letter { grid-template-columns: 1fr !important; gap: 20px !important; }
  .kn-letter h2 { font-size: 64px !important; }
  .kn-entry { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .kn-grid4 { grid-template-columns: 1fr !important; }
  .kn-card { padding: 24px !important; }
}