/* =============================================================================
   mh-help.css  -  the HELP CENTER (HelpCenter.razor), built Aug 9 2026.

   The CEO asked for the Services hub's card language ("like the KPI card on the
   Services section"), so the card here is deliberately the .svc-card recipe:
   glass pane over the canvas, accent hairline along the top edge, a circular
   logo tile wearing a two-step halo, and a title that takes the card's own
   accent with an underline wiping in beneath it on hover. What is NOT copied is
   the Services stage - that hub centres two cards in an empty canvas, and ten
   cards under a page head is a different composition.

   PALETTE: five accent pairs, EVERY ONE ALREADY IN THIS APP - pine from the
   Services hub (--mh-green / --mh-green-d) and the four dashboard KPI accents
   from mh-frostedsage.css (sage / slate / terra / plum). No colour was invented
   for this surface. The design system owns the palette.

   The page FRAME (.mh-helppage, .hlp-head, .hlp-title, .hlp-sub, .hlp-empty)
   still lives in mh-usermenu.css, which it shares with /requests. Only what is
   new to the Help Center is here, and this file loads after it.

   --mh-vh / --mh-vw throughout, never bare vh/vw: the app carries a root zoom for
   Display Resolution and raw viewport units ignore it.
   ============================================================================= */

/* =========================================================
   ACCENTS - one place, read by cards, guide heads and rails
   ========================================================= */
.mh-app [data-accent="pine"]  { --a: #4E7C72; --a2: #3D655D; }
.mh-app [data-accent="sage"]  { --a: #5E8157; --a2: #3D543A; }
.mh-app [data-accent="slate"] { --a: #56646A; --a2: #2A3338; }
.mh-app [data-accent="terra"] { --a: #C17A52; --a2: #9C5A36; }
.mh-app [data-accent="plum"]  { --a: #8E6E89; --a2: #6B4F67; }

/* =========================================================
   HUB - search bar row
   ========================================================= */
/* CEO, Aug 14 2026: "make the size like global search, then fit the search box to
   the 3 cards below it".

   TWO SEPARATE FAULTS, both fixed here.

   SIZE. The bar wore the BASE .bigbar geometry - 62px tall, 26px of side padding,
   17px text - which is the tall hero variant. The GLOBAL topbar search overrides
   that to 42px / 16px / 14px (.gsearch .bigbar in mh-theme.css). Those four values
   are copied here deliberately rather than the rule being widened to cover both:
   .gsearch is a fixed 440px topbar child and this is a full-width page control, so
   they share a SKIN, not a footprint. If the global bar is ever re-sized, re-read
   .gsearch .bigbar and match it again.

   WIDTH. .bigbar carries `max-width:600px; margin:0 auto`, so at 520px inside a
   flex row it floated in the middle of the page with the card grid running full
   width underneath - the mismatch that was actually being looked at. Both are
   cancelled so the bar measures exactly the grid it sits above, at every breakpoint,
   because the two share the same page container.
   ========================================================= */
.mh-app .hlp-hubbar {
    display: block;
    margin: 0 0 20px;
}
/* .bigbar b14 is the app's shared search control; only the footprint and the clear
   button are local. */
.mh-app .hlp-srch {
    width: 100%; max-width: none; min-width: 0; margin: 0; position: relative;
    height: 42px; padding: 0 16px; gap: 12px;
}
.mh-app .hlp-srch input { font-size: 14px; }
.mh-app .hlp-srch .divider { height: 22px; }
.mh-app .hlp-srch .search-ic { display: inline-flex; width: 18px; height: 18px; color: var(--mh-muted); }
.mh-app .hlp-srch .search-ic svg { width: 100%; height: 100%; }
.mh-app .hlp-srch-x {
    flex: none; width: 22px; height: 22px; margin-right: 2px;
    display: grid; place-items: center;
    border: none; border-radius: 50%; cursor: pointer;
    background: color-mix(in srgb, var(--mh-muted) 18%, transparent);
    color: var(--mh-muted);
    transition: background .15s, color .15s;
}
.mh-app .hlp-srch-x:hover { background: color-mix(in srgb, var(--mh-green) 22%, transparent); color: var(--mh-green-d); }
.mh-app .hlp-srch-x svg { width: 12px; height: 12px; }
/* The count now rides INSIDE the bar, at its right edge. It used to be a second
   child of the row, which meant the bar could never be flush with the card grid -
   it always stopped short by the width of the count plus a gap. */
.mh-app .hlp-hubcount {
    flex: none; font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--mh-muted);
    padding-left: 4px; white-space: nowrap;
}

/* =========================================================
   HUB - the card grid
   ========================================================= */
/* THE CARD-GRID LAW, honoured where it matters: an EXPLICIT track count, never
   auto-fill, stepping 3 -> 2 -> 1. The shared .mh-cardgrid is capped at two
   columns by a CEO directive about ENTITY cards (a household, a subsidy), which
   are wide because they carry figures; ten navigation cards two-abreast would be
   five screens of scrolling. The deterministic-repeat rule is the law - the
   number of tracks is the per-surface part. */
.mh-app .hlp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 1180px) { .mh-app .hlp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .mh-app .hlp-grid { grid-template-columns: minmax(0, 1fr); } }

/* A <button>, so it is keyboard-reachable and Enter / Space work with no extra code.
   Everything below undoes the browser's button chrome. */
.mh-app .hlp-card {
    --a: var(--mh-green); --a2: var(--mh-green-d);
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    width: 100%; min-width: 0;
    font: inherit; color: inherit; appearance: none; cursor: pointer;
    text-align: center;
    padding: 26px 22px 18px;
    /* The Services glass recipe: a part-transparent fill, a backdrop blur and a bright
       hairline that behaves like a lit edge. The gloss is a BACKGROUND layer rather than
       an ::after overlay - an overlay would paint over the title and the footer. */
    background:
        linear-gradient(155deg, rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 0%, rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 34%, transparent 62%),
        color-mix(in srgb, var(--mh-surface) 62%, transparent);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.60);border-right-color:var(--tg-edge-r,rgba(255,255,255,.60));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.60));
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70), 0 18px 40px -22px rgba(33,50,58,.30);
    transition: transform .24s cubic-bezier(.2,.7,.25,1), box-shadow .24s, border-color .2s, background .2s;
    overflow: hidden;
}
/* The accent reads as a hairline along the top edge, not a block of colour. */
.mh-app .hlp-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--a), var(--a2));
    opacity: .85;
}
/* Hover = zoom in, exactly as the Services cards do. ONE transform property carries
   both the lift and the scale: two properties animating the same thing fight. 1.03 on a
   ~360px card grows it ~11px, inside the 16px gutter, so a zoomed card never touches
   its neighbour even in the three-column layout. */
.mh-app .hlp-card:hover,
.mh-app .hlp-card:focus-visible {
    transform: translateY(-4px) scale(1.03);
    z-index: 2;
    border-color: color-mix(in srgb, var(--a) 55%, rgba(255,255,255,.6));
    background:
        linear-gradient(155deg, rgba(var(--tg-rgb,255,255,255),calc(.68*var(--tg-k,1))) 0%, rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 34%, transparent 62%),
        color-mix(in srgb, var(--mh-surface) 76%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 30px 60px -24px rgba(33,50,58,.38);
}
.mh-app .hlp-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 45%, transparent), 0 30px 60px -24px rgba(33,50,58,.38);
}
.mh-app .hlp-card:active { transform: translateY(-2px) scale(1.01); }

