/* Minification failed. Returning unminified contents.
(52,21): run-time error CSS1030: Expected identifier, found '>'
(52,36): run-time error CSS1031: Expected selector, found ')'
(52,36): run-time error CSS1025: Expected comma or open brace, found ')'
 */
/* ==========================================================================
   help-content.css -- shared rendering rules for raw RTE-authored Help.Answer
   HTML, used by:
     - Help.aspx public Learning Centre  (.help-article)  [Buzzhub.Master]
     - theHive.aspx course modal          (.helppage)      [Site.Master]
     - theHive.aspx inline article view   (.helppage)      [Site.Master]
     - BuzzHubAdmin.aspx article preview  (.helppage)      [Site.Master]

   One copy. Three surfaces. Loaded on Site.Master + Buzzhub.Master via
   ~/bundles/HelpContentCSS. Page-chrome (.bs-help-* hero/breadcrumb/badges)
   stays in Buzzscribed.css; .helppage frame styles (border, shadow, max-width)
   stay in their owning .aspx. Only the inner article rendering lives here.

   Token strategy: brand hexes hardcoded (stable across shells), dark-mode
   tokens use auth-shell namespace with fallbacks so Buzzhub.Master (which
   doesn't load theme-tokens.css) still resolves to the dark fallback values.
   ========================================================================== */

/* -- Section neutralisation --------------------------------------------------
   RTE-authored content nests <section> / <div class="doc-section"> wrappers
   that bring their own margins. Reset them so spacing is governed by
   p/h2/h3 rhythm only. */
.help-article section,
.help-article .doc-section,
.helppage section,
.helppage .doc-section {
    display: block;
    margin: 0;
    padding: 0;
}

.help-article > section + section,
.help-article > .doc-section + .doc-section,
.helppage > section + section,
.helppage > .doc-section + .doc-section {
    margin-top: 1rem;
}

.help-article > section:first-child > h2:first-child,
.help-article > .doc-section:first-child > h2:first-child,
.help-article > h2:first-child,
.helppage > section:first-child > h2:first-child,
.helppage > .doc-section:first-child > h2:first-child,
.helppage > h2:first-child {
    margin-top: 0;
}

/* -- Empty paragraph collapse ------------------------------------------------
   Editor leaves <p></p> and <p><br></p> behind on Enter; both produce visible
   void in the rendered article. */
.help-article p:empty,
.help-article p:has(> br:only-child),
.helppage p:empty,
.helppage p:has(> br:only-child) {
    display: none;
}

/* -- Typography scope --------------------------------------------------------
   font-family intentionally NOT set -- inherits from each shell so Help.aspx
   gets Buzzscribed brand fonts and theHive/BuzzHubAdmin get auth-shell fonts. */
.help-article,
.helppage {
    font-size: 1.0625rem;
    line-height: 1.7;
}

.help-article h1,
.helppage h1 {
    display: none;
}

.help-article h2,
.help-article h3,
.help-article h4,
.helppage h2,
.helppage h3,
.helppage h4 {
    color: #3d1a6f;
    line-height: 1.3;
    margin: 2.25rem 0 0.75rem;
}

.help-article h2,
.helppage h2 {
    font-size: 1.625rem;
    font-weight: 700;
    border-bottom: 2px solid #fdb913;
    padding-bottom: 0.4rem;
}

.help-article h3,
.helppage h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

.help-article h4,
.helppage h4 {
    font-size: 1.05rem;
    font-weight: 600;
}

.help-article p,
.helppage p {
    margin: 0 0 1.1rem;
}

.help-article ul,
.help-article ol,
.helppage ul,
.helppage ol {
    margin: 0 0 1.25rem;
    padding-left: 1.4rem;
}

.help-article li,
.helppage li {
    margin-bottom: 0.4rem;
}

.help-article a,
.helppage a {
    color: #3d1a6f;
    text-decoration: underline;
    text-decoration-color: #fdb913;
    text-underline-offset: 2px;
}

