/* =================================================================================================
   HELP PANEL (OPP-029, H2): the floating Help bubble (lower right), the right-hand Help panel (help for this page, search, topics, the
   article read inside the panel), the reserved Ask tab, CBS notes with their editor, and "Was this helpful?" / "Suggest a change".
   Markup: Controls/ucHelpPanel.ascx (button and panel skeleton), Controls/ucHelpLink.ascx (the small inline "?"). Behaviour:
   JavaScript/help-panel.js. Data: Help/HelpApi.ashx. Mock-ups: docs/design/help-h2/.
   Own file on purpose (no shared stylesheet is edited). On a small screen the panel is the whole screen, so it needs no scrim of its own;
   it still registers with MT.Overlays as 'help' (one overlay at a time, page scroll lock, UI_STANDARDS 4.8). Every class starts with
   hp- or help-. Tokens only (UI_STANDARDS 1 and 1.6): no hex, no rgb, so dark mode follows. Small first: 360px up, then wider.
   The article text styles are restated here under .hp-article (the help.css recipe scaled for a 440px column) so help.css, whose print rules
   hide the shared .section-index, never has to load on every page.
   ================================================================================================= */

:root {
    --hp-width: 440px;
}

/* ---------------------------------------------------------------------------------------------
   The Help bubble (developer's design, 2026-10-23, round two the same day; it replaced the "?" in the header chip, which was crowded and hidden under 360 wide).
   A round "?" floating on the LEFT, a small "Top" arrow at the lower RIGHT that shows once the page is scrolled, and a small close control. position: fixed in
   the body (help-panel.js moves both there). Round one put the bubble at the lower right, where it landed on the page's own controls (CBS Invoices: the grid's
   pinned totals and pager lifted it into the grid). Round two puts it where nothing of the page is:
     - wide (1101 and up) with the left navigation: centred in the nav column, at the bottom, just above the footer. --layout-leftnav-col is the column the nav
       really occupies (240px open, 56px collapsed icon rail, set by the body classes show-lnav / close-lnav), so the bubble follows the nav open and shut with
       no script and no measuring; --hb-size drops to 44px on the 56px rail.
     - 641 to 1100 with the nav: centred on the floating icon rail (about 49px wide, --hb-rail-w), at the bottom of the viewport.
     - phone (640 and under) and every page with no nav (signed out, full width pages, ln-disabled): the bottom-left corner of the window. On a phone the open nav
       drawer also gets a "Help" entry at its bottom (.hb-drawer-item, added by the script). Phone choice (one class on <html>, set from the setting MT.Help.Phone,
       which can be changed in Web.config without a build): html.hb-ph-both (default, the bubble and the drawer entry), html.hb-ph-bubble (bubble only),
       html.hb-ph-drawer (drawer entry only).
   The script sets --hb-lift on each (up, above a sticky footer, action bar or a pinned grid row it would cover) and --hb-shift on Top (left, off a docked right rail),
   adds .is-on when the bubble is wanted and .is-away while something else owns the screen (the panel, a dialog, an overlay, the soft keyboard). When the bubble is
   on, html.hb-on tells the nav to leave room at the bottom of its list so the bubble never covers a nav entry. Colours are tokens only, so dark mode follows. Feel
   borrowed from the GrowingMoss site (round 48px buttons, soft shadow, a 2px lift on hover, fade in on scroll), not its code or brand.
   --------------------------------------------------------------------------------------------- */
.help-wrap { display: contents; }

:root {
    --hb-size: 40px;                    /* the bubble: 40px (developer's call, 2026-10-25), under the 44px touch minimum on purpose; same on the narrow rail */
    --hb-top-size: 40px;
    --hb-edge: 16px;                    /* the gap to the window edge: 16 on a phone, 24 wider (the GrowingMoss gap) */
    --hb-rail-w: 49px;                  /* the floating icon rail at 641 to 1100 (layout.css, TL-148); help-bubble.test.js measures the real rail and fails if this drifts */
}
@media (min-width: 641px) {
    :root { --hb-edge: 24px; }
    /* the 56px collapsed rail and the 49px floating rail are too narrow for 48 plus room to breathe: the bubble is the 44px touch size there */
    body.ln-enabled.close-lnav { --hb-size: 40px; }
}

