/*
  TRAP-119 — local layer for the in-app manual (/help).

  Two of the rules below repair defects in Starruk.Modules.Help.Blazor v1.4.0's own stylesheet
  (source read on tag v1.4.0-help, byte-identical to main); both are reported upstream. Per
  CLAUDE.md "Foundation via NuGet, niet forken" this file is the local override seam, same
  reasoning as trapwatch-responsive.css. It is linked after _content/Starruk.Modules.Help.Blazor/
  starruk-help.css in App.razor so these win without an !important arms race, and it targets that
  package's public s-help-* class contract plus this app's own tw-help-* markup — never
  foundation-internal implementation detail.

  Everything reads from the registered --s-* design tokens; no brand hex is hardcoded.
*/

/* ---------------------------------------------------------------------------------------------
   Repair 1 — the two-column layout never applied.

   starruk-help.css opens with a block comment whose line 9 names two CSS custom-property
   prefixes separated by a slash, and the first of those prefixes ends in an asterisk. That puts
   an asterisk-slash pair inside the comment, which terminates it early, so the parser swallows
   the next rule whole: .s-help-layout { display: grid; grid-template-columns: 260px 1fr } never
   reaches the CSSOM (measured: 11 of 12 rules parsed, .s-help-layout computing to display:block).
   The chapter rail therefore rendered as a full-width block stacked above the document instead of
   a sidebar beside it. Restating the rule here restores the intended layout (AC-4.1); it can be
   deleted once the upstream comment is fixed and the package version bumped.

   Note for future edits to this file: never write that prefix pair literally in a comment here
   either, or this rule disappears the same way.
   --------------------------------------------------------------------------------------------- */
.s-help-layout {
    display: grid;
    grid-template-columns: minmax(230px, 260px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .s-help-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* ---------------------------------------------------------------------------------------------
   Repair 2 — the active chapter was unreadable in dark mode.

   The package styles .s-help-nav-item.active as
       background: var(--s-brand-primary-tint, var(--mud-palette-primary-hover, …));
       color:      var(--s-brand-primary, var(--mud-palette-primary));
   but --s-brand-primary-tint is not among the variables StarrukThemeFactory emits, so the
   background falls through to the theme's hover tint, while --s-brand-primary *is* emitted and is
   deliberately mode-independent navy (#182b3b — "does not invert in dark mode", StarrukPalette).
   Navy text on a dark tint measured ≈1.3:1. Using the mode-aware --s-secondary-text/--s-secondary
   pair instead keeps the brand hue in both themes and clears AA (AC-2.1).
   --------------------------------------------------------------------------------------------- */
.s-help-nav-item.active {
    /* 7%, not the 12% that reads nicer on its own: the teal tint darkens the card behind the label
       and dragged --s-secondary-text down to 4.16:1 against it, just under the AA floor AC-2.1
       requires. At 7% the same text measures 4.79:1, and the inset accent bar carries the
       "current chapter" signal that the weaker fill gives up. */
    background: color-mix(in srgb, var(--s-secondary) 7%, transparent);
    color: var(--s-secondary-text);
    box-shadow: inset 2px 0 0 var(--s-secondary);
}

[data-theme="dark"] .s-help-nav-item.active {
    background: color-mix(in srgb, var(--s-secondary) 18%, transparent);
    color: var(--s-secondary);
}

/* The package's own nav item is fine on contrast but sits flush against its neighbours. */
.s-help-nav-item {
    padding: 9px 12px;
    margin-bottom: 2px;
    color: var(--s-ink-700);
    transition: background 0.12s ease, color 0.12s ease;
}

.s-help-nav-item:hover {
    background: var(--s-fill-faint);
    color: var(--s-ink-900);
}

/* PageHero renders its eyebrow as .s-hero-eyebrow, for which the DesignSystem package ships no
   rule at all ("renders unstyled" — PageHero.razor's own header comment). On the hero's gradient
   that left it as unstyled body text; give it the small-caps treatment the hero design implies. */
.s-hero-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--s-white) 66%, transparent);
    margin-bottom: 6px;
}

/* ---------------------------------------------------------------------------------------------
   Chapter rail
   --------------------------------------------------------------------------------------------- */
.s-help-rail {
    top: 84px; /* clears the fixed app bar when the rail sticks */
}

.tw-help-search {
    margin-bottom: 10px;
}

