/* Dedicated documentation shell. Uses the current Mud theme, independently of the app navigation. */
.help-shell { --help-accent: #cf142b; background: var(--mud-palette-background); color: var(--mud-palette-text-primary); height: 100dvh; overflow: auto; font-family: Inter, sans-serif; scroll-behavior: smooth; }
.help-shell a { color: inherit; text-decoration: none; }
.help-shell a:focus-visible, .help-shell button:focus-visible, .help-shell input:focus-visible, .help-shell summary:focus-visible { outline: 2px solid var(--help-accent); outline-offset: 4px; }
.help-header { height: 76px; padding: 0 36px; border-bottom: 1px solid var(--mud-palette-divider); display: flex; align-items: center; justify-content: space-between; background: var(--mud-palette-background); position: sticky; top: 0; z-index: 20; }
.help-brand { display: flex; align-items: center; gap: 13px; font-size: 17px; letter-spacing: -.5px; }
.help-brand img { width: 43px; height: 43px; object-fit: contain; }
.help-brand strong { font-weight: 450; margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--mud-palette-divider); color: var(--mud-palette-text-secondary); }
.help-header-actions { display: flex; align-items: center; gap: 18px; }
.help-return { border: 1px solid var(--mud-palette-divider); border-radius: 8px; padding: 9px 14px; font-size: 13px; }
.help-return span { margin-left: 16px; color: var(--help-accent); }
.help-workspace { display: grid; grid-template-columns: 248px minmax(0, 800px) 200px; gap: 48px; max-width: 1440px; margin: auto; padding: 30px 32px 80px; align-items: start; }
.help-navigation, .help-toc { position: sticky; top: 106px; max-height: calc(100dvh - 125px); overflow-y: auto; font-size: 13px; }
.help-navigation summary { list-style: none; font-weight: 650; padding: 8px 12px; }
.help-overview { display: flex; justify-content: space-between; padding: 12px; }
.help-nav-group { margin: 4px 0; }
.help-nav-group h2, .help-toc h2 { font-size: 12px; font-weight: 650; margin: 0 12px 10px; letter-spacing: .02em; }
.help-nav-group a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--mud-palette-text-secondary); line-height: 1.5; border-left: 2px solid transparent; }
.help-nav-group a:hover, .help-nav-group a.is-active { color: var(--help-accent); background: rgba(207,20,43,.07); border-left-color: var(--help-accent); }
.help-support { display: block; border-top: 1px solid var(--mud-palette-divider); padding: 20px 12px; color: var(--mud-palette-text-secondary) !important; }
.help-content { min-width: 0; padding-top: 4px; }
.help-search { display: flex; align-items: center; gap: 12px; border: 1px solid var(--mud-palette-divider); background: var(--mud-palette-surface); padding: 11px 16px; border-radius: 10px; margin-bottom: 28px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.help-search span { font-size: 25px; color: var(--mud-palette-text-secondary); }
.help-search input { width: 100%; color: inherit; background: transparent; border: none; font: inherit; font-size: 14px; min-height: 28px; }
.help-eyebrow { font-size: 12px; font-weight: 650; color: var(--help-accent); margin-bottom: 14px; }
.help-content h1 { font-family: Inter, sans-serif; font-size: clamp(30px, 3vw, 44px); font-weight: 650; line-height: 1.16; letter-spacing: -1.5px; margin: 0 0 18px; }
.help-lead { color: var(--mud-palette-text-secondary); font-size: 16px; line-height: 1.8; margin: 0 0 30px; }
.help-welcome { border: 1px solid rgba(207,20,43,.22); background: linear-gradient(120deg,rgba(207,20,43,.07),transparent); border-radius: 12px; padding: 22px; display: flex; align-items: center; gap: 18px; margin: 22px 0 24px; font-size: 13px; }
.help-welcome-icon { font-size: 26px; color: var(--help-accent); }
.help-welcome p { margin: 6px 0 0; color: var(--mud-palette-text-secondary); line-height: 1.6; }
.help-welcome a { margin-left: auto; white-space: nowrap; font-weight: 600; }
.help-category { margin: 24px 0; }
.help-category > h2, .help-article-footer h2 { font-size: 17px; font-weight: 600; margin: 0 0 16px; }
.help-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.help-cards > a { position: relative; border: 1px solid var(--mud-palette-divider); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; transition: border-color .15s, background .15s; }
.help-cards > a:hover { border-color: var(--help-accent); background: rgba(207,20,43,.035); }
.help-card-arrow { color: var(--help-accent); font-size: 22px; margin-bottom: 20px; }
.help-cards h3 { font-size: 16px; line-height: 1.5; font-weight: 600; margin: 0 0 8px; }
.help-cards p { font-size: 13px; line-height: 1.75; color: var(--mud-palette-text-secondary); margin: 0 0 20px; }
.help-card-link { margin-top: auto; font-size: 12px; font-weight: 550; }
.help-article-tools { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--mud-palette-divider); color: var(--mud-palette-text-secondary); }
.help-article-tools a, .help-related a { color: var(--help-accent); }
.help-prose section { scroll-margin-top: 100px; padding-top: 20px; }
.help-prose h2 { font-size: 22px; letter-spacing: -.4px; font-weight: 600; line-height: 1.4; margin: 0 0 18px; }
.help-prose h2 a { color: var(--mud-palette-text-secondary); margin-left: 8px; font-size: 16px; }
.help-prose p { font-size: 14px; line-height: 1.9; margin: 0 0 16px; color: var(--mud-palette-text-secondary); }
.help-step { display: flex; gap: 16px; margin-bottom: 8px; }
.help-step > span { border: 1px solid var(--mud-palette-divider); background: var(--mud-palette-surface); width: 28px; height: 28px; flex-shrink: 0; text-align: center; line-height: 26px; border-radius: 50%; font-size: 12px; }
.help-callout { border-left: 3px solid var(--help-accent); border-radius: 4px; background: rgba(207,20,43,.06); padding: 18px 20px; margin: 20px 0; }
.help-callout strong { font-size: 13px; }.help-callout p { margin: 7px 0 0; }
.help-article-footer { margin-top: 40px; border-top: 1px solid var(--mud-palette-divider); padding-top: 26px; font-size: 13px; }
.help-related { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }.help-related a { border: 1px solid var(--mud-palette-divider); padding: 12px; border-radius: 8px; }
.help-toc { padding-top: 82px; }.help-toc h2 { margin-left: 0; }.help-toc > a { display: block; border-left: 1px solid var(--mud-palette-divider); padding: 8px 12px; color: var(--mud-palette-text-secondary); line-height: 1.6; }.help-toc > a:hover { color: var(--help-accent); }
.help-results a { display: block; border-bottom: 1px solid var(--mud-palette-divider); padding: 22px 0; }.help-results small { color: var(--help-accent); }.help-results h2 { font-size: 19px; margin: 8px 0; }.help-results h2 span { float: right; }.help-results p { color: var(--mud-palette-text-secondary); font-size: 14px; line-height: 1.8; }
.help-notice { border: 1px solid var(--mud-palette-divider); padding: 14px; border-radius: 8px; margin-bottom: 20px; font-size: 13px; }.help-notice button { color: var(--help-accent); text-decoration: underline; margin-left: 8px; }
.help-skip { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--mud-palette-surface); padding: 12px; }.help-skip:focus { top: 12px; }
@media (max-width: 1200px) { .help-workspace { grid-template-columns: 248px minmax(0,1fr); gap: 32px; }.help-toc { display: none; } }
@media (max-width: 760px) { .help-header { padding: 0 18px; height: 64px; }.help-brand { font-size: 14px; gap: 8px; }.help-brand img { width: 32px; height: 32px; }.help-brand strong { padding-left: 8px; margin-left: 5px; }.help-header-actions { gap: 4px; }.help-return { font-size: 11px; padding: 8px; }.help-return span { display: none; }.help-workspace { display: block; padding: 18px 20px 50px; }.help-navigation { position: static; max-height: none; margin-bottom: 24px; border: 1px solid var(--mud-palette-divider); border-radius: 8px; }.help-navigation details:not(:hover):not(:focus-within) { max-height: 220px; overflow: auto; }.help-navigation summary { cursor: pointer; list-style: revert; }.help-cards { grid-template-columns: 1fr; }.help-search { margin-bottom: 30px; }.help-welcome { flex-wrap: wrap; }.help-welcome a { margin-left: 44px; }.help-content h1 { letter-spacing: -.8px; } }
@media (prefers-reduced-motion: reduce) { .help-shell { scroll-behavior: auto; }.help-cards > a { transition: none; } }
.help-mobile-menu { display: none; }
@media (max-width: 760px) {
    .help-mobile-menu { display: flex; width: 100%; justify-content: space-between; padding: 14px; color: inherit; font: inherit; font-size: 13px; }
    .help-nav-links { display: none; }
    .help-nav-links.is-open { display: block; max-height: 60dvh; overflow-y: auto; }
}
.help-authority { border: 1px solid var(--mud-palette-divider); border-left: 3px solid var(--help-accent); border-radius: 10px; padding: 20px 24px; margin: 24px 0; background: var(--mud-palette-surface); }
.help-authority h2 { font-size: 15px; font-weight: 650; margin: 0 0 8px; }
.help-authority h3 { font-size: 13px; font-weight: 650; margin: 16px 0 6px; }
.help-authority p { font-size: 13px; line-height: 1.8; color: var(--mud-palette-text-secondary); margin: 0; }
.help-authority small { display: block; font-size: 11px; line-height: 1.7; margin-top: 16px; color: var(--mud-palette-text-secondary); }
.help-nav-group summary { display:flex; align-items:center; justify-content:space-between; gap:6px; white-space:nowrap; cursor:pointer; font-weight:600; font-size:12px; padding:8px 12px; color:var(--mud-palette-text-primary); }
.help-nav-group summary small { flex-shrink:0; opacity:.55; margin-left:0; }
.help-show-more { margin-top:16px; background:transparent; color:var(--mud-palette-text-primary); border:1px solid var(--mud-palette-divider); border-radius:8px; padding:9px 16px; cursor:pointer; }
.help-show-more:hover { border-color:var(--mud-palette-primary); }
.help-sign-in { background:var(--help-accent); color:white; border:0; border-radius:8px; padding:9px 14px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; }
.help-account { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--mud-palette-text-secondary); }
@media (max-width:760px) { .help-brand strong { display:none; } .help-sign-in { padding:8px 10px; font-size:12px; } .help-account { max-width:80px; } }