.hb-dock {
    position: fixed;
    left: calc(var(--hb-edge) + env(safe-area-inset-left, 0px));
    bottom: calc(var(--hb-edge) + var(--hb-lift, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 950;                       /* over the page and the footer (900), under the app bar (1000), the right rail and its scrim (1090 to 1100), the panel, the drawer and dialogs */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    /* fading out keeps the element until the fade ends (visibility waits .18s); fading in is focusable at once (visibility 0s), so focus can go back to the
       bubble in the same instant it comes back (the panel closes and puts focus on it). left follows the nav as it opens and closes (the nav's own duration). */
    transition: opacity .18s ease, visibility 0s linear .18s, left var(--rails-collapse-expand-time, 450ms) ease, bottom .2s ease;
}
.hb-dock.is-on { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .18s ease, visibility 0s linear 0s, left var(--rails-collapse-expand-time, 450ms) ease, bottom .2s ease; }
.hb-dock.is-away { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s, left var(--rails-collapse-expand-time, 450ms) ease, bottom .2s ease; }
.hb-dock.is-gone { display: none; }

/* with the nav on the page the bubble sits in the nav's column: the middle of the nav, whatever its width right now */
@media (min-width: 1101px) {
    body.ln-enabled .hb-dock { left: calc(var(--shell-gutter, 16px) + (var(--layout-leftnav-col) - var(--hb-size)) / 2); }
}
@media (min-width: 641px) and (max-width: 1100px) {
    body.ln-enabled .hb-dock { left: calc((var(--hb-rail-w) - var(--hb-size)) / 2); }
}
/* and the bottom of the nav list leaves room for it, so the bubble never sits on a nav entry (the list scrolls above it) */
@media (min-width: 641px) {
    html.hb-on body.ln-enabled .left-rail { padding-bottom: calc(var(--hb-size) + 32px); }
}

.hb-main { position: relative; width: var(--hb-size); height: var(--hb-size); }
/* a hover bridge over the gap to the close control, so the control does not vanish while the mouse travels to it */
.hb-main::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

.hb-btn {
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-3);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    transition: transform .15s ease, background-color .15s ease;     /* no visibility here: a button INHERITS the dock's visibility, and a delayed transition on the child would keep it unfocusable after the dock is back */
}
.hb-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* they are .icon-btn (UI_STANDARDS 3), whose touch rule (components.css) adds a 44px ::after hit area: not wanted here, the three targets are already 44px or more and must not overlap */
.hb-btn::after, .hb-close::after { content: none; }

.hb-help {
    width: var(--hb-size);
    height: var(--hb-size);
    background: var(--brand-primary);
    color: var(--brand-on-primary);
}
.hb-help .icon { width: 26px; height: 26px; display: block; }
.hb-help:hover:not(:where(:disabled, [disabled], [aria-disabled="true"])) { background: color-mix(in srgb, var(--brand-primary) 86%, var(--ink)); color: var(--brand-on-primary); transform: translateY(-2px); }
.hb-help[aria-expanded="true"] { background: color-mix(in srgb, var(--brand-primary) 80%, var(--ink)); }

/* Top: its own fixed button at the lower RIGHT (it does not stack with Help any more), only while the page is scrolled (the script adds .is-shown); a neutral
   disc, so the one coloured thing is Help. The script sets --hb-lift (above a pinned bar) and --hb-shift (left of a docked right rail) on it. */
.hb-top {
    position: fixed;
    right: calc(var(--hb-edge) + 2px + var(--hb-shift, 0px) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--hb-edge) + var(--hb-lift, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 950;
    width: var(--hb-top-size);
    height: var(--hb-top-size);
    /* slightly see-through (developer's call, 2026-10-25): 80% of the surface with a soft blur, so whatever sits behind adds at most a fifth of the colour and the --ink
       arrow keeps well over 3:1 (WCAG 1.4.11) against any of it; the border and shadow keep the edge. Fully solid on hover, focus and press. Help stays opaque. */
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-3);
    color: var(--ink);
    border: 1px solid var(--border-strong);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: transform .15s ease, background-color .15s ease, opacity .18s ease, visibility 0s linear .18s, right .2s ease, bottom .2s ease;
}
.hb-top.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: transform .15s ease, background-color .15s ease, opacity .18s ease, visibility 0s linear 0s, right .2s ease, bottom .2s ease; }
.hb-top .icon { width: 22px; height: 22px; display: block; }
.hb-top.is-shown:hover, .hb-top.is-shown:focus-visible, .hb-top.is-shown:active { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); }
.hb-top.is-shown:hover { background: var(--menu-hover-bg); transform: translateY(-2px); }