/* The logo tile: a full circle wearing the app's two-step halo (a translucent gap, then
   a thin accent hairline) - the same halo household avatars and the Services tiles wear,
   so this reads as part of the set. Both rings are box-shadows, so they cost no layout
   and cannot nudge the glyph off the centre line. */
.mh-app .hlp-card-ic {
    width: 62px; height: 62px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--a), var(--a2));
    box-shadow:
        0 0 0 5px rgba(255,255,255,.55),
        0 0 0 6.5px color-mix(in srgb, var(--a) 38%, transparent),
        0 10px 22px -8px color-mix(in srgb, var(--a) 70%, transparent);
    transition: box-shadow .24s cubic-bezier(.2,.7,.25,1);
}
/* The navigation rail's glyphs are kept verbatim, so some are stroked and some filled.
   Both render correctly on the gradient because currentColor is white here. */
.mh-app .hlp-card-ic svg { width: 29px; height: 29px; }
.mh-app .hlp-card:hover .hlp-card-ic,
.mh-app .hlp-card:focus-visible .hlp-card-ic {
    box-shadow:
        0 0 0 6px rgba(255,255,255,.70),
        0 0 0 8px color-mix(in srgb, var(--a) 52%, transparent),
        0 14px 28px -8px color-mix(in srgb, var(--a) 70%, transparent);
}

/* The role chip pins to the corner rather than sharing a row with the tile - sharing
   would always push the tile off the true centre line. */
.mh-app .hlp-card-chip {
    position: absolute; top: 14px; right: 14px;
    font-size: 10px; font-weight: 800; letter-spacing: .3px;
    padding: 4px 9px; border-radius: 999px; white-space: nowrap;
    color: #6B4F67; background: rgba(142,110,137,.16);
}

/* The title is the hover affordance: it takes the card's accent and an underline wipes
   in beneath it, left to right. Only `transform` animates - a width or a
   background-position would relayout or band. It sits INSIDE the padding box because
   the title clips its overflow for the ellipsis, so a negative offset would be cut off.
   Note this changes a colour and adds a line; it never swaps the WORDS - two strings
   cross-fading in one box reads as garbled text. */
.mh-app .hlp-card-nm {
    position: relative;
    margin-top: 16px;
    font-family: var(--mh-font-head);
    font-size: 15.5px; font-weight: 800; color: var(--mh-ink);
    text-transform: uppercase; letter-spacing: .06em;
    padding-bottom: 7px; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color .22s ease;
}
.mh-app .hlp-card-nm::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
    background: var(--a);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .34s cubic-bezier(.22,.68,.24,1);
}
.mh-app .hlp-card:hover .hlp-card-nm,
.mh-app .hlp-card:focus-visible .hlp-card-nm { color: var(--a); }
.mh-app .hlp-card:hover .hlp-card-nm::after,
.mh-app .hlp-card:focus-visible .hlp-card-nm::after { transform: scaleX(1); }

/* EXACTLY three rows on every card. The height is FIXED rather than a minimum and the
   text is clamped, so a longer blurb cannot push one card's footer out of step with its
   neighbours'. The clamp protects the layout by hiding overflow - keep blurbs short. */
.mh-app .hlp-card-desc {
    margin: 8px auto 0; max-width: 34ch;
    font-size: 13px; line-height: 1.55; color: var(--mh-muted);
    height: calc(3 * 1.55 * 13px);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* Footer pinned with margin-top:auto (card-grid law), so every card's rule sits on the
   same line however long its blurb runs. */
.mh-app .hlp-card-foot {
    margin-top: auto; width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--mh-line-cool) 75%, transparent);
}
.mh-app .hlp-card-n {
    font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--mh-muted);
}
.mh-app .hlp-card-go {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
    color: var(--a);
}
.mh-app .hlp-card-go svg { width: 14px; height: 14px; transition: transform .22s cubic-bezier(.2,.7,.25,1); }
.mh-app .hlp-card:hover .hlp-card-go svg { transform: translateX(3px); }

/* =========================================================
   HUB - search results (topics, not sections)
   ========================================================= */
.mh-app .hlp-hits { display: flex; flex-direction: column; gap: 10px; }
.mh-app .hlp-hit {
    --a: var(--mh-green); --a2: var(--mh-green-d);
    display: flex; align-items: center; gap: 14px; width: 100%;
    font: inherit; color: inherit; text-align: left; appearance: none; cursor: pointer;
    padding: 13px 16px;
    background: var(--mh-surface);
    border: 1px solid var(--mh-line-cool); border-radius: 14px;
    transition: transform .16s, border-color .16s, box-shadow .16s;
}
.mh-app .hlp-hit:hover,
.mh-app .hlp-hit:focus-visible {
    transform: translateX(3px);
    border-color: var(--a);
    box-shadow: 0 8px 22px -14px rgba(33,50,58,.45);
    outline: none;
}
.mh-app .hlp-hit-ic {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--a), var(--a2));
}
.mh-app .hlp-hit-ic svg { width: 19px; height: 19px; }
.mh-app .hlp-hit-tx { flex: 1; min-width: 0; }
.mh-app .hlp-hit-sec {
    font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--a);
}
.mh-app .hlp-hit-nm {
    margin-top: 2px;
    font-family: var(--mh-font-head); font-size: 14.5px; font-weight: 700; color: var(--mh-ink);
}
.mh-app .hlp-hit-lead {
    margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--mh-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mh-app .hlp-hit-go { flex: none; color: var(--mh-muted); }
.mh-app .hlp-hit-go svg { width: 17px; height: 17px; }
.mh-app .hlp-hit:hover .hlp-hit-go { color: var(--a); }

/* =========================================================
   GUIDE - head
   ========================================================= */
.mh-app .hlp-ghead { margin-bottom: 20px; }
/* The way back is always present: a guide is a child surface and must never be a
   one-way trip (return-to-origin law). Same pill as the Services back button. */
.mh-app .hlp-back {
    display: inline-flex; align-items: center; gap: 4px;
    margin-bottom: 14px; padding: 6px 12px 6px 8px;
    font-size: 12.5px; font-weight: 700; color: var(--mh-green-d);
    background: rgba(78,124,114,.10); border: 1px solid transparent; border-radius: 999px;
    cursor: pointer; transition: background .15s, border-color .15s;
}
.mh-app .hlp-back:hover { background: rgba(78,124,114,.17); border-color: var(--mh-green); }
.mh-app .hlp-back svg { width: 15px; height: 15px; }

.mh-app .hlp-ghead-row { display: flex; align-items: center; gap: 16px; }
.mh-app .hlp-ghead-ic {
    flex: none; width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--a), var(--a2));
    box-shadow:
        0 0 0 4px rgba(255,255,255,.55),
        0 0 0 5.5px color-mix(in srgb, var(--a) 38%, transparent),
        0 10px 22px -10px color-mix(in srgb, var(--a) 70%, transparent);
}
.mh-app .hlp-ghead-ic svg { width: 26px; height: 26px; }
.mh-app .hlp-ghead-tx { min-width: 0; }
.mh-app .hlp-gtitle {
    margin: 0; font-family: var(--mh-font-head);
    font-size: 25px; font-weight: 700; letter-spacing: -.01em; color: var(--mh-ink);
}
.mh-app .hlp-gsub {
    margin: 5px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--mh-muted); max-width: 74ch;
}

