/* Shared page guidance. Active controls, errors and required notices stay on the page. */
.pbj-help-control {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    vertical-align: middle;
}

.pbj-page-title-row,
.desk-hero-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    min-width: 0;
}

.pbj-page-title-row > :is(h1, h2),
.desk-hero-heading > h2 { margin-block: 0; min-width: 0; overflow-wrap: anywhere; }

.pbj-help-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: .5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    margin: 0;
    padding: .45rem;
    border: 1px solid var(--pbj-color-border-accent, #d9c99c);
    border-radius: 999px;
    background: var(--pbj-color-surface, #fff);
    color: var(--pbj-color-accent, #7f5d00);
    font: 600 .875rem/1.25 var(--pbj-font-sans, 'Segoe UI', sans-serif);
    cursor: pointer;
    box-shadow: 0 2px 5px rgb(15 23 42 / .04);
    transition: background-color 140ms ease, border-color 140ms ease;
}

.pbj-help-trigger--labelled { padding-inline: .65rem .9rem; }
.pbj-help-trigger__icon { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; font-size: 1rem; font-weight: 750; }
.pbj-help-trigger:hover { background: var(--pbj-color-accent-soft, #fbf5df); border-color: var(--pbj-color-accent, #7f5d00); }
.pbj-help-trigger:focus-visible,
.pbj-help-dialog :is(a, button, summary, [tabindex]):focus-visible { outline: 3px solid var(--pbj-color-focus, #8a6500); outline-offset: 3px; }

.pbj-help-dialog {
    --pbj-help-bg: var(--pbj-color-surface, #fff);
    --pbj-help-ink: var(--pbj-color-text, #172033);
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: min(42rem, calc(100vw - 2rem));
    max-width: none;
    max-height: min(48rem, calc(100dvh - 3rem));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--pbj-color-border-accent, #d9c99c);
    border-radius: 1.35rem;
    background: var(--pbj-help-bg);
    color: var(--pbj-help-ink);
    font: 400 .9375rem/1.65 var(--pbj-font-sans, 'Segoe UI', sans-serif);
    text-align: left;
    box-shadow: 0 30px 100px rgb(15 23 42 / .3), 0 4px 18px rgb(15 23 42 / .1);
    isolation: isolate;
}

.pbj-help-dialog:not([open]) { display: none; }
.pbj-help-dialog[open] { display: flex; flex-direction: column; animation: pbj-help-appear 140ms ease-out; }
.pbj-help-dialog::backdrop { background: rgb(10 18 32 / .48); backdrop-filter: blur(4px); }
.pbj-help-dialog *, .pbj-help-dialog *::before, .pbj-help-dialog *::after { box-sizing: border-box; }
.pbj-help-dialog__header { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; padding: 1.35rem 1.5rem; border-bottom: 1px solid var(--pbj-color-border, #e2e5e9); background: linear-gradient(110deg, var(--pbj-color-accent-soft, #fbf5df), transparent); }
.pbj-help-dialog__emblem { display: grid; place-items: center; flex: 0 0 auto; width: 2.8rem; height: 2.8rem; border-radius: .95rem; background: var(--pbj-color-accent-soft, #f7edce); color: var(--pbj-color-accent, #7f5d00); font-size: 1.4rem; font-weight: 750; }
.pbj-help-dialog__heading { min-width: 0; flex: 1; }
.pbj-help-dialog .pbj-help-dialog__eyebrow { margin: 0 0 .25rem; color: var(--pbj-color-accent, #7f5d00); font-size: .625rem; font-weight: 750; line-height: 1.5; letter-spacing: .14em; }
.pbj-help-dialog__heading h2 { margin: 0; padding: 0; color: inherit; font-size: 1.25rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.pbj-help-dialog__close { display: grid; place-items: center; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; padding: .65rem; margin: -.35rem -.35rem -.35rem 0; border: 1px solid transparent; border-radius: .7rem; background: transparent; color: var(--pbj-color-text-muted, #5d6b7d); cursor: pointer; }
.pbj-help-dialog__close:hover { background: var(--pbj-color-surface-subtle, #f7f8fa); border-color: var(--pbj-color-border, #e2e5e9); color: var(--pbj-help-ink); }
.pbj-help-dialog__close svg { display: block; width: 1.25rem; height: 1.25rem; }
.pbj-help-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 1.5rem; overflow-wrap: anywhere; }
.pbj-help-dialog__body > :first-child { margin-top: 0; }
.pbj-help-dialog__body > :last-child { margin-bottom: 0; }
.pbj-help-dialog__body p { margin-block: 0 1rem; color: inherit; font-size: inherit; line-height: inherit; max-width: none; }
.pbj-help-dialog__body :is(ul, ol) { margin-block: .75rem 1.2rem; padding-inline-start: 1.25rem; }
.pbj-help-dialog__body ul { list-style: disc; }
.pbj-help-dialog__body ol { list-style: decimal; }
.pbj-help-dialog__body li + li { margin-top: .65rem; }
.pbj-help-dialog__body :is(h3, h4) { margin-block: 1.25rem .5rem; color: inherit; font-size: 1rem; font-weight: 700; }
.pbj-help-dialog :is(a:not(.btn), .pbj-help-dialog__links a) { color: var(--pbj-color-accent, #7f5d00); text-decoration: underline; text-underline-offset: .2em; }
.pbj-help-dialog__body pre { overflow-x: auto; max-width: 100%; white-space: pre-wrap; }
.pbj-help-dialog__body table { width: 100%; }
.pbj-help-dialog__body .pbj-help-articles { padding: 0; margin: 0; list-style: none; }
.pbj-help-articles > li { padding: 1rem; border: 1px solid var(--pbj-color-border, #e2e5e9); border-radius: .875rem; background: var(--pbj-color-surface-subtle, #f7f8fa); }
.pbj-help-articles > li > a { font-weight: 650; }
.pbj-help-articles > li > p { margin-block: .35rem .75rem; font-size: .875rem; color: var(--pbj-color-text-muted, #5d6b7d); }
.pbj-help-dialog__footer { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex: 0 0 auto; padding: 1rem 1.5rem; border-top: 1px solid var(--pbj-color-border, #e2e5e9); background: var(--pbj-color-surface-subtle, #f7f8fa); }
.pbj-help-dialog__links { display: flex; flex: 1; align-items: center; flex-wrap: wrap; gap: .65rem 1rem; font-size: .8125rem; min-width: 0; }
.pbj-help-dialog__done { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 5rem; min-height: 2.75rem; padding: .55rem 1.1rem; border: 1px solid var(--pbj-color-accent, #7f5d00); border-radius: .65rem; background: var(--pbj-color-accent, #7f5d00); color: var(--pbj-color-surface, #fff); font: 650 .875rem/1.3 var(--pbj-font-sans, 'Segoe UI', sans-serif); cursor: pointer; }
.pbj-help-dialog__done:hover { background: var(--pbj-color-accent-strong, #624700); }
.pbj-help-fallback { text-align: left; }
html.pbj-help-open { overflow: hidden; }

:is(.dark, [data-theme='dark'], .pbj-theme-dark) .pbj-help-dialog { color-scheme: dark; }

@keyframes pbj-help-appear { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: translateY(0); } }
@media (pointer: coarse) { .pbj-help-trigger { min-width: 2.75rem; min-height: 2.75rem; } }
@media (max-width: 600px) {
    .pbj-help-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); border-radius: 1rem; }
    .pbj-help-dialog__header { padding: 1rem; gap: .65rem; }
    .pbj-help-dialog__heading h2 { font-size: 1.125rem; }
    .pbj-help-dialog__emblem { width: 2.3rem; height: 2.3rem; border-radius: .75rem; }
    .pbj-help-dialog__body { padding: 1.1rem; }
    .pbj-help-dialog__footer { padding: .875rem 1rem; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .pbj-help-dialog[open] { animation: none; } .pbj-help-trigger { transition: none; } }
@media (forced-colors: active) { .pbj-help-trigger, .pbj-help-dialog, .pbj-help-dialog__done { border: 1px solid CanvasText; } .pbj-help-dialog::backdrop { background: rgb(0 0 0 / .6); } }
@media print { .pbj-help-control, .pbj-help-dialog { display: none !important; } }