.help-article a:hover,
.helppage a:hover {
    color: #5a2d82;
}

.help-article strong,
.help-article b,
.helppage strong,
.helppage b {
    color: #3d1a6f;
    font-weight: 600;
}

.help-article img,
.helppage img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.25rem auto;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.help-article blockquote,
.helppage blockquote {
    margin: 1.5rem 0;
    padding: 0.75rem 1.25rem;
    border-left: 4px solid #fdb913;
    background: #fffbf0;
    color: #212529;
    border-radius: 0 4px 4px 0;
    font-style: italic;
}

.help-article code,
.helppage code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    background: #f8f9fa;
    color: #3d1a6f;
    border-radius: 4px;
}

.help-article pre,
.helppage pre {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    background: #212529;
    color: #f1f3f5;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.5;
}

.help-article pre code,
.helppage pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.help-article kbd,
.helppage kbd {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 0.85em;
    padding: 0.2rem 0.45rem;
    background: #f1f3f5;
    color: #212529;
    border: 1px solid #ced4da;
    border-bottom-width: 2px;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.help-article table,
.helppage table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.help-article th,
.help-article td,
.helppage th,
.helppage td {
    padding: 0.6rem 0.85rem;
    border: 1px solid #dee2e6;
    text-align: left;
    vertical-align: top;
}

.help-article th,
.helppage th {
    background: #3d1a6f;
    color: #ffffff;
    font-weight: 600;
}

.help-article hr,
.helppage hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid #dee2e6;
}

/* ==========================================================================
   Dark mode -- tokens with auth-shell-namespace fallbacks. Buzzhub.Master
   doesn't load theme-tokens.css so the fallback hex values are what render
   on Help.aspx in dark mode. Site.Master loads theme-tokens.css so tokens
   resolve to canonical dark values.
   ========================================================================== */
/* Dark mode: dark surface + forced-light descendant text. Same pattern as
   theme-tokens.css for ticket / askralph / editor surfaces. Wildcard !important
   defeats inline style="color:rgb(0,0,0)" on RTE-authored content. Light-mode
   brand colours for headings/links etc. are deliberately overridden here so they
   stay visible on the dark surface. */
[data-theme="dark"] .help-article,
[data-theme="dark"] .helppage {
    background-color: #1e1e1e;
    color: #e8e8e8;
}
[data-theme="dark"] .help-article *,
[data-theme="dark"] .helppage * {
    color: #e8e8e8 !important;
}
[data-theme="dark"] .help-article :is(h1, h2, h3, h4),
[data-theme="dark"] .helppage :is(h1, h2, h3, h4) {
    color: #e5d9ff !important;
}
[data-theme="dark"] .help-article a,
[data-theme="dark"] .helppage a {
    color: #d4b3ff !important;
}
[data-theme="dark"] .help-article strong,
[data-theme="dark"] .help-article b,
[data-theme="dark"] .helppage strong,
[data-theme="dark"] .helppage b {
    color: #e5d9ff !important;
}
[data-theme="dark"] .help-article code,
[data-theme="dark"] .helppage code {
    background: #0f0f12;
}
[data-theme="dark"] .help-article pre,
[data-theme="dark"] .helppage pre {
    background: #0f0f12;
    border: 1px solid #2a2a2a;
}
[data-theme="dark"] .help-article kbd,
[data-theme="dark"] .helppage kbd {
    background: #0f0f12;
    border-color: #3a3a3a;
}
[data-theme="dark"] .help-article blockquote,
[data-theme="dark"] .helppage blockquote {
    background: #14110d;
    border-left-color: #fdb913;
}
[data-theme="dark"] .help-article table th,
[data-theme="dark"] .helppage table th {
    background: #3d1a6f;
    border-color: #3a3a3a;
}
[data-theme="dark"] .help-article table td,
[data-theme="dark"] .helppage table td {
    border-color: #3a3a3a;
}
[data-theme="dark"] .help-article hr,
[data-theme="dark"] .helppage hr {
    border-top-color: #2a2a2a;
}