/* =========================================================
   GUIDE - body: topic rail + reading pane
   ========================================================= */
/* align-items:stretch (CEO, Aug 9): the topic rail and the reading pane must be the SAME
   HEIGHT - two cards of different heights side by side read as one unfinished. `start`
   sized the rail to its list, so it stopped short of the pane by however many topics the
   guide happened to have. Trailing blank space inside the rail is expected and accepted. */
.mh-app .hlp-gbody {
    display: grid;
    grid-template-columns: var(--mh-side-w, 272px) minmax(0, 1fr);   /* SIDEW30: the app-wide left panel width */
    gap: 22px;
    align-items: stretch;
}
/* NOT sticky any more, and it cannot be: an element stretched to fill its grid row is
   already as tall as the thing it would scroll against, so `position:sticky` would have
   nothing left to stick to. Matching the pane's height was the explicit instruction, so
   the rail scrolls with the page instead. */
.mh-app .hlp-toc {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 10px;
    background: var(--mh-surface);
    border: 1px solid var(--mh-line-cool); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,32,28,.04);
}
.mh-app .hlp-toc-lbl {
    padding: 2px 8px 8px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
    color: var(--mh-muted);
}
/* justify-content:flex-start is LOAD-BEARING, not tidiness. MudBlazor's global `button`
   rule sets `justify-content:center`, and a flex button inherits it - so a topic whose
   title fits on ONE line had its number badge centred while the wrapping ones sat hard
   left. Measured: badges landed at 139 / 139 / 166 / 160 / 139 / 144 / 139px, so the
   column of numbers visibly staggered. text-align:left does NOT fix this - it aligns text
   inside the boxes, not the boxes inside the flex row. */
.mh-app .hlp-toc-i {
    display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; width: 100%;
    padding: 9px 10px; border: none; border-radius: 10px;
    font: inherit; text-align: left; background: transparent; cursor: pointer;
    color: var(--mh-ink);
    transition: background .15s, color .15s;
}
.mh-app .hlp-toc-i:hover { background: color-mix(in srgb, var(--a) 10%, transparent); }
.mh-app .hlp-toc-i.on { background: color-mix(in srgb, var(--a) 14%, transparent); }
.mh-app .hlp-toc-n {
    flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 10.5px; font-weight: 800;
    color: var(--mh-muted); background: color-mix(in srgb, var(--mh-muted) 16%, transparent);
    transition: background .15s, color .15s;
}
.mh-app .hlp-toc-i.on .hlp-toc-n { color: #fff; background: var(--a); }
.mh-app .hlp-toc-t { font-size: 12.8px; font-weight: 600; line-height: 1.4; min-width: 0; }
.mh-app .hlp-toc-i.on .hlp-toc-t { font-weight: 800; color: var(--a); }

/* The reading pane. min-width:0 is load-bearing: without it a long line or a wide
   figure makes this grid child refuse to shrink and the whole page scrolls sideways. */
.mh-app .hlp-pane {
    min-width: 0;
    padding: 26px 30px 22px;
    background: var(--mh-surface);
    border: 1px solid var(--mh-line-cool); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20,32,28,.04), 0 10px 30px rgba(20,32,28,.045);
}
.mh-app .hlp-pane-kick {
    font-size: 9.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
    color: var(--a);
}
.mh-app .hlp-pane-ttl {
    margin: 7px 0 0; font-family: var(--mh-font-head);
    font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--mh-ink);
}
.mh-app .hlp-pane-lead {
    margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; font-weight: 600; color: var(--mh-ink);
    max-width: 74ch;
}
.mh-app .hlp-p {
    margin: 16px 0 0; font-size: 14px; line-height: 1.72; color: #4B5A56; max-width: 74ch;
}

/* =========================================================
   GUIDE - callouts
   ========================================================= */
.mh-app .hlp-note {
    --n: var(--mh-green); --nb: rgba(78,124,114,.09);
    display: flex; gap: 12px; align-items: flex-start;
    margin: 18px 0 0; padding: 14px 16px;
    background: var(--nb);
    border: 1px solid color-mix(in srgb, var(--n) 26%, transparent);
    border-left: 3px solid var(--n);
    border-radius: 12px;
}
.mh-app .hlp-note.is-info { --n: #5E7A83; --nb: rgba(94,122,131,.09); }
.mh-app .hlp-note.is-warn { --n: #9A6B1E; --nb: rgba(216,155,61,.13); }
.mh-app .hlp-note.is-rule { --n: #4E7C72; --nb: rgba(78,124,114,.10); }
.mh-app .hlp-note-ic { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--n); }
.mh-app .hlp-note-ic svg { width: 100%; height: 100%; }
.mh-app .hlp-note-tx { min-width: 0; }
.mh-app .hlp-note-t {
    font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--n);
    text-transform: uppercase;
}
.mh-app .hlp-note-b { margin: 5px 0 0; font-size: 13.5px; line-height: 1.65; color: #4B5A56; }

/* =========================================================
   GUIDE - fact tables
   ========================================================= */
.mh-app .hlp-facts {
    margin: 20px 0 0;
    border: 1px solid var(--mh-line-cool); border-radius: 14px; overflow: hidden;
}
.mh-app .hlp-facts-h {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--a) 8%, transparent);
    border-bottom: 1px solid var(--mh-line-cool);
}
.mh-app .hlp-facts-t {
    font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: var(--a);
}
.mh-app .hlp-facts-s { font-size: 12px; color: var(--mh-muted); }
.mh-app .hlp-facts-l { margin: 0; }
/* A definition list on a two-column grid: the term keeps its own column so every value
   starts on the same line, which is what makes a set of these scannable. It collapses to
   one column on narrow screens rather than squeezing the term to two words a line. */
