/*
  Starruk.Modules.Help.Blazor — chapter-nav rail + pager styling.
  Consumers add this stylesheet once:
    _content/Starruk.Modules.Help.Blazor/starruk-help.css

  The two-column chapter layout (nav rail + doc + pager) isn't part of the shared-kit CSS
  Starruk.Platform.Blazor.DesignSystem ships (PageHero/cards/filter-bar/states/tables only, per
  ADR-006 §6) — same reasoning MultiSelectFilter uses for its own s-msf-* stylesheet. This file
  styles its own s-help-* class names and reads --mud-palette-*/--s-* runtime vars rather than
  redefining brand colors.
*/

.s-help-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}

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

.s-help-rail {
    position: sticky;
    top: 16px;
}

.s-help-rail nav {
    display: flex;
    flex-direction: column;
}

.s-help-nav-item {
    display: block;
    padding: 8px 10px;
    border-radius: var(--s-r-sm, 6px);
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87));
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.3;
}

.s-help-nav-item:hover {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.s-help-nav-item.active {
    background: var(--s-brand-primary-tint, var(--mud-palette-primary-hover, rgba(0, 0, 0, 0.06)));
    color: var(--s-brand-primary, var(--mud-palette-primary));
    font-weight: 600;
}

.s-help-doc {
    max-width: 100%;
    overflow-wrap: break-word;
}

.s-help-doc img {
    max-width: 100%;
    border-radius: var(--s-r-sm, 6px);
}

.s-help-pager {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}

.s-help-pager-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--s-brand-primary, var(--mud-palette-primary));
    text-decoration: none;
    font-size: 0.9rem;
}

.s-help-pager-link:hover {
    text-decoration: underline;
}