/* ==========================================================================
   Learning Centre pedagogy callouts (added 2026-05-11)
   Shared utility classes for proper teaching content: meta bar, try-this,
   weak/strong comparison, common mistake, FAQ, checklist, takeaways recap,
   image placeholder. Reused across all 27 curated course articles.
   ========================================================================== */

/* Top-of-article meta strip: time, difficulty, prereqs */
.help-article .lc-meta,
.helppage .lc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .65rem 1rem;
    margin: 0 0 1.25rem;
    background: #f4f0fa;
    border-left: 3px solid #3d1a78;
    border-radius: 0 4px 4px 0;
    font-size: .9rem;
    color: #3d1a78;
}
.help-article .lc-meta strong,
.helppage .lc-meta strong {
    color: #3d1a78;
    margin-right: .25rem;
}

/* Try-this exercise -- active learning */
.help-article .lc-tryit,
.helppage .lc-tryit {
    background: #eef7ee;
    border-left: 3px solid #2e7d32;
    padding: .75rem 1rem;
    margin: 1rem 0;
    border-radius: 0 4px 4px 0;
}
.help-article .lc-tryit > .lc-label,
.helppage .lc-tryit > .lc-label {
    display: inline-block;
    font-weight: 600;
    color: #1b5e20;
    margin-right: .35rem;
}

/* Weak vs strong comparison */
.help-article .lc-compare,
.helppage .lc-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin: 1rem 0;
}
.help-article .lc-compare > div,
.helppage .lc-compare > div {
    padding: .75rem 1rem;
    border-radius: 4px;
    font-size: .95rem;
}
.help-article .lc-compare .lc-weak,
.helppage .lc-compare .lc-weak {
    background: #fdecec;
    border-left: 3px solid #c62828;
}
.help-article .lc-compare .lc-strong,
.helppage .lc-compare .lc-strong {
    background: #eef7ee;
    border-left: 3px solid #2e7d32;
}
.help-article .lc-compare .lc-label,
.helppage .lc-compare .lc-label {
    display: block;
    font-weight: 600;
    margin-bottom: .25rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.help-article .lc-compare .lc-weak .lc-label,
.helppage .lc-compare .lc-weak .lc-label {
    color: #c62828;
}
.help-article .lc-compare .lc-strong .lc-label,
.helppage .lc-compare .lc-strong .lc-label {
    color: #1b5e20;
}
@media (max-width: 640px) {
    .help-article .lc-compare,
    .helppage .lc-compare {
        grid-template-columns: 1fr;
    }
}

/* Common mistake / pitfall -- WRONG / RIGHT pattern */
.help-article .lc-mistake,
.helppage .lc-mistake {
    background: #fff7e6;
    border-left: 3px solid #ef6c00;
    padding: .75rem 1rem;
    margin: 1rem 0;
    border-radius: 0 4px 4px 0;
}
.help-article .lc-mistake > .lc-label,
.helppage .lc-mistake > .lc-label {
    display: inline-block;
    font-weight: 600;
    color: #b34700;
    margin-right: .35rem;
}

/* FAQ block */
.help-article .lc-faq,
.helppage .lc-faq {
    margin: 1rem 0;
}
.help-article .lc-faq dt,
.helppage .lc-faq dt {
    font-weight: 600;
    color: #3d1a78;
    margin-top: .85rem;
}
.help-article .lc-faq dt:first-child,
.helppage .lc-faq dt:first-child {
    margin-top: 0;
}
.help-article .lc-faq dd,
.helppage .lc-faq dd {
    margin: .25rem 0 .75rem 1rem;
}

/* Checklist */
.help-article .lc-checklist,
.helppage .lc-checklist {
    list-style: none;
    padding-left: 0;
    margin: .5rem 0;
}
.help-article .lc-checklist li,
.helppage .lc-checklist li {
    padding: .2rem 0 .2rem 1.7rem;
    position: relative;
}
.help-article .lc-checklist li::before,
.helppage .lc-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45rem;
    width: 1.1rem;
    height: 1.1rem;
    border: 1.5px solid #3d1a78;
    border-radius: 3px;
    background: #fff;
}