.mh-app .hlp-fact {
    display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 18px;
    padding: 11px 16px;
    border-top: 1px solid color-mix(in srgb, var(--mh-line-cool) 60%, transparent);
}
.mh-app .hlp-fact:first-child { border-top: none; }
.mh-app .hlp-fact dt {
    font-size: 12.5px; font-weight: 800; color: var(--mh-ink); line-height: 1.5;
    min-width: 0; overflow-wrap: break-word;
}
.mh-app .hlp-fact dd {
    margin: 0; font-size: 13.5px; line-height: 1.6; color: #4B5A56; min-width: 0;
}
@media (max-width: 900px) {
    .mh-app .hlp-fact { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   GUIDE - the walkthrough stepper
   ========================================================= */
.mh-app .hlp-walk {
    margin: 22px 0 0; padding: 18px 18px 14px;
    background: color-mix(in srgb, var(--a) 5%, var(--mh-surface));
    border: 1px solid color-mix(in srgb, var(--a) 24%, transparent);
    border-radius: 16px;
}
.mh-app .hlp-walk-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mh-app .hlp-walk-t {
    font-family: var(--mh-font-head); font-size: 15px; font-weight: 800; color: var(--mh-ink);
}
.mh-app .hlp-walk-s { font-size: 12.5px; color: var(--mh-muted); }

/* The dot rail. Every dot is a real control - any step can be jumped to - so a reader
   who knows what they want does not click Next past the rest of it. The connecting line
   is the rail's own background behind the row, drawn with a pseudo-element so the dots
   sit on top of it. */
.mh-app .hlp-walk-rail {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    margin: 16px 4px 0;
}
.mh-app .hlp-walk-rail::before {
    content: "";
    position: absolute; left: 12px; right: 12px; top: 50%; height: 2px;
    background: color-mix(in srgb, var(--a) 20%, transparent);
    transform: translateY(-50%);
}
.mh-app .hlp-dot {
    position: relative; z-index: 1;
    width: 27px; height: 27px; border-radius: 50%;
    display: grid; place-items: center;
    border: 2px solid color-mix(in srgb, var(--a) 30%, transparent);
    background: var(--mh-surface);
    color: var(--mh-muted);
    font: inherit; cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.mh-app .hlp-dot-n { font-size: 11px; font-weight: 800; }
.mh-app .hlp-dot:hover { transform: scale(1.1); border-color: var(--a); }
.mh-app .hlp-dot.done { background: color-mix(in srgb, var(--a) 22%, var(--mh-surface)); color: var(--a); border-color: color-mix(in srgb, var(--a) 45%, transparent); }
.mh-app .hlp-dot.on { background: var(--a); border-color: var(--a); color: #fff; }
.mh-app .hlp-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 40%, transparent); }

/* EVERY step is stacked in ONE grid cell and all but the current one are hidden, so the
   box is always as tall as the LONGEST step and the Back / Next row below it never moves
   between clicks. A `min-height` was the first attempt and was wrong: it is a guess that
   has to be re-guessed per walkthrough and per window width, and it was measurably 10px
   short here - the Next button shifted under the pointer between steps 2 and 3.

   visibility:hidden, never display:none - a hidden element must still take up its space,
   which is the entire mechanism. It also keeps the inactive steps out of the
   accessibility tree, so a screen reader still gets one step at a time.

   Nothing cross-fades: the steps swap outright, because fading one string out while a
   different one fades in at the same spot reads as garbled text. */
.mh-app .hlp-walk-body { display: grid; margin-top: 16px; }
.mh-app .hlp-walk-slide { grid-area: 1 / 1; visibility: hidden; }
.mh-app .hlp-walk-slide.on { visibility: visible; }
.mh-app .hlp-walk-n {
    font-size: 9.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
    color: var(--a);
}
.mh-app .hlp-walk-st {
    margin: 6px 0 0; font-family: var(--mh-font-head);
    font-size: 15.5px; font-weight: 700; color: var(--mh-ink);
}
.mh-app .hlp-walk-sb { margin: 6px 0 0; font-size: 13.8px; line-height: 1.68; color: #4B5A56; max-width: 70ch; }

.mh-app .hlp-walk-nav {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--a) 18%, transparent);
}
.mh-app .hlp-wbtn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 34px; padding: 0 14px;
    font-size: 12.5px; font-weight: 700;
    color: var(--mh-ink); background: var(--mh-surface);
    border: 1px solid var(--mh-line-cool); border-radius: 999px;
    cursor: pointer; transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.mh-app .hlp-wbtn svg { width: 15px; height: 15px; }
.mh-app .hlp-wbtn:hover:not(:disabled) { border-color: var(--a); color: var(--a); }
.mh-app .hlp-wbtn.is-primary { color: #fff; background: var(--a); border-color: var(--a); }
.mh-app .hlp-wbtn.is-primary:hover:not(:disabled) { background: var(--a2); border-color: var(--a2); color: #fff; }
/* Disabled is VISIBLY disabled rather than hidden: a control that disappears at the ends
   of a walkthrough makes the row jump, and the reader loses the button they were using. */
.mh-app .hlp-wbtn:disabled { opacity: .38; cursor: default; }

/* =========================================================
   GUIDE - figures and the missing-screenshot placeholder
   ========================================================= */
.mh-app .hlp-fig { margin: 22px 0 0; }

/* ONE SIZE FOR EVERY SCREENSHOT (CEO, Aug 9 2026).
   Captures arrive at whatever size and shape the machine that took them happened to be -
   the four sign-in shots came in at roughly 1.5:1, 2:1, 1.74:1 and 1.9:1. With
   `height:auto` each one rendered a different height, so a topic carrying several figures
   read as a ragged column and the guide looked assembled rather than designed. A fixed
   box means every figure occupies exactly the same footprint whatever is dropped in, and
   nobody has to resize anything before saving it.

   The box is also on the PLACEHOLDER, so the page does not jump the moment a real
   screenshot lands - the slot was already the right size. */
.mh-app .hlp-fig-btn {
    display: block; width: 100%; padding: 0; cursor: zoom-in;
    aspect-ratio: 16 / 9;
    background: none; border: 1px solid var(--mh-line-cool); border-radius: 14px;
    overflow: hidden; position: relative;
    transition: border-color .18s, box-shadow .18s;
}
.mh-app .hlp-fig-btn:hover,
.mh-app .hlp-fig-btn:focus-visible {
    border-color: var(--a); outline: none;
    box-shadow: 0 14px 34px -20px rgba(33,50,58,.5);
}
/* object-fit:cover, NOT contain. These captures are a small centred card (or a full app
   screen) on a large field, so filling the box keeps the subject and crops only the empty
   margins; `contain` would letterbox every shot with bands and look worse the more
   uniform the boxes got. Nothing is lost by cropping here - clicking the figure opens the
   lightbox, which shows the FULL uncropped image at up to 80% of the viewport height.
   That is what the zoom is for. */
.mh-app .hlp-fig-btn img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}
.mh-app .hlp-fig-zoom {
    position: absolute; right: 12px; bottom: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; background: rgba(20,32,28,.62);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .18s;
}
.mh-app .hlp-fig-zoom svg { width: 17px; height: 17px; }
.mh-app .hlp-fig-btn:hover .hlp-fig-zoom,
.mh-app .hlp-fig-btn:focus-visible .hlp-fig-zoom { opacity: 1; }

/* The shot has not been taken yet. A dashed slot that NAMES the missing picture, so the
   page states what it is waiting for instead of rendering a broken image - and so
   whoever takes the screenshots has the list in front of them while they read. */
/* Same 16/9 box as a real figure, so the slot is already the right size and the page does
   not reflow the moment a screenshot is saved in. Content centred rather than in a row -
   at this size a left-aligned line would float in a large empty rectangle. */
.mh-app .hlp-fig-todo {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center;
    aspect-ratio: 16 / 9;
    padding: 18px 20px;
    background: color-mix(in srgb, var(--mh-muted) 6%, transparent);
    border: 1.5px dashed color-mix(in srgb, var(--mh-muted) 38%, transparent);
    border-radius: 14px;
}
.mh-app .hlp-fig-todo-ic { flex: none; width: 30px; height: 30px; color: var(--mh-muted); }
.mh-app .hlp-fig-todo-ic svg { width: 100%; height: 100%; }
.mh-app .hlp-fig-todo-tx { min-width: 0; }
.mh-app .hlp-fig-todo-t {
    font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: var(--mh-muted);
}
.mh-app .hlp-fig-todo-b { margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--mh-ink); }
.mh-app .hlp-fig-todo-f {
    display: inline-block; margin-top: 5px;
    font-family: var(--mono, monospace); font-size: 11.5px;
    color: var(--mh-muted);
}
.mh-app .hlp-fig figcaption {
    margin-top: 9px; font-size: 12.5px; line-height: 1.55; color: var(--mh-muted); text-align: center;
}

/* =========================================================
   GUIDE - the pager
   ========================================================= */
.mh-app .hlp-pager {
    display: flex; align-items: stretch; justify-content: space-between; gap: 12px;
    margin-top: 28px; padding-top: 18px;
    border-top: 1px solid var(--mh-line-cool);
}
.mh-app .hlp-pg-sp { flex: 1; }
/* Same MudBlazor `justify-content:center` inheritance as the topic rail. It was masked
   here only because the topic titles happen to be long enough to fill the button; a short
   title would have floated to the middle. Stated explicitly so it cannot come back. */
.mh-app .hlp-pg {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    padding: 11px 14px;
    font: inherit; text-align: left; cursor: pointer;
    background: transparent;
    border: 1px solid var(--mh-line-cool); border-radius: 12px;
    color: var(--mh-ink);
    transition: border-color .16s, background .16s;
}
.mh-app .hlp-pg.is-next { justify-content: flex-end; text-align: right; }
.mh-app .hlp-pg:hover { border-color: var(--a); background: color-mix(in srgb, var(--a) 7%, transparent); }
.mh-app .hlp-pg svg { flex: none; width: 17px; height: 17px; color: var(--a); }
.mh-app .hlp-pg-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mh-app .hlp-pg-tx i {
    font-style: normal;
    font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--mh-muted);
}
.mh-app .hlp-pg-tx b {
    font-size: 13px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
/* Above every modal and wizard in the app (they top out at 100050) but BELOW the
   feedback stack, which the CEO's rule keeps in front of everything. Sized in
   --mh-vh / --mh-vw, never bare vh/vw: the app carries a root zoom and raw viewport
   units ignore it, so a bare 100vh box would overflow the screen at every Display
   Resolution except 100%. */
.mh-app .hlp-lb {
    position: fixed; inset: 0; z-index: 100060;
    display: flex; align-items: center; justify-content: center;
    padding: calc(4 * var(--mh-vh, 1vh)) calc(4 * var(--mh-vw, 1vw));
    background: rgba(14,22,20,.86);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    cursor: zoom-out;
    animation: hlpLbIn .16s ease-out;
}
@keyframes hlpLbIn { from { opacity: 0; } to { opacity: 1; } }
.mh-app .hlp-lb:focus { outline: none; }
.mh-app .hlp-lb-x {
    position: absolute; top: 18px; right: 20px;
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    color: #fff; background: rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1)));
    border: 1px solid rgba(255,255,255,.24);border-right-color:var(--tg-edge-r,rgba(255,255,255,.24));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.24));
    transition: background .15s, transform .15s;
}
.mh-app .hlp-lb-x:hover { background: rgba(var(--tg-rgb,255,255,255),calc(.26*var(--tg-k,1))); transform: scale(1.06); }
.mh-app .hlp-lb-x svg { width: 18px; height: 18px; }
.mh-app .hlp-lb-fig {
    margin: 0; max-width: 100%; cursor: default;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.mh-app .hlp-lb-fig img {
    display: block; max-width: 100%;
    max-height: calc(80 * var(--mh-vh, 1vh));
    width: auto; height: auto;
    border-radius: 12px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
}
.mh-app .hlp-lb-fig figcaption {
    font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.82); text-align: center; max-width: 70ch;
}

