/* Generated by deploy/build-help.cs from Help.razor.css. Do not edit.
   Edit the source and run the tool. */

.help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.help-header h1 {
    margin: 0;
    font-size: 22px;
}

.help-intro {
    margin: 0 0 16px;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.55;
}

/* The section list.

   Chips rather than a bulleted list: twelve bullets down the page is another
   screen to scroll past before reaching the thing you scrolled for, which is the
   problem this is meant to solve. Wrapped chips take three or four lines and
   read as a set of choices. */
.help-toc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

/* A heading over each handful, so the eye picks a part of the app before it
   starts reading question titles. Twelve chips in one row is a wall; four
   groups of three or four is a menu. */
.help-toc-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.help-toc-heading {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
}

.help-toc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.help-toc a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--border-chip);
    border-radius: var(--radius-chip);
    background: var(--bg-chip);
    color: var(--text-dim);
    font-size: 13px;
    text-decoration: none;
}

.help-toc a:hover {
    background: var(--bg-chip-hover);
    color: var(--text);
    border-color: var(--accent-line);
}

.help-toc i {
    font-size: 15px;
    color: var(--accent);
}

/* The group headings in the page itself, not just in the contents list.

   Sticky, because the contents list promised four groups and then handed over a
   flat run of twelve cards: two screens down you had lost which part of the app
   you were reading about, which is the thing the grouping was meant to fix.
   Sticking to the top of the scroller keeps the answer on screen the whole way
   through the section.

   An opaque background is not optional here. A sticky element with a see-through
   one has the cards sliding visibly underneath the words, which reads as a
   rendering fault. */
.help-group {
    position: sticky;
    top: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 10px;
    padding: 8px 0;
    background: var(--bg);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}

.help-group:first-of-type {
    margin-top: 4px;
}

.help-group i {
    font-size: 16px;
    color: var(--accent);
}

.help-card {
    /* So a jumped-to section lands with a little air above it rather than
       welded to the top edge of the scroller. */
    scroll-margin-top: 52px;

    padding: 16px;
    margin-bottom: 12px;
    background: var(--surface-card);
    box-shadow: var(--lift);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
}

.help-card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 16px;
}

.help-card h2 i {
    color: var(--accent);
    font-size: 19px;
}

.help-card p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
}

.help-card p:last-child {
    margin-bottom: 0;
}

/* The aside that answers "yes but what if". Quieter than the explanation it
   follows, because it is the second thing to read rather than the first. */
.help-note {
    padding: 10px 12px;
    background: var(--bg-row);
    border-left: 2px solid var(--accent);
    border-radius: 0 8px 8px 0;
    color: var(--text-dim);
    font-size: 13px !important;
}

/* A heading inside a card, for the one section long enough to need signposts of
   its own. Smaller than the card's own h2 so the hierarchy still reads. */
.help-sub {
    margin: 16px 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.help-list {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.55;
}

.help-list li {
    margin-bottom: 8px;
}

/* ── The three shapes ───────────────────────────────────────────────── */

.help-shapes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.help-shapes li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.help-shapes strong {
    display: block;
    font-size: 14px;
}

.help-shapes span:not(.help-shape-mark) {
    display: block;
    margin-top: 2px;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
}

/* Drawn rather than described: a dot, a line and a filled shape say what three
   sentences would have to. */
.help-shape-mark {
    flex: none;
    width: 34px;
    height: 34px;
    margin-top: 2px;
    border-radius: 8px;
    background: var(--bg-row);
    position: relative;
}

.help-shape-point::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--bg-card);
}

.help-shape-line::after {
    content: "";
    position: absolute;
    inset: 50% 6px auto 6px;
    height: 3px;
    transform: translateY(-50%) rotate(-20deg);
    border-radius: 2px;
    background: var(--accent);
}

.help-shape-polygon::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 2px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 3px;
}

/* ── Worked examples ────────────────────────────────────────────────── */

.help-card-examples {
    border-color: var(--border-chip);
}

.help-example {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border-row);
}

.help-example h3 {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--amber);
}

.help-example ol {
    margin: 0 0 10px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.7;
}

.help-example p {
    font-size: 14px;
}

.help-footer {
    margin: 16px 0 0;
    color: var(--text-faint);
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}

/* ── Back to the top ────────────────────────────────────────────────── */

/* Fifteen sections is a long scroll back to the contents, and on a phone there
   is no keyboard Home key to fall back on.

   Fixed to the viewport rather than sticky inside the article, because sticky
   would take a row of space in the flow at the end of the page and leave a gap
   under the last paragraph on every screen wide enough not to need the button.

   The bottom offset clears the tab bar by hand. The bar is a flex sibling of
   main rather than an overlay, so it occupies the foot of the window and a
   button pinned to bottom:0 would sit on top of it. 6px of padding, a 6px tab
   inset, a 22px icon and an 11px label come to about 60, plus whatever the
   phone reserves for its home indicator. */
.help-totop {
    position: fixed;
    right: 16px;
    bottom: calc(76px + var(--inset-b));
    z-index: 20;

    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-card);
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.28);
    cursor: pointer;

    /* Not display:none, so the fade has something to animate and the button
       keeps its place in the accessibility tree rather than appearing from
       nowhere mid-scroll. Pointer events go with the opacity: an invisible
       button that still swallows taps at the bottom right of every short page
       would be a genuinely mysterious bug. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.help-totop.is-shown {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.help-totop i {
    font-size: 20px;
}

.help-totop:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.help-totop:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 44px is the smallest comfortable target on a phone; a desktop pointer is
   precise and the rail has replaced the bottom bar, so it moves down and can
   afford to be a little larger without crowding anything. */
@media (min-width: 900px) {
    .help-totop {
        right: 28px;
        bottom: calc(28px + var(--inset-b));
        width: 48px;
        height: 48px;
    }
}

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