/* ==========================================================================
   CostGuard – Help center (knowledge base)
   ──────────────────────────────────────────────────────────────────────────
   Page-only rules of /{culture}/help and /{culture}/help/<slug>. Loaded after
   /css/costguard-public.css, whose vocabulary both pages are built from: the
   centred hero, and for an article the document shape (.cg-pub-doc with its
   sticky contents rail, its measure and its scroll offset). Nothing here
   restates those; this file adds what only the help family has.

     index     .cg-help-search, .cg-help-results-head, .cg-help-empty,
               .cg-help-group (+ -head), .cg-help-list, .cg-help-card (+ -meta,
               -sections)
     article   .cg-help-breadcrumb, .cg-help-doc, .cg-help-section,
               .cg-help-anchor (+ -alias), .cg-help-copy, .cg-help-figure (+ -frame),
               .cg-help-motion, .cg-help-callout (+ -label), .cg-help-steps,
               .cg-help-table (+ -wrap, -yes, -no, -more), .cg-help-related,
               .cg-help-pager (+ -link, -previous, -next)

   No colour literals: every value resolves through --cg-*. Logical properties
   only, so Persian and Arabic need no second rule. No entrance animation. The
   one script, /js/public-document.js, owns no element: it is delegated from the
   document, because Blazor replaces the prerendered markup when the circuit
   attaches.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Index — search
   A plain GET form. The field and the button sit on one row and wrap on a
   phone; the field grows, the button keeps its width.
   -------------------------------------------------------------------------- */

.cg-help-search {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cg-pub-space-1);
    max-width: 36rem;
    margin-block-start: var(--cg-pub-space-4);
    margin-inline: auto;
}

.cg-help-search-input {
    flex: 1 1 14rem;
    min-width: 0;
    padding-block: 0.6875rem;
    padding-inline: var(--cg-pub-space-2);
    border: 1px solid var(--cg-border-strong);
    border-radius: var(--cg-pub-radius);
    background: var(--cg-bg-elevated);
    font: inherit;
    font-size: 1rem;
    color: var(--cg-text-primary);
}

.cg-help-search-input::placeholder {
    color: var(--cg-text-secondary);
}

.cg-help-results-head {
    margin-block-end: var(--cg-pub-space-4);
}

.cg-pub .cg-help-results-head p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--cg-pub-space-1) var(--cg-pub-space-3);
    margin: var(--cg-pub-space-1) 0 0;
    color: var(--cg-pub-muted);
}

.cg-help-query {
    font-weight: 600;
    color: var(--cg-pub-ink);
    overflow-wrap: anywhere;
}

/* Nothing published, or nothing found. A quiet statement, not an alert. */
.cg-help-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cg-pub-space-2);
    padding-block: var(--cg-pub-space-4);
    border-block: 1px solid var(--cg-border);
    text-align: center;
    color: var(--cg-pub-muted);
}

.cg-help-empty > i {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--cg-accent-text);
}

.cg-pub .cg-help-empty p {
    max-width: 40ch;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Index — category groups
   A split row under a hairline: the category on the inline-start side, its
   articles beside it. One column on a phone.
   -------------------------------------------------------------------------- */

.cg-help-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cg-pub-space-3);
    padding-block: var(--cg-pub-space-4);
    border-block-start: 1px solid var(--cg-border);
}

@media (min-width: 992px) {
    .cg-help-group {
        grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
        column-gap: clamp(3rem, 6vw, 6rem);
    }
}

.cg-pub .cg-help-group-head p {
    margin: var(--cg-pub-space-1) 0 0;
    color: var(--cg-pub-muted);
}

.cg-help-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--cg-pub-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The whole card is the target of its title link; the link itself stays the
   only focusable element, so the keyboard meets one stop per article. */
.cg-help-card {
    position: relative;
    block-size: 100%;
    padding: var(--cg-pub-space-3);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-pub-radius);
    background: var(--cg-bg-elevated);
}

.cg-help-card:hover {
    border-color: var(--cg-border-strong);
}

.cg-pub .cg-help-card h3 {
    margin: 0 0 var(--cg-pub-space-1);
}

.cg-pub .cg-help-card h3 a {
    color: var(--cg-pub-ink);
    text-decoration: none;
}

.cg-pub .cg-help-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.cg-pub .cg-help-card:hover h3 a {
    color: var(--cg-accent-text);
}

.cg-pub .cg-help-card p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cg-pub-muted);
}