/* Close: a small control above the bubble, wholly outside it so no two tap targets overlap. It shows for a mouse or pen over the bubble or the control
   (help-panel.js adds .hb-hover to the dock by pointer type: a (hover: hover) query is false on a touch-capable Windows PC with a mouse, HLP-04) and for the
   keyboard while either button has keyboard focus (Tab from the "?" lands on it next). On a touch screen it stays out of the way: a long press on the bubble
   hides it (and the account menu's switch brings it back). */
.hb-close {
    position: absolute;
    top: -32px;
    left: 50%;
    margin-left: -12px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--shadow-3);
    transition: opacity .15s ease;
}
.hb-close .icon { width: 12px; height: 12px; display: block; }
.hb-close:focus-visible { opacity: 1; pointer-events: auto; outline: 3px solid var(--ink); outline-offset: 2px; }
.hb-close:hover:not(:where(:disabled, [disabled], [aria-disabled="true"])) { background: var(--menu-hover-bg); color: var(--ink); transform: none; }   /* beats .icon-btn:hover (theme.css) */
.hb-dock.hb-hover .hb-close, .hb-main:has(:focus-visible) .hb-close { opacity: 1; pointer-events: auto; }

/* PHONE (640 and under; developer's call, 5 Nov 2026, TLR-03): the bubble moves to the LOWER RIGHT, under Top, because at the left it sat on the page's own tiles
   (the Operations Overview "Sales" tile). Top (40px) shows above it when the page is scrolled; the "?" is 32px to the eye with a 40px tap area (the ::after, which
   reaches 4px past the disc and stops short of Top: the 8px gap between them is wider than the 4px reach). The disc is centred under Top (4px in from Top's right edge).
   The script gives both the same --hb-lift (one column, it rises off a footer or a pinned bar as one), and Top sits --hb-size + 8px above the bubble's bottom.
   The close control goes to the LEFT of the bubble here (above it is Top). Wider windows are unchanged. */
@media (max-width: 640px) {
    :root { --hb-size: 32px; }
    .hb-dock { left: auto; right: calc(var(--hb-edge) + 2px + 4px + env(safe-area-inset-right, 0px)); align-items: flex-end; }
    .hb-top { bottom: calc(var(--hb-edge) + var(--hb-lift, 0px) + var(--hb-size) + 8px + env(safe-area-inset-bottom, 0px)); }
    .hb-dock .hb-help::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
    .hb-help { position: relative; }
    .hb-help .icon { width: 22px; height: 22px; }
    .hb-main::before { left: -10px; right: auto; top: 0; width: 10px; height: 100%; }
    .hb-close { top: 50%; left: -32px; margin: -12px 0 0; }
}

/* The phone's own way in (round two): a "Help" entry at the bottom of the open nav drawer, added by the script as the last child of .left-rail. Shown only while
   the nav is an overlay (1100 and under) and open; never on the docked nav. html.hb-ph-bubble hides it on a phone (640 and under); html.hb-ph-drawer hides the bubble there. */
.hb-drawer-item { display: none; }
@media (max-width: 1100px) {
    body.show-lnav .hb-drawer-item {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 0 16px;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: var(--bg);
        color: var(--ink);
        font: inherit;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }
    body.show-lnav .hb-drawer-item:hover { background: var(--menu-hover-bg); }
    body.show-lnav .hb-drawer-item:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
    .hb-drawer-item .icon { width: 22px; height: 22px; flex: none; display: block; color: var(--brand-primary); }
}
@media (max-width: 640px) {
    html.hb-ph-bubble .hb-drawer-item { display: none !important; }
    html.hb-ph-drawer .hb-dock { display: none !important; }
}

/* the bubble closed: it went into the account chip, which keeps a small dot and a ring while the bubble is tucked away */
.user-trigger.hb-tucked { position: relative; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-on-primary) 55%, transparent); }
.user-trigger.hb-tucked::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-on-primary);
    box-shadow: 0 0 0 2px var(--appbar-bg);
}
.user-trigger.hb-pulse { animation: hbPulse 1.1s ease-out 1; }
@keyframes hbPulse {
    0% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-on-primary) 55%, transparent), 0 0 0 0 color-mix(in srgb, var(--brand-on-primary) 55%, transparent); }
    100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-on-primary) 55%, transparent), 0 0 0 14px transparent; }
}

