/* Copyright (c) 2026 eewzoo.com. SPDX-License-Identifier: MIT */
/* help.css — the in-app help: (?) icons, the slide-in panel, topic text.
   Its own file because the PORTAL layouts load it too, and they do not load
   site.css. Loaded by _Layout, _ResidentPortalLayout and _ExternalPortalLayout. */

/* ---------------------------------------------------------------------------
   In-app help (DOCS/Help-DesignNote.md). The (?) icon is a real <button>
   (RentalManager.Modules/Help/HelpTagHelpers.cs) stripped of button chrome:
   muted until hovered or focused, so a page of icons never shouts. Its focus
   ring stays — keyboard users must see where they are. The panel is a right
   offcanvas (_HelpPanel + js/help.js): 420px on a desktop, the full width of
   a phone.
   --------------------------------------------------------------------------- */
.help-icon {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 0.15rem; margin: 0; border: 0; background: none;
    color: var(--bs-secondary-color); font-size: 0.9em; line-height: 1;
    vertical-align: baseline; border-radius: 50%; cursor: pointer;
}
.help-icon:hover, .help-icon:focus-visible { color: var(--bs-link-color); }
.help-icon:focus-visible { outline: 2px solid var(--bs-link-color); outline-offset: 2px; }
/* A page title's icon sits a little smaller than the heading text. */
h1 > .help-icon { font-size: 0.7em; vertical-align: 0.15em; }

.help-panel { --bs-offcanvas-width: 420px; }
@media (max-width: 575.98px) { .help-panel { --bs-offcanvas-width: 100vw; } }
.help-body img { max-width: 100%; height: auto; border-radius: var(--bs-border-radius); }
.help-body table { width: 100%; margin-bottom: 1rem; font-size: 0.9em; }
.help-body th, .help-body td { border-bottom: 1px solid var(--bs-border-color); padding: 0.25rem 0.4rem; }
.help-body h1, .help-body h2, .help-body h3 { font-size: 1.05rem; margin-top: 1rem; }
.help-body ul.contains-task-list { list-style: none; padding-left: 1rem; }

/* Tip boxes: "> [!TIP]" in a topic (Markdig alert blocks). One quiet box per
   kind, coloured by the theme's own tokens so it reads in light and dark. */
.markdown-alert {
    border-left: 0.25rem solid var(--bs-info-border-subtle);
    background: var(--bs-info-bg-subtle); color: var(--bs-body-color);
    padding: 0.5rem 0.75rem; margin: 0 0 1rem; border-radius: var(--bs-border-radius);
}
.markdown-alert > :last-child { margin-bottom: 0; }
.markdown-alert-title { font-weight: 600; margin-bottom: 0.25rem; }
.markdown-alert-warning, .markdown-alert-caution {
    border-left-color: var(--bs-warning-border-subtle); background: var(--bs-warning-bg-subtle);
}
.markdown-alert-important { border-left-color: var(--bs-primary-border-subtle); background: var(--bs-primary-bg-subtle); }