/* =============================================================================
   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(255,255,255,.55) 0%, rgba(255,255,255,.12) 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-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(255,255,255,.68) 0%, rgba(255,255,255,.18) 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: 258px minmax(0, 1fr);
    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(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    transition: background .15s, transform .15s;
}
.mh-app .hlp-lb-x:hover { background: rgba(255,255,255,.26); 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(255,255,255,.10) 0%, rgba(255,255,255,.03) 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(255,255,255,.14) 0%, rgba(255,255,255,.05) 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(255,255,255,.03); 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; }
}