.cg-pub .cg-help-card .cg-help-card-meta {
    margin-block-start: var(--cg-pub-space-2);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

/* A search result's matching sections: each a link straight to its anchor. They
   sit above the card's stretched title link, so they are their own targets and
   their own keyboard stops. */
.cg-help-card-sections {
    position: relative;
    z-index: 1;
    margin-block-start: var(--cg-pub-space-2);
}

.cg-pub .cg-help-card .cg-help-card-sections-label {
    margin-block-end: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cg-pub-ink);
}

.cg-help-card-sections ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cg-pub .cg-help-card-sections a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--cg-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--cg-accent-text);
    text-decoration: none;
    background: var(--cg-bg);
}

.cg-pub .cg-help-card-sections a:hover {
    border-color: var(--cg-accent-text);
}

/* --------------------------------------------------------------------------
   Article — breadcrumb
   -------------------------------------------------------------------------- */

.cg-help-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.5rem;
    margin: 0 0 var(--cg-pub-space-3);
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--cg-pub-muted);
}

.cg-help-breadcrumb li + li::before {
    content: "/";
    margin-inline-end: 0.5rem;
    color: var(--cg-border-strong);
}

.cg-pub .cg-help-breadcrumb a {
    color: var(--cg-pub-muted);
    text-decoration: none;
}

.cg-pub .cg-help-breadcrumb a:hover {
    color: var(--cg-accent-text);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Article — document
   The document shape with a wider text column: an article carries captures of
   the application, which need more room than a legal text. Paragraphs keep
   the reading measure inside it.
   -------------------------------------------------------------------------- */

.cg-help-doc {
    --cg-pub-doc-measure: 46rem;
}

.cg-pub .cg-help-doc .cg-pub-doc-section p,
.cg-pub .cg-help-doc .cg-pub-doc-section li,
.cg-pub .cg-help-doc .cg-pub-doc-lead {
    max-width: 62ch;
}

.cg-pub .cg-help-doc .cg-pub-doc-section ul,
.cg-pub .cg-help-doc .cg-pub-doc-section ol {
    margin: 0 0 var(--cg-pub-space-2);
    padding-inline-start: var(--cg-pub-space-3);
    line-height: 1.7;
    color: var(--cg-pub-ink);
}

.cg-pub .cg-help-doc .cg-pub-doc-section li + li {
    margin-block-start: 0.375rem;
}

/* A label of the application quoted in the text, and a key to press. */
.cg-help-doc kbd,
.cg-help-doc code {
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--cg-border);
    border-radius: 0.375rem;
    background: var(--cg-bg-subtle);
    font-size: 0.875em;
    color: var(--cg-pub-ink);
}

/* The link beside a section heading: the address of that section. It is quiet
   until the heading is hovered or the link is focused, and always visible on
   a touch screen, where there is no hover. */
.cg-pub .cg-help-anchor {
    margin-inline-start: 0.375rem;
    font-size: 0.75em;
    color: var(--cg-pub-muted);
    text-decoration: none;
    opacity: 0;
}

.cg-help-section > h2:hover .cg-help-anchor,
.cg-pub .cg-help-anchor:focus-visible {
    opacity: 1;
}

.cg-pub .cg-help-anchor:hover {
    color: var(--cg-accent-text);
}

@media (hover: none) {
    .cg-pub .cg-help-anchor {
        opacity: 1;
    }
}

/* The copy button beside a section heading: always visible, quiet until used.
   /js/public-document.js adds .is-copied for two seconds after a copy, which swaps
   the clipboard for a check; the announcement goes to a live region. */
.cg-pub .cg-help-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    margin-inline-start: 0.25rem;
    padding: 0;
    vertical-align: middle;
    border: 1px solid var(--cg-border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--cg-pub-muted);
    background: var(--cg-bg-elevated);
    cursor: pointer;
}

.cg-pub .cg-help-copy:hover {
    border-color: var(--cg-accent-text);
    color: var(--cg-accent-text);
}

.cg-help-copy .cg-help-copy-done,
.cg-help-copy.is-copied .cg-help-copy-idle {
    display: none;
}

.cg-help-copy.is-copied .cg-help-copy-done {
    display: inline;
}

.cg-pub .cg-help-copy.is-copied {
    border-color: var(--cg-accent-text);
    color: var(--cg-accent-text);
}

/* The earlier id of a renamed section: a target with no box of its own. It
   inherits the scroll offset every id in the document body gets. */
.cg-help-anchor-alias {
    display: block;
    block-size: 0;
}

/* --------------------------------------------------------------------------
   Article — figure
   -------------------------------------------------------------------------- */

.cg-help-figure {
    margin-block: var(--cg-pub-space-3) var(--cg-pub-space-4);
    margin-inline: 0;
}

.cg-help-figure-frame {
    overflow: hidden;
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-pub-radius);
    background: var(--cg-bg-subtle);
}