/* the account menu's "Show help bubble" switch: the standard .toggle (UI_STANDARDS 6.5), in a 44px row */
.user-flyout .hb-menu-switch { display: block; padding: 6px 10px; border-radius: 8px; }
.user-flyout .hb-menu-switch:hover { background: var(--menu-hover-bg); }
.user-flyout .hb-menu-switch .toggle { display: block; }
.user-flyout .hb-menu-switch .toggle input[type="checkbox"] + label { display: flex; min-height: 32px; line-height: 32px; white-space: nowrap; }
.user-flyout .hb-menu-switch .toggle input[type="checkbox"] + label::before { top: 6px; }
.user-flyout .hb-menu-switch .toggle input[type="checkbox"] + label::after { top: 8px; }
.user-flyout .hb-menu-switch .toggle input[type="checkbox"]:focus-visible + label::before { outline: 3px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .hb-dock, .hb-dock.is-on, .hb-dock.is-away, .hb-btn, .hb-top, .hb-top.is-shown, .hb-close { transition: none; }
    .hb-top { transform: none; }
    .user-trigger.hb-pulse { animation: none; }
}

/* ---------------------------------------------------------------------------------------------
   The panel. A column: header (flex none), optional tabs (flex none), body (the only scroller), footer (flex none). Moved to the end of
   <body> by help-panel.js so no ancestor's stacking context or overflow can clip it. Wide: a right-hand panel under the app bar. Small
   (the overlay query of UI_STANDARDS 4.8): the whole screen.
   --------------------------------------------------------------------------------------------- */
.hp-panel {
    position: fixed;
    top: var(--appbar-height, 86px);
    right: 0;
    bottom: 0;
    z-index: 1105;                      /* over the right rail (1100); its scrim (small screens) is 1090 */
    width: min(var(--hp-width), 100vw);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    color: var(--ink);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-3);
    font-size: 14px;
    text-align: left;
    overflow: hidden;
    animation: hpIn .2s ease-out;
}
.hp-panel[hidden] { display: none; }
@keyframes hpIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {
    .hp-panel {
        top: 0;
        left: 0;
        width: auto;
        height: 100vh;
        height: 100dvh;                 /* the VISIBLE viewport: 100vh on a phone includes the browser's own bar and the footer fell off screen */
        border-left: 0;
        box-shadow: none;
        z-index: 1110;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-panel { animation: none; }
}

/* header: the standard modal header, a Back button when reading, the title, two tools */
.hp-header { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 8px 8px 12px; flex: none; min-height: 56px; }
.hp-header h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-header .icon-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--ink); }
.hp-header .icon-btn:hover { background: var(--menu-hover-bg); }
.hp-header .icon-btn[hidden] { display: none; }
.hp-tools { flex: none; display: flex; align-items: center; gap: 16px; }
.hp-header .modal-close { color: var(--ink); line-height: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }

/* tabs (Help | Ask): the shared .tabs / .tab of components.css; hidden until a second tab exists */
.hp-tabs { flex: none; margin: 0 12px; }
.hp-tabs[hidden] { display: none; }

/* body: the one scroller; the header and footer stay put */
.hp-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 16px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.hp-body:focus { outline: none; }
.hp-body[aria-busy="true"] { cursor: progress; }
.hp-pane[hidden] { display: none; }
.hp-panel [hidden] { display: none !important; }   /* a hidden message or form never shows, whatever display its class sets */

.hp-footer {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 16px;
    margin: 0;
    padding: 6px 16px;
    min-height: 52px;
    background: var(--surface);
    border-top: 1px solid var(--border);   /* the one rule the standard modal footer carries */
}
.hp-footer .link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; opacity: 1; text-decoration: none; }
.hp-footer .link:hover { text-decoration: underline; }
.hp-footer .link .icon { width: 14px; height: 14px; flex: none; }
.hp-footer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.hp-footer-actions .btn { width: auto; min-width: 96px; min-height: 44px; }
.hp-footer-start { margin-right: auto; }

/* ---------------------------------------------------------------------------------------------
   Home: search, then sections. Whitespace between sections, no divider lines (UI_STANDARDS 0 rule 6).
   --------------------------------------------------------------------------------------------- */
.hp-search { margin: 0 0 20px; }
.hp-search .input { width: 100%; min-height: 44px; }