.tw-help-nav {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.tw-help-nav-empty {
    margin: 8px 2px;
    font-size: 0.82rem;
    color: var(--s-muted);
}

/* Collapsible on narrow viewports (AC-4.3): on a phone the full chapter list above the document
   meant scrolling past ten entries to reach the text. The toggle is hidden on wide viewports,
   where the rail is a permanent sidebar. */
.tw-help-nav-toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 4px;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 600;
    color: var(--s-ink-900);
    cursor: pointer;
}

.tw-help-nav-toggle-chevron {
    margin-left: auto;
}

@media (max-width: 900px) {
    .s-help-rail {
        position: static;
    }

    .tw-help-nav-toggle {
        display: flex;
    }

    .tw-help-nav-body {
        display: none;
    }

    .tw-help-nav-body.open {
        display: block;
        margin-top: 8px;
    }

    .tw-help-nav {
        max-height: none;
    }
}

/* ---------------------------------------------------------------------------------------------
   Overview cards (AC-4.2)
   --------------------------------------------------------------------------------------------- */
.tw-help-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.tw-help-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    border-radius: var(--s-r-card);
    box-shadow: var(--s-shadow-card);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.tw-help-card:hover {
    border-color: color-mix(in srgb, var(--s-secondary) 45%, transparent);
    box-shadow: var(--s-shadow-hover);
    transform: translateY(-1px);
}

.tw-help-card-ordinal {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--s-r-tile);
    background: color-mix(in srgb, var(--s-secondary) 14%, transparent);
    color: var(--s-secondary-text);
    font-family: var(--s-font-display);
    font-weight: 750;
    font-size: 0.86rem;
}

[data-theme="dark"] .tw-help-card-ordinal {
    color: var(--s-secondary);
}

.tw-help-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tw-help-card-title {
    font-family: var(--s-font-display);
    font-weight: 700;
    font-size: 0.94rem;
    line-height: 1.3;
    color: var(--s-ink-900);
}

.tw-help-card-summary {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--s-muted);
}

.tw-help-card-arrow {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--s-ink-400);
}

@media (prefers-reduced-motion: reduce) {
    .tw-help-card {
        transition: none;
    }

    .tw-help-card:hover {
        transform: none;
    }
}

/* On the overview the cards above are the table of contents, so the index document's own contents
   table would repeat it. Hide that one table and the heading directly in front of it; the rest of
   the index (intro, quick-start chain) still renders. Scoped to .tw-help-doc-index, which only the
   overview article carries — chapter tables are untouched. */
.tw-help-doc-index > table {
    display: none;
}

.tw-help-doc-index > h2:has(+ table) {
    display: none;
}

/* In the chapter view the PageHero already carries the chapter title (and so does the breadcrumb),
   so the markdown's own leading h1 would print it a third time. Scoped to the two-column layout;
   the overview article keeps its "Gebruikershandleiding" heading. */
.tw-help-layout .tw-help-doc > h1:first-child {
    display: none;
}

/* The same holds for the overview: there the hero already carries the h1 with the manual's title,
   and the index document's own first heading ("TrapWatch — Gebruikershandleiding") ended up below
   it as a second h1 — a screen reader was handed two page titles, and those two named the page
   differently into the bargain. The heading stays in the markdown: those files are also read
   straight from GitHub, where the document title genuinely is needed (see the rule for the contents
   table above). */
.tw-help-doc-index > h1:first-child {
    display: none;
}

/* ---------------------------------------------------------------------------------------------
   Reading typography (US-3)

   The chapter body is raw markdown-rendered HTML injected as a MarkupString, so none of it is
   MudBlazor markup and none of it inherits MudBlazor's typography classes. MudBlazor's reset
   leaves p/h2/ol at margin:0 with line-height:normal and padding-left:0, and colours every <a>
   the same as body text with no underline — measured on the live stack, which is why the chapters
   read as one undifferentiated wall of text. Everything below scopes to .s-help-doc so it can
   never leak into the rest of the app.
   --------------------------------------------------------------------------------------------- */