/* =========================================================
   DARK
   ========================================================= */
/* The glass pane DARKENS instead of brightening, and the lit edge drops to a whisper:
   a .60 white hairline that reads as "lit" on the cool #E8EBF0 canvas reads as a
   scratch on the dark one. */
body.dark .mh-app .hlp-card {
    background:
        linear-gradient(155deg, rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 0%, rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1))) 34%, transparent 62%),
        color-mix(in srgb, var(--mh-surface) 62%, transparent);
    border-color: rgba(255,255,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px -22px rgba(0,0,0,.55);
}
body.dark .mh-app .hlp-card:hover,
body.dark .mh-app .hlp-card:focus-visible {
    background:
        linear-gradient(155deg, rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1))) 0%, rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1))) 34%, transparent 62%),
        color-mix(in srgb, var(--mh-surface) 78%, transparent);
    border-color: color-mix(in srgb, var(--a) 60%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 30px 60px -24px rgba(0,0,0,.66);
}
/* The halo's inner ring is a WHITE gap on light; on dark it has to be a dark gap. */
body.dark .mh-app .hlp-card-ic,
body.dark .mh-app .hlp-ghead-ic {
    box-shadow:
        0 0 0 5px rgba(255,255,255,.08),
        0 0 0 6.5px color-mix(in srgb, var(--a) 46%, transparent),
        0 10px 22px -8px rgba(0,0,0,.5);
}
body.dark .mh-app .hlp-card:hover .hlp-card-ic,
body.dark .mh-app .hlp-card:focus-visible .hlp-card-ic {
    box-shadow:
        0 0 0 6px rgba(255,255,255,.12),
        0 0 0 8px color-mix(in srgb, var(--a) 62%, transparent),
        0 14px 28px -8px rgba(0,0,0,.55);
}
body.dark .mh-app .hlp-card-nm,
body.dark .mh-app .hlp-gtitle,
body.dark .mh-app .hlp-pane-ttl,
body.dark .mh-app .hlp-walk-t,
body.dark .mh-app .hlp-walk-st,
body.dark .mh-app .hlp-hit-nm,
body.dark .mh-app .hlp-fact dt,
body.dark .mh-app .hlp-fig-todo-b { color: #eef2f1; }
body.dark .mh-app .hlp-pane-lead { color: #d5ded9; }
body.dark .mh-app .hlp-p,
body.dark .mh-app .hlp-note-b,
body.dark .mh-app .hlp-fact dd,
body.dark .mh-app .hlp-walk-sb { color: #a7b5b1; }
body.dark .mh-app .hlp-card-chip { color: #D6BCD2; background: rgba(142,110,137,.26); }
body.dark .mh-app .hlp-toc,
body.dark .mh-app .hlp-pane,
body.dark .mh-app .hlp-hit { background: #1d2421; border-color: #2e3a37; box-shadow: none; }
body.dark .mh-app .hlp-toc-i { color: #d5ded9; }
body.dark .mh-app .hlp-facts,
body.dark .mh-app .hlp-pager,
body.dark .mh-app .hlp-fig-btn,
body.dark .mh-app .hlp-pg,
body.dark .mh-app .hlp-wbtn { border-color: #2e3a37; }
body.dark .mh-app .hlp-fact { border-top-color: #262f2c; }
body.dark .mh-app .hlp-wbtn { background: #222a27; color: #d5ded9; }
body.dark .mh-app .hlp-wbtn.is-primary { color: #fff; background: var(--a); border-color: var(--a); }
body.dark .mh-app .hlp-dot { background: #222a27; }
body.dark .mh-app .hlp-dot.on { color: #fff; }
body.dark .mh-app .hlp-walk { background: color-mix(in srgb, var(--a) 12%, #1d2421); }
/* The warning callout's ink is a dark ochre chosen for a white pane; on the dark pane it
   goes muddy, so it lifts to the app's light-ochre instead. */
body.dark .mh-app .hlp-note.is-warn { --n: #E8BE7A; --nb: rgba(216,155,61,.16); }
body.dark .mh-app .hlp-note.is-info { --n: #93AEB6; --nb: rgba(94,122,131,.16); }
body.dark .mh-app .hlp-note.is-rule { --n: #8FBDB2; --nb: rgba(78,124,114,.16); }
body.dark .mh-app .hlp-back { color: color-mix(in srgb, var(--mh-green) 60%, #fff); background: color-mix(in srgb, var(--mh-green) 20%, transparent); }
body.dark .mh-app .hlp-fig-todo { background: rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1))); border-color: #3a4744; }

/* =========================================================
   NARROW
   ========================================================= */
@media (max-width: 980px) {
    /* The rail stacks above the pane: 258px of rail beside a squeezed pane is worse than
       no rail at all on a small screen. Stacked, equal heights are meaningless - they are
       no longer side by side - so the rail sizes to its list again. */
    .mh-app .hlp-gbody { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .mh-app .hlp-pane { padding: 22px 18px 18px; }
    .mh-app .hlp-hubbar { flex-wrap: wrap; }
    .mh-app .hlp-srch { max-width: none; }
}
@media (max-width: 620px) {
    /* Stacked, the two pager buttons are two full-width rows rather than two half-width
       ones with truncated titles. */
    .mh-app .hlp-pager { flex-direction: column; }
    .mh-app .hlp-pg.is-next { justify-content: flex-start; text-align: left; }
    .mh-app .hlp-pg-sp { display: none; }
}

/* =============================================================================
   GUIDE01 (2 Oct 2026) - LIVE TOURS IN THE HELP CENTER.
   "Take a Tour" (a topic) and "Take the Full Tour" (a section) wear the FOOTBTN18 primary - the
   Client record footer's mint gradient - sized to their words (no fixed width; the owner: "the
   buttons are bigger than their text"). The topic call-to-action is a quiet glass strip under
   the lead, so reading stays the first thing and the tour is the offer beside it.
   ============================================================================= */
.mh-app .mh-helppage{
  --fb-grad:radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
            linear-gradient(162deg, #42856E 0%, #2F6B57 60%, #2A5749 100%);
  --fb-glow:0 4px 12px -2px rgba(47,107,87,.42);
  --fb-glow-hi:0 8px 20px -4px rgba(47,107,87,.5);
  --fb-glass:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));
  --fb-glass-hi:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  --fb-rim:rgba(255,255,255,.72);
  --fb-rim-hi:rgba(255,255,255,.85);
  --fb-float:0 3px 8px -5px rgba(30,55,48,.14), 0 16px 34px -18px rgba(30,55,48,.26);
  --fb-lift:0 3px 7px -4px rgba(30,55,48,.18), 0 10px 20px -10px rgba(30,55,48,.26);
  --fb-ink:#375A50;
  --fb-ink-hi:#1C2733;
}
body.dark .mh-app .mh-helppage{
  --fb-grad:radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.14), rgba(255,255,255,0) 42%),
            linear-gradient(162deg, #3E7A66 0%, #2E5F4E 60%, #274F42 100%);
  --fb-glow:0 4px 12px -2px rgba(0,0,0,.5);
  --fb-glow-hi:0 8px 20px -4px rgba(0,0,0,.6);
  --fb-glass:rgba(255,255,255,.05);
  --fb-glass-hi:rgba(255,255,255,.12);
  --fb-rim:rgba(180,210,235,.14);
  --fb-rim-hi:rgba(180,210,235,.16);
  --fb-float:0 3px 8px -5px rgba(0,0,0,.45), 0 16px 34px -18px rgba(0,0,0,.6);
  --fb-lift:0 3px 7px -4px rgba(0,0,0,.5), 0 10px 20px -10px rgba(0,0,0,.6);
  --fb-ink:#8FBBA5;
  --fb-ink-hi:#EAF0F4;
}
.mh-app .hlp-tourbtn{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 18px;border-radius:12px;white-space:nowrap;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;color:#fff;
  background:var(--fb-grad);border:1px solid transparent;box-shadow:var(--fb-glow);
  transition:transform .16s ease, box-shadow .16s ease;
}
.mh-app .hlp-tourbtn svg{width:17px;height:17px;flex:none}
.mh-app .hlp-tourbtn:hover{transform:translateY(-2px);box-shadow:var(--fb-glow-hi)}
.mh-app .hlp-tourbtn:active{transform:none}
.mh-app .hlp-tourbtn:focus-visible{outline:2px solid #2F6B57;outline-offset:3px}
.mh-app .hlp-ghead-row .hlp-tourbtn.is-full{margin-left:auto;height:46px;padding:0 20px}

.mh-app .hlp-tourcta{
  display:flex;align-items:center;gap:14px;margin:16px 0 4px;padding:12px 14px 12px 12px;border-radius:16px;
  background:var(--fb-glass);border:1px solid var(--fb-rim);box-shadow:var(--fb-float);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
}
.mh-app .hlp-tourcta-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:var(--fb-grad);box-shadow:var(--fb-glow)}
.mh-app .hlp-tourcta-ic svg{width:20px;height:20px}
.mh-app .hlp-tourcta-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mh-app .hlp-tourcta-tx b{font-size:14px;font-weight:800;color:var(--fb-ink-hi)}
.mh-app .hlp-tourcta-tx span{font-size:12.8px;line-height:1.5;color:var(--mh-muted)}

.mh-app .hlp-card-tour{
  position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:5px;
  height:24px;padding:0 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#2F6B57;background:rgba(47,107,87,.10);box-shadow:inset 0 0 0 1px rgba(47,107,87,.22);
}
.mh-app .hlp-card-tour svg{width:13px;height:13px}
body.dark .mh-app .hlp-card-tour{color:#8FBBA5;background:rgba(143,187,165,.10);box-shadow:inset 0 0 0 1px rgba(143,187,165,.24)}
@media (max-width: 720px){
  .mh-app .hlp-tourcta{flex-wrap:wrap}
  .mh-app .hlp-ghead-row{flex-wrap:wrap}
  .mh-app .hlp-ghead-row .hlp-tourbtn.is-full{margin-left:0}
}
/* the wizard's "Tour preview" note (NewClientWizard, while a tour walks it) */
.wz-guide{display:inline-flex;align-items:center;height:30px;padding:0 12px;margin-right:10px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.02em;color:#2F6B57;background:rgba(47,107,87,.10);
  box-shadow:inset 0 0 0 1px rgba(47,107,87,.22);white-space:nowrap}

/* =============================================================================
   GUIDE01b (2 Oct 2026) - THE HELP CENTER ON THE NEW STANDARD.
   Owner: "don't forget to land our New Standards interface there too and make it beautiful and watch
   for the buttons they are bigger then it's text fix that too".
     - the page is a Mint host (#view-help.mint-host): its fact tables are the Client record's Mint
       cards and read tiles, by WIDENING the read-only #view-settings Mint rules in detail-view.css /
       client-detail-view.css to #view-help - never copied;
     - "In This Guide" wears the views-panel water glass (FILTERWX18 / PERFWX18, widened in mh-canvas.css);
     - the reading pane is the same water glass, so rail and pane read as one surface;
     - every button is the FOOTBTN18 pair, sized to its words: Back to the Help Center, the
       walkthroughs' Back / Next, and the topic pager (which used to stretch half the pane for a
       one-line title - the "bigger than its text" he pointed at).
   ============================================================================= */

/* ---- the reading pane: water glass (light); dark keeps its own solid below ---- */
body:not(.dark) .mh-app .hlp-pane{
  background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.06);backdrop-filter:blur(22px) saturate(185%) brightness(1.06);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(30,55,48,.06),0 14px 32px -18px rgba(30,55,48,.40);
}
.mh-app .hlp-toc{padding:14px 10px;border-radius:16px}
.mh-app .hlp-toc-i{padding:9px 10px;border-radius:12px}

/* ---- Mint cards inside the pane ---- */
#view-help .hlp-pane .pd-card.mint{margin-top:20px}
#view-help .hlp-msub{margin:-4px 4px 12px;font-size:12.8px;line-height:1.55;color:var(--mh-muted)}
#view-help .hlp-mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
#view-help .hlp-mgrid .hlp-wide{grid-column:1 / -1}
@media (max-width: 900px){ #view-help .hlp-mgrid{grid-template-columns:minmax(0,1fr)} }
/* a Help value is a sentence: it wraps, it is never cut off with an ellipsis */
#view-help .mint-w.prose .mint-vl{white-space:normal;overflow:visible;text-overflow:clip;
  font-size:13.8px;font-weight:500;line-height:1.62;color:#3E4D48}
#view-help .mint-w.prose .mint-lb{line-height:1.45}
body.dark #view-help .mint-w.prose .mint-vl{color:#B9C8C3}
/* the walkthrough card keeps its stepper inside the Mint card */
#view-help .hlp-walk .hlp-walk-rail{margin:10px 6px 0}
#view-help .hlp-walk .hlp-walk-body{margin-top:14px;padding:0 6px}
#view-help .hlp-walk .hlp-walk-nav{border-top-color:rgba(47,107,87,.14)}

/* ---- callouts: glass with the kind's colour on the left edge ---- */
body:not(.dark) .mh-app .hlp-note{
  background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.34*var(--tg-k,1))) 100%), var(--nb);
  border:1px solid rgba(255,255,255,.8);border-left:3px solid var(--n);border-radius:14px;
  box-shadow:0 6px 16px -12px rgba(30,55,48,.30), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---- buttons: FOOTBTN18, sized to their words ---- */
.mh-app .hlp-back{
  height:40px;padding:0 16px 0 12px;gap:6px;margin-bottom:16px;border-radius:12px;
  font-size:13.5px;font-weight:700;color:var(--fb-ink);
  background:var(--fb-glass);border:1px solid var(--fb-rim);box-shadow:var(--fb-float);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.mh-app .hlp-back:hover{background:var(--fb-glass-hi);color:var(--fb-ink-hi);border-color:var(--fb-rim);transform:translateY(-2px);
  box-shadow:var(--fb-lift), inset 0 0 0 1px var(--fb-rim-hi)}
.mh-app .hlp-back svg{width:17px;height:17px}

.mh-app .hlp-wbtn{
  height:40px;padding:0 16px;gap:7px;border-radius:12px;font-size:13.5px;font-weight:700;
  color:var(--fb-ink);background:var(--fb-glass);border:1px solid var(--fb-rim);box-shadow:var(--fb-float);
  transition:transform .16s ease, background .16s ease, color .16s ease, opacity .16s ease;
}
.mh-app .hlp-wbtn:hover:not(:disabled){background:var(--fb-glass-hi);color:var(--fb-ink-hi);border-color:var(--fb-rim);transform:translateY(-2px)}
.mh-app .hlp-wbtn.is-primary{color:#fff;background:var(--fb-grad);border-color:transparent;box-shadow:var(--fb-glow)}
.mh-app .hlp-wbtn.is-primary:hover:not(:disabled){color:#fff;background:var(--fb-grad);border-color:transparent;box-shadow:var(--fb-glow-hi)}
.mh-app .hlp-wbtn svg{width:17px;height:17px}

/* the pager: two buttons the size of what they say, Previous on the left, Next on the right */
.mh-app .hlp-pager{align-items:center}
.mh-app .hlp-pg{
  flex:0 1 auto;max-width:48%;min-height:52px;padding:8px 16px;gap:10px;border-radius:12px;
  color:var(--fb-ink);background:var(--fb-glass);border:1px solid var(--fb-rim);box-shadow:var(--fb-float);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.mh-app .hlp-pg:hover{background:var(--fb-glass-hi);color:var(--fb-ink-hi);border-color:var(--fb-rim);transform:translateY(-2px);
  box-shadow:var(--fb-lift), inset 0 0 0 1px var(--fb-rim-hi)}
.mh-app .hlp-pg svg{color:currentColor}
.mh-app .hlp-pg.is-next{margin-left:auto;color:#fff;background:var(--fb-grad);border-color:transparent;box-shadow:var(--fb-glow)}
.mh-app .hlp-pg.is-next:hover{color:#fff;background:var(--fb-grad);box-shadow:var(--fb-glow-hi)}
.mh-app .hlp-pg.is-next .hlp-pg-tx i{color:rgba(255,255,255,.78)}
.mh-app .hlp-pg-sp{flex:1}
@media (max-width: 620px){ .mh-app .hlp-pg{max-width:none} .mh-app .hlp-pg.is-next{margin-left:0} }
body.dark .mh-app .hlp-pg{background:var(--fb-glass);border-color:var(--fb-rim)}
body.dark .mh-app .hlp-pg.is-next{background:var(--fb-grad);border-color:transparent}
body.dark .mh-app .hlp-wbtn{background:var(--fb-glass);color:var(--fb-ink);border-color:var(--fb-rim)}
body.dark .mh-app .hlp-wbtn.is-primary{background:var(--fb-grad);color:#fff;border-color:transparent}
body.dark .mh-app .hlp-back{color:var(--fb-ink);background:var(--fb-glass)}

/* =============================================================================
   WHATSNEW01 (2 Oct 2026) - WHAT'S NEW, under the hub's search bar, above the guides.
   Owner: "open whats new below the search bar and move the topics down ... take a tour ... with our new
   standards interface". It is the Client record's Mint card (pd-card mint, read tiles .mint-w.prose) with the
   FOOTBTN18 buttons sized to their words; the release data is Components/Pages/WhatsNew.cs.
   ============================================================================= */
#view-help .hlp-wn{margin:18px 0 24px}
#view-help .hlp-wn-head{display:flex;align-items:center;gap:14px}
#view-help .hlp-wn-ic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:var(--fb-grad);box-shadow:var(--fb-glow)}
#view-help .hlp-wn-ic svg{width:24px;height:24px}
#view-help .hlp-wn-tx{flex:1;min-width:0}
#view-help .hlp-wn-eye{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2F6B57}
#view-help .hlp-wn-ttl{margin:2px 0 0;font-size:19px;font-weight:800;line-height:1.25;color:var(--fb-ink-hi,#1C2733)}
#view-help .hlp-wn-date{margin-left:8px;font-size:12.5px;font-weight:600;color:var(--mh-muted)}
#view-help .hlp-wn-sum{margin:4px 0 0;font-size:13.4px;line-height:1.55;color:var(--mh-muted);max-width:820px}
#view-help .hlp-wn-acts{flex:none;margin-left:auto;display:flex;align-items:center;gap:10px}
#view-help .hlp-wn-tog{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;
  color:var(--fb-ink);background:var(--fb-glass);border:1px solid var(--fb-rim);box-shadow:var(--fb-lift);
  transition:background .15s ease,color .15s ease,transform .16s ease}
#view-help .hlp-wn-tog:hover{background:var(--fb-glass-hi);color:var(--fb-ink-hi);transform:translateY(-2px)}
#view-help .hlp-wn-tog svg{width:18px;height:18px;transition:transform .2s ease;transform:rotate(-90deg)}
#view-help .hlp-wn.is-open .hlp-wn-tog svg{transform:none}
#view-help .hlp-wn-tog:focus-visible{outline:2px solid #2F6B57;outline-offset:3px}
#view-help .hlp-wn .hlp-wn-grid{margin-top:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
#view-help .hlp-wn-item{display:flex;flex-direction:column;gap:4px}
#view-help .hlp-wn-item .mint-lb{display:flex;align-items:center;gap:8px}
#view-help .hlp-wn-kind{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;
  font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
#view-help .hlp-wn-kind.is-new{color:#2F6B57;background:rgba(47,107,87,.10);box-shadow:inset 0 0 0 1px rgba(47,107,87,.22)}
#view-help .hlp-wn-kind.is-imp{color:#8A5A1E;background:rgba(216,155,61,.12);box-shadow:inset 0 0 0 1px rgba(216,155,61,.30)}
#view-help .hlp-wn-it{font-size:14.6px;font-weight:800;line-height:1.35;color:#1F3B33}
#view-help .hlp-wn-item .mint-vl{flex:1}
#view-help .hlp-wn-go{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px;border-radius:10px;white-space:nowrap;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;color:var(--fb-ink);background:var(--fb-glass);border:1px solid var(--fb-rim);
  box-shadow:var(--fb-lift);transition:transform .16s ease,background .15s ease,color .15s ease}
#view-help .hlp-wn-go svg{width:15px;height:15px}
#view-help .hlp-wn-go:hover{background:var(--fb-glass-hi);color:var(--fb-ink-hi);transform:translateY(-2px)}
#view-help .hlp-wn-go:focus-visible{outline:2px solid #2F6B57;outline-offset:3px}
body.dark #view-help .hlp-wn-eye{color:#8FBBA5}
body.dark #view-help .hlp-wn-it{color:#EAF1EE}
body.dark #view-help .hlp-wn-kind.is-new{color:#8FBBA5;background:rgba(143,187,165,.10);box-shadow:inset 0 0 0 1px rgba(143,187,165,.24)}
body.dark #view-help .hlp-wn-kind.is-imp{color:#E2B877;background:rgba(216,155,61,.12)}
@media (max-width: 1180px){ #view-help .hlp-wn .hlp-wn-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 720px){
  #view-help .hlp-wn .hlp-wn-grid{grid-template-columns:minmax(0,1fr)}
  #view-help .hlp-wn-head{flex-wrap:wrap}
  #view-help .hlp-wn-acts{margin-left:0;width:100%}
}

/* the account menu's "Database Ver" line (WHATSNEW01) */
.mh-app .tb-menu .tbm-ver{display:flex;align-items:center;gap:10px}
.mh-app .tb-menu .tbm-ver .tbm-ver-v{font-weight:800}
.mh-app .tb-menu .tbm-ver .tbm-ver-new{margin-left:auto;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#2F6B57;
  background:rgba(47,107,87,.10);box-shadow:inset 0 0 0 1px rgba(47,107,87,.22)}
.mh-app .tb-menu .tbm-ver.is-static{cursor:default;color:var(--mh-muted);font-size:12.5px}
.mh-app .tb-menu .tbm-ver.is-static:hover{background:transparent;box-shadow:none;transform:none}
body.dark .mh-app .tb-menu .tbm-ver .tbm-ver-new{color:#8FBBA5;background:rgba(143,187,165,.10);box-shadow:inset 0 0 0 1px rgba(143,187,165,.24)}
#view-help .hlp-wn-more{display:flex;justify-content:center;margin-top:14px}
#view-help .hlp-wn-more .hlp-wn-go{margin-top:0}
/* one line, like every other menu row */
.mh-app .tb-menu .tbm-ver > span:first-of-type{white-space:nowrap}
.mh-app .tb-menu .tbm-ver{gap:8px}
.mh-app .tb-menu .tbm-ver .tbm-ver-new{padding:0 6px;font-size:9px;letter-spacing:.03em;white-space:nowrap;flex:none}

/* =============================================================================
   ASSIST15 (3 Oct 2026, note 66) - "TRY IT": example questions that ask the Assistant for real. A quiet card in the guide, each
   question a pill with an arrow; a click opens the Assistant on it. Same pine + glass language as the rest of the Help Center.
   ============================================================================= */
.mh-app .hlp-try { margin: 18px 0; padding: 14px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--mh-green, #4E7C72) 7%, var(--mh-surface, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mh-green, #4E7C72) 22%, transparent); }
.mh-app .hlp-try-h { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.mh-app .hlp-try-h b { display: block; font-size: 13.5px; font-weight: 800; color: var(--mh-ink); }
.mh-app .hlp-try-h span:not(.hlp-try-ic) { display: block; font-size: 12.5px; color: var(--mh-muted); margin-top: 2px; }
.mh-app .hlp-try-ic { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: var(--mh-green-d, #2E5A51); background: color-mix(in srgb, var(--mh-green, #4E7C72) 14%, transparent); }
.mh-app .hlp-try-ic svg { width: 16px; height: 16px; }
.mh-app .hlp-try-qs { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-app .hlp-try-q { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--mh-green-d, #2E5A51); padding: 7px 12px 7px 14px; border-radius: 999px;
  background: var(--mh-surface, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mh-green, #4E7C72) 30%, transparent), 0 2px 6px rgba(20, 34, 30, .06);
  transition: background .15s ease, color .15s ease, transform .15s ease; }
.mh-app .hlp-try-q svg { width: 13px; height: 13px; flex: none; }
.mh-app .hlp-try-q:hover, .mh-app .hlp-try-q:focus-visible { background: var(--mh-green, #4E7C72); color: #fff; transform: translateY(-1px); outline: none; }
.mh-app .hlp-try-off { margin: 0; font-size: 12.5px; color: var(--mh-muted); }
body.dark .mh-app .hlp-try { background: rgba(159, 199, 186, .07); box-shadow: inset 0 0 0 1px rgba(159, 199, 186, .22); }
body.dark .mh-app .hlp-try-ic { color: #9FD8BE; background: rgba(159, 199, 186, .14); }
body.dark .mh-app .hlp-try-q { color: #A8DCC6; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(159, 199, 186, .32); }
body.dark .mh-app .hlp-try-q:hover, body.dark .mh-app .hlp-try-q:focus-visible { background: #9FC7BA; color: #12201C; }