/* Key takeaways recap */
.help-article .lc-takeaways,
.helppage .lc-takeaways {
    background: #fff8d6;
    border: 1px solid #fdb913;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}
.help-article .lc-takeaways > .lc-label,
.helppage .lc-takeaways > .lc-label {
    display: block;
    font-weight: 700;
    color: #3d1a78;
    margin-bottom: .5rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.help-article .lc-takeaways ul,
.helppage .lc-takeaways ul {
    margin: 0;
    padding-left: 1.2rem;
}

/* Image placeholder -- temporary until screenshots captured */
.help-article .lc-image,
.helppage .lc-image {
    margin: 1rem 0;
    text-align: center;
}
.help-article .lc-image .lc-image-stub,
.helppage .lc-image .lc-image-stub {
    background: repeating-linear-gradient(45deg, #f4f0fa, #f4f0fa 10px, #ece4f8 10px, #ece4f8 20px);
    border: 1.5px dashed #3d1a78;
    color: #3d1a78;
    padding: 1.5rem 1rem;
    border-radius: 6px;
    font-size: .9rem;
    font-style: italic;
}
.help-article .lc-image figcaption,
.helppage .lc-image figcaption {
    font-size: .85rem;
    color: #666;
    margin-top: .35rem;
    font-style: italic;
}

/* Inline glossary term -- first mention */
.help-article .lc-term,
.helppage .lc-term {
    border-bottom: 1px dotted #3d1a78;
    cursor: help;
}

/* Dark mode overrides for callouts */
[data-theme="dark"] .help-article .lc-meta,
[data-theme="dark"] .helppage .lc-meta {
    background: #2a1f3d;
    color: #d9c9f2;
}
[data-theme="dark"] .help-article .lc-meta strong,
[data-theme="dark"] .helppage .lc-meta strong {
    color: #fdb913;
}
[data-theme="dark"] .help-article .lc-tryit,
[data-theme="dark"] .helppage .lc-tryit {
    background: #14241a;
}
[data-theme="dark"] .help-article .lc-tryit > .lc-label,
[data-theme="dark"] .helppage .lc-tryit > .lc-label {
    color: #81c784;
}
[data-theme="dark"] .help-article .lc-compare .lc-weak,
[data-theme="dark"] .helppage .lc-compare .lc-weak {
    background: #2a1414;
}
[data-theme="dark"] .help-article .lc-compare .lc-strong,
[data-theme="dark"] .helppage .lc-compare .lc-strong {
    background: #14241a;
}
[data-theme="dark"] .help-article .lc-mistake,
[data-theme="dark"] .helppage .lc-mistake {
    background: #2a1f0d;
}
[data-theme="dark"] .help-article .lc-mistake > .lc-label,
[data-theme="dark"] .helppage .lc-mistake > .lc-label {
    color: #ffb74d;
}
[data-theme="dark"] .help-article .lc-faq dt,
[data-theme="dark"] .helppage .lc-faq dt {
    color: #fdb913;
}
[data-theme="dark"] .help-article .lc-checklist li::before,
[data-theme="dark"] .helppage .lc-checklist li::before {
    border-color: #fdb913;
    background: #1a1a1a;
}
[data-theme="dark"] .help-article .lc-takeaways,
[data-theme="dark"] .helppage .lc-takeaways {
    background: #2a230d;
    border-color: #fdb913;
}
[data-theme="dark"] .help-article .lc-takeaways > .lc-label,
[data-theme="dark"] .helppage .lc-takeaways > .lc-label {
    color: #fdb913;
}
[data-theme="dark"] .help-article .lc-image .lc-image-stub,
[data-theme="dark"] .helppage .lc-image .lc-image-stub {
    background: repeating-linear-gradient(45deg, #1f1830, #1f1830 10px, #2a213f 10px, #2a213f 20px);
    color: #d9c9f2;
}