.s-help-doc {
    color: var(--s-ink-700);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Cap the measure for comfortable reading on wide screens (AC-3.5). Tables and images opt out
   below — they need the full card width. */
.s-help-doc > p,
.s-help-doc > ul,
.s-help-doc > ol,
.s-help-doc > blockquote {
    max-width: 74ch;
}

.s-help-doc > *:first-child {
    margin-top: 0;
}

.s-help-doc > *:last-child {
    margin-bottom: 0;
}

.s-help-doc h1,
.s-help-doc h2,
.s-help-doc h3,
.s-help-doc h4 {
    font-family: var(--s-font-display);
    color: var(--s-ink-900);
    line-height: 1.25;
    scroll-margin-top: 90px; /* in-page anchors clear the app bar */
}

/* On a phone "Gebruikershandleiding" did not fit on one line and overflow-wrap broke the word
   hard, leaving a lone "g" on the next line. With hyphens (the host sets <html lang="nl">) the
   browser breaks it neatly with a hyphen; break-word stays as a safety net for extreme cases. */
.s-help-doc h1,
.s-help-doc h2,
.s-help-doc h3 {
    overflow-wrap: normal;
    hyphens: auto;
}

.s-help-doc h1 {
    font-size: 1.65rem;
    font-weight: 750;
    margin: 0 0 14px;
}

.s-help-doc h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 38px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--s-line);
}

.s-help-doc h3 {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 28px 0 8px;
}

.s-help-doc h4 {
    font-size: 0.94rem;
    font-weight: 700;
    margin: 22px 0 6px;
}

.s-help-doc p {
    margin: 0 0 14px;
}

.s-help-doc ul,
.s-help-doc ol {
    margin: 0 0 14px;
    padding-left: 26px;
}

.s-help-doc li {
    margin-bottom: 7px;
}

.s-help-doc li > ul,
.s-help-doc li > ol {
    margin: 7px 0 0;
}

.s-help-doc li > p {
    margin-bottom: 7px;
}

.s-help-doc li::marker {
    color: var(--s-muted);
    font-weight: 600;
}

.s-help-doc strong {
    color: var(--s-ink-900);
    font-weight: 650;
}

.s-help-doc a {
    color: var(--s-secondary-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

[data-theme="dark"] .s-help-doc a {
    color: var(--s-secondary);
}

.s-help-doc a:hover {
    text-decoration-thickness: 2px;
}

.s-help-doc code {
    font-family: var(--tw-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
    font-size: 0.86em;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--s-fill);
    color: var(--s-ink-900);
    white-space: nowrap;
}

.s-help-doc pre {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: var(--s-r-tile);
    background: var(--s-fill-faint);
    border: 1px solid var(--s-line);
    overflow-x: auto;
}

.s-help-doc pre code {
    padding: 0;
    background: none;
    white-space: pre;
}

.s-help-doc blockquote {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-left: 3px solid var(--s-secondary);
    border-radius: 0 var(--s-r-tile) var(--s-r-tile) 0;
    background: var(--s-tint-info);
    color: var(--s-ink-700);
}

.s-help-doc blockquote > *:last-child {
    margin-bottom: 0;
}

.s-help-doc hr {
    margin: 28px 0;
    border: 0;
    border-top: 1px solid var(--s-line);
}

.s-help-doc table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.s-help-doc thead th {
    text-align: left;
    font-weight: 700;
    color: var(--s-ink-900);
    background: var(--s-fill-faint);
    border-bottom: 2px solid var(--s-line-strong);
    padding: 9px 12px;
}

.s-help-doc tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--s-line);
    vertical-align: top;
}

.s-help-doc tbody tr:last-child td {
    border-bottom: 0;
}

.s-help-doc img {
    display: block;
    margin: 6px 0 22px;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--s-line);
    border-radius: var(--s-r-tile);
    box-shadow: var(--s-shadow-card);
}

/* Tables can outgrow narrow viewports; let the block scroll rather than the whole page. */
@media (max-width: 599.98px) {
    .s-help-doc table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .s-help-doc code {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ---------------------------------------------------------------------------------------------
   Pager (AC-4.4)
   --------------------------------------------------------------------------------------------- */
.tw-help-pager {
    gap: 12px;
    margin-top: 20px;
}

.tw-help-pager .s-help-pager-link {
    align-items: center;
    gap: 10px;
    max-width: 48%;
    padding: 12px 16px;
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    border-radius: var(--s-r-card);
    color: var(--s-ink-900);
}

.tw-help-pager .s-help-pager-link:hover {
    border-color: color-mix(in srgb, var(--s-secondary) 45%, transparent);
    text-decoration: none;
}

.tw-help-pager-next {
    text-align: right;
}

.tw-help-pager-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tw-help-pager-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s-muted);
}

.tw-help-pager-title {
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 599.98px) {
    .tw-help-pager .s-help-pager-link {
        max-width: 100%;
    }

    .tw-help-pager-title {
        display: none;
    }
}