.cg-help-figure-frame img {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

/* Each frame holds the light and the dark capture; the theme picks one. A hidden lazy image is not
   fetched, so the other capture costs nothing until the theme changes. */
.cg-help-figure-frame img.cg-help-figure-dark,
[data-bs-theme="dark"] .cg-help-figure-frame img.cg-help-figure-light {
    display: none;
}

[data-bs-theme="dark"] .cg-help-figure-frame img.cg-help-figure-dark {
    display: block;
}

.cg-help-figure figcaption {
    margin-block-start: var(--cg-pub-space-1);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--cg-pub-muted);
}

.cg-help-motion {
    margin-block-start: var(--cg-pub-space-1);
}

.cg-help-motion > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cg-accent-text);
    cursor: pointer;
    list-style: none;
}

.cg-help-motion > summary::-webkit-details-marker {
    display: none;
}

.cg-help-motion[open] > summary {
    margin-block-end: var(--cg-pub-space-1);
}
/* --------------------------------------------------------------------------
   Article — callout, steps, plan table
   -------------------------------------------------------------------------- */

.cg-help-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--cg-pub-space-1);
    margin-block: var(--cg-pub-space-3);
    padding: var(--cg-pub-space-2) var(--cg-pub-space-3);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-pub-radius);
    background: var(--cg-pub-band-bg);
    font-size: 0.9375rem;
}

.cg-help-callout > i {
    flex: 0 0 auto;
    font-size: 1.125rem;
    line-height: 1.35;
    color: var(--cg-accent-text);
}

.cg-pub .cg-help-doc .cg-help-callout p {
    margin: 0;
    line-height: 1.6;
}

.cg-pub .cg-help-doc .cg-help-callout .cg-help-callout-label {
    font-weight: 600;
}

.cg-pub .cg-help-doc .cg-pub-doc-section .cg-help-steps {
    padding-inline-start: var(--cg-pub-space-3);
}

.cg-help-steps > li::marker {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cg-accent-text);
}

/* A table scrolls inside its own box, so the page never scrolls sideways. */
.cg-help-table-wrap {
    overflow-x: auto;
    margin-block: var(--cg-pub-space-3) var(--cg-pub-space-1);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-pub-radius);
}

.cg-help-table {
    inline-size: 100%;
    min-inline-size: 34rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.cg-help-table th,
.cg-help-table td {
    padding: 0.75rem var(--cg-pub-space-2);
    border-block-end: 1px solid var(--cg-border);
    text-align: center;
    color: var(--cg-pub-ink);
}

.cg-help-table tbody tr:last-child > * {
    border-block-end: 0;
}

.cg-help-table thead th {
    background: var(--cg-bg-subtle);
    font-size: 0.8125rem;
    font-weight: 600;
}

.cg-help-table th:first-child {
    text-align: start;
    font-weight: 500;
}

.cg-help-table thead th:first-child {
    font-weight: 600;
}

.cg-help-table-yes {
    color: var(--cg-accent-text);
}

.cg-help-table .cg-help-table-no {
    color: var(--cg-pub-muted);
}

/* --------------------------------------------------------------------------
   Article — related articles, previous and next
   -------------------------------------------------------------------------- */

.cg-pub .cg-help-related ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cg-pub .cg-help-related li a {
    color: var(--cg-accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.cg-help-pager {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--cg-pub-space-3);
    margin-block-start: var(--cg-pub-space-4);
}

.cg-pub .cg-help-pager-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--cg-pub-space-2) var(--cg-pub-space-3);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-pub-radius);
    color: var(--cg-pub-ink);
    text-decoration: none;
}

.cg-pub .cg-help-pager-link:hover {
    border-color: var(--cg-border-strong);
    color: var(--cg-accent-text);
}

.cg-help-pager-link > span {
    font-size: 0.8125rem;
    color: var(--cg-pub-muted);
}

.cg-help-pager-next {
    text-align: end;
}

/* --------------------------------------------------------------------------
   Print — the text and its figures, without the site around them.
   -------------------------------------------------------------------------- */

@media print {
    .cg-help ~ footer,
    .cg-pub-wrapper > header,
    .cg-help .cg-pub-doc-toc,
    .cg-help .cg-help-anchor,
    .cg-help .cg-help-motion,
    .cg-help .cg-help-pager,
    .cg-help .cg-pub-doc-related,
    .cg-help-search,
    .cg-pub-top {
        display: none;
    }

    .cg-help .cg-pub-doc {
        display: block;
    }

    .cg-help-figure,
    .cg-help-callout,
    .cg-help-table-wrap {
        break-inside: avoid;
    }
}