.hp-section { margin: 0 0 24px; }
.hp-heading { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; }
.hp-sub { margin: -4px 0 8px; color: var(--muted); font-size: .9rem; }

/* rows are the shared .settings-row (5.3); here they open an article inside the panel */
.hp-list { margin: 0; }
.hp-list .settings-row { align-items: flex-start; min-height: 56px; }
.hp-list .settings-text { min-width: 0; }
.hp-list .settings-title { overflow-wrap: anywhere; }
.hp-list .settings-line {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hp-list .settings-row .settings-go { align-self: center; }

.hp-empty { margin: 0 0 16px; color: var(--muted); }
.hp-empty strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.hp-empty .btn { margin-top: 8px; width: auto; min-height: 44px; }

.hp-count { margin: 0 0 8px; color: var(--muted); }

/* a quiet loading skeleton: bars, no words (UI_STANDARDS 10, loaders show no visible words); the text is for screen readers */
.hp-skeleton { display: grid; gap: 12px; padding: 4px 0; }
.hp-skeleton span { display: block; height: 14px; border-radius: 7px; background: var(--surface-2); }
.hp-skeleton span:nth-child(3n) { width: 62%; }
.hp-skeleton span:nth-child(3n + 1) { width: 92%; }
.hp-skeleton span:nth-child(3n + 2) { width: 78%; }

/* ---------------------------------------------------------------------------------------------
   An article read inside the panel: the help.css recipe (line height, headings, lists, images, tables, notes) scaled down for a 440px column.
   --------------------------------------------------------------------------------------------- */
.hp-crumb { margin: 0 0 4px; font-size: .85rem; color: var(--muted); }
.hp-article-title { margin: 0 0 12px; font-size: 1.25rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.hp-article .help-article, .hp-page-body { line-height: 1.55; overflow-wrap: anywhere; }
.hp-article .help-article h2 { margin: 24px 0 8px; font-size: 1.1rem; font-weight: 700; scroll-margin-top: 8px; }
.hp-article .help-article h3 { margin: 16px 0 6px; font-size: 1rem; font-weight: 600; scroll-margin-top: 8px; }
.hp-article .help-article p { margin: 0 0 12px; font-size: .95rem; }
.hp-article .help-article ul, .hp-article .help-article ol { margin: 0 0 12px; padding-left: 1.4rem; }
.hp-article .help-article li { margin: 0 0 6px; font-size: .95rem; }
.hp-article .help-article li > ul, .hp-article .help-article li > ol { margin: 6px 0 0; }
.hp-article .help-article a { color: var(--brand-ink); text-decoration: underline; }
.hp-article .help-article code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; padding: 1px 4px; border-radius: 4px; background: var(--surface-subtle); }
.hp-article .help-article strong { font-weight: 600; }
.hp-article .help-img { display: block; max-width: 100%; height: auto; margin: 8px 0 12px; border-radius: var(--radius); border: 1px solid var(--border); }
.hp-article .help-figure { margin: 8px 0 12px; }
.hp-article .help-table { overflow-x: auto; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
.hp-article .help-table table { border-collapse: collapse; min-width: 100%; font-size: .85rem; }
.hp-article .help-table th, .hp-article .help-table td { padding: 8px 10px; text-align: left; vertical-align: top; }
.hp-article .help-table th { font-weight: 600; background: var(--surface-subtle); }
.hp-article .help-table td { border-bottom: 1px solid var(--border); }
.hp-article .help-note { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface-subtle); }
.hp-article .help-note p { margin: 0; }
.hp-updated { margin: 16px 0 0; font-size: .85rem; color: var(--muted); }

/* ---------------------------------------------------------------------------------------------
   CBS notes: a clearly marked box UNDER our text. The warm note surface and edge are the existing --note-* tokens (5.4), so a note
   is never mistaken for the article's own text; the words "CBS note" say what it is, the colour only supports that.
   --------------------------------------------------------------------------------------------- */
.hp-notes { margin: 28px 0 0; }
.hp-note {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--note-surface);
    box-shadow: inset 4px 0 0 var(--note-edge), 0 0 0 1px var(--note-edge);
    overflow-wrap: anywhere;
}
.hp-note-label { margin: 0 0 4px; font-size: .85rem; font-weight: 700; }
.hp-note-title { margin: 0 0 4px; font-weight: 600; }
.hp-note-body p { margin: 0 0 8px; }
.hp-note-body ul, .hp-note-body ol { margin: 0 0 8px; padding-left: 1.3rem; }
.hp-note-body h4 { margin: 8px 0 4px; font-size: .95rem; }
.hp-note-body a { color: var(--brand-ink); text-decoration: underline; }
.hp-note-meta { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
.hp-note-actions { margin: 4px 0 0; display: flex; gap: 8px; }
.hp-note-actions .link { min-height: 44px; display: inline-flex; align-items: center; opacity: 1; }
button.link.hp-linkbtn { background: none; border: 0; padding: 0 4px; font: inherit; font-weight: 500; cursor: pointer; }
.hp-notes .btn { width: auto; min-height: 44px; }

/* ---------------------------------------------------------------------------------------------
   Was this helpful, and Suggest a change.
   --------------------------------------------------------------------------------------------- */
.hp-feedback { margin: 28px 0 0; }
.hp-feedback-q { margin: 0 0 8px; font-weight: 600; }
.hp-feedback-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hp-feedback-row .btn { width: auto; min-width: 72px; min-height: 44px; }
.hp-feedback-row .btn[aria-pressed="true"] { background: var(--surface-subtle); border-color: var(--brand-primary); color: var(--brand-ink); }
.hp-feedback .link { min-height: 44px; display: inline-flex; align-items: center; opacity: 1; }
.hp-suggest { margin: 12px 0 0; }
.hp-suggest[hidden] { display: none; }
.hp-suggest .form-row { margin: 0 0 8px; }
.hp-suggest textarea.input { min-height: 96px; resize: vertical; }
.hp-suggest-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hp-suggest-actions .btn { width: auto; min-width: 96px; min-height: 44px; }
.hp-thanks { margin: 12px 0 0; }

/* ---------------------------------------------------------------------------------------------
   The note editor (CBS Admin): the standard form rhythm 24 / 16 / 8 (UI_STANDARDS 6.1).
   --------------------------------------------------------------------------------------------- */
.hp-form .form-row { margin: 0 0 16px; }
.hp-form .form-row label { display: block; margin: 0 0 8px; font-weight: 600; }
.hp-form .form-row .hp-optional { font-weight: 400; color: var(--muted); }
.hp-form .input { width: 100%; }
.hp-form textarea.input { min-height: 180px; resize: vertical; line-height: 1.45; }
.hp-form .microtext { margin: 8px 0 0; }
.hp-form .field-error-msg { margin: 6px 0 0; }
.hp-history { margin: 24px 0 0; }
.hp-history summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.hp-history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hp-history li { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; }
.hp-history li > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hp-history .btn { width: auto; min-width: 88px; min-height: 44px; }
.hp-history .is-current { color: var(--muted); }

/* ---------------------------------------------------------------------------------------------
   The reserved Ask tab: an empty pane the chat drops into. Nothing is drawn until the chat registers.
   --------------------------------------------------------------------------------------------- */
.hp-ask { min-height: 120px; }
.hp-ask-slot { color: var(--muted); }

/* ---------------------------------------------------------------------------------------------
   The small inline "?" beside a complex control (Controls/ucHelpLink.ascx). 44px hit area, the glyph itself small; opens the panel at
   the article (and section) in its data-help attribute.
   --------------------------------------------------------------------------------------------- */
.help-inline {
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    width: 44px;
    height: 44px;
    margin: -10px 0;                  /* the hit area is 44px, so it must not stretch a 24px line */
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--brand-ink);
    cursor: pointer;
}
.help-inline .icon { width: 18px; height: 18px; display: block; }
.help-inline:hover:not(:where(:disabled, [disabled], [aria-disabled="true"])) { background: var(--menu-hover-bg); color: var(--brand-ink); transform: none; }
.help-inline:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 55%, black); outline-offset: 0; }

/* the page behind an open full-screen panel does not scroll or take taps (script sets inert as well) */
html.hp-lock, html.hp-lock body { overflow: hidden; }

@media print {
    .hp-panel, .hb-dock, .hb-top, .hb-drawer-item, .help-inline { display: none !important; }
}
@media (forced-colors: active) {
    .hp-note { box-shadow: none; border: 1px solid CanvasText; border-left-width: 4px; }
    .hb-btn, .hb-close { border: 1px solid CanvasText; }
    .hb-btn:focus-visible, .hb-close:focus-visible, .help-inline:focus-visible { outline: 2px solid Highlight; }
}