.help-navigation { scrollbar-gutter: stable; }

/* Static, accessible HTML examples. Never use live forms or private records here. */
.help-illustration { margin:24px 0 8px; border:1px solid var(--mud-palette-divider); border-radius:12px; overflow:hidden; background:var(--mud-palette-surface); }
.help-illustration-label { padding:12px 18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:12px; font-weight:600; border-bottom:1px solid var(--mud-palette-divider); }
.help-illustration-label span { color:var(--mud-palette-text-secondary); font-weight:400; }
.help-illustration-path { font-size:12px; padding:16px 18px 0; color:var(--help-accent); line-height:1.6; }
.help-illustration-panel { padding:18px; }
.help-prose .help-illustration h2 { font-size:16px; margin:0 0 18px; letter-spacing:normal; }
.help-example-field { border:1px solid var(--mud-palette-divider); border-radius:5px; padding:9px 12px; margin-bottom:12px; }
.help-example-field strong { display:block; font-size:11px; font-weight:500; margin-bottom:5px; }
.help-example-field span { display:block; color:var(--mud-palette-text-secondary); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.help-example-field.is-multiline { min-height:76px; }
.help-example-action { display:inline-block; padding:8px 14px; border-radius:5px; background:var(--help-accent); color:white; font-size:12px; font-weight:600; }
.help-illustration figcaption { padding:0 18px 18px; font-size:12px; line-height:1.7; color:var(--mud-palette-text-secondary); }