/* ============================================================================
   SLAM app header extras (extracted verbatim from base.html's second giant
   inline <style> block during the Phase-2 shell consolidation).
   Cascade position: loaded AFTER the Font Awesome CDN stylesheet and BEFORE
   the slam/components.css override layer — identical to where the inline
   block used to sit.
   Contents: helper omnisearch, notification/menu polish, page progress bar.
   ============================================================================ */

    /* Helper Assistant omnisearch (header) */
    .helper-omnisearch {
      position: relative;
      min-width: 240px;
      max-width: 380px;
      flex: 0 1 300px;
    }
    .helper-omnisearch-input {
      width: 100%;
      padding: 6px 10px 6px 30px;
      border-radius: 6px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      background: rgba(255, 255, 255, 0.9);
      font-size: 0.88rem;
      line-height: 1.2;
    }
    .helper-omnisearch-input:focus {
      outline: none;
      border-color: var(--slam-accent);
      box-shadow: 0 0 0 2px rgba(var(--slam-accent-rgb), 0.18);
      background: #fff;
    }
    .helper-omnisearch-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(0, 0, 0, 0.45);
      pointer-events: none;
    }
    .global-guide-me-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(var(--slam-accent-rgb), 0.25);
      background: rgba(var(--slam-accent-rgb), 0.10);
      color: var(--slam-accent);
      border-radius: 8px;
      padding: 5px 9px;
      font-size: 0.84rem;
      line-height: 1.2;
      cursor: pointer;
      white-space: nowrap;
    }
    .global-guide-me-btn[hidden] { display: none !important; }
    /* Infotip: small hoverable info icon used next to labels/headers.
       Usage: <i class="fas fa-circle-info slam-infotip" data-bs-toggle="tooltip" title="..."></i> */
    .slam-infotip {
      font-size: 0.78em;
      color: var(--bs-secondary-color, #6c757d);
      opacity: 0.65;
      cursor: help;
      vertical-align: baseline;
    }
    .slam-infotip:hover { opacity: 1; }
    /* Page guide banner: plain-language "what this page is for / what to do
       next" panel shown at the top of a page. Dismissible per page (a slim
       "Page guide" pill restores it) and can launch the page's Guide Me tour.
       Markup contract:
         <div class="slam-page-guide" data-page-guide>
           <div class="spg-what">…one sentence purpose…</div>
           <div class="spg-flow">…numbered workflow steps…</div>
           <div class="spg-next">…links to the next pages in the workflow…</div>
         </div> */
    .slam-page-guide {
      position: relative;
      border: 1px solid rgba(var(--slam-accent-rgb, 13, 110, 253), 0.25);
      border-left: 4px solid var(--slam-accent, #0d6efd);
      background: rgba(var(--slam-accent-rgb, 13, 110, 253), 0.05);
      border-radius: .5rem;
      padding: .65rem .9rem;
      margin-bottom: 1rem;
      font-size: .875rem;
    }
    .slam-page-guide .spg-what { font-weight: 600; }
    .slam-page-guide .spg-what .fa-map-signs { color: var(--slam-accent, #0d6efd); margin-right: .4rem; }
    .slam-page-guide .spg-flow {
      color: var(--bs-secondary-color, #6c757d);
      margin-top: .15rem;
    }
    .slam-page-guide .spg-flow .spg-step {
      display: inline-block;
      margin-right: .35rem;
    }
    .slam-page-guide .spg-flow .spg-step + .spg-step::before {
      content: "\2192"; /* → */
      margin-right: .35rem;
      opacity: .5;
    }
    .slam-page-guide .spg-next { margin-top: .25rem; }
    .slam-page-guide .spg-next a { text-decoration: none; }
    .slam-page-guide .spg-actions {
      position: absolute;
      top: .4rem;
      right: .5rem;
      display: flex;
      gap: .35rem;
      align-items: center;
    }
    .slam-page-guide .spg-guide-btn {
      border: 1px solid rgba(var(--slam-accent-rgb, 13, 110, 253), 0.35);
      background: transparent;
      color: var(--slam-accent, #0d6efd);
      border-radius: .4rem;
      font-size: .76rem;
      padding: .1rem .5rem;
      line-height: 1.4;
    }
    .slam-page-guide .spg-guide-btn:hover { background: rgba(var(--slam-accent-rgb, 13, 110, 253), 0.12); }
    .slam-page-guide .spg-dismiss {
      border: 0;
      background: transparent;
      color: var(--bs-secondary-color, #6c757d);
      font-size: .9rem;
      line-height: 1;
      padding: .15rem .3rem;
    }
    .slam-page-guide .spg-dismiss:hover { color: var(--bs-body-color, #000); }
    .slam-page-guide-pill {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      border: 1px dashed rgba(var(--slam-accent-rgb, 13, 110, 253), 0.45);
      color: var(--slam-accent, #0d6efd);
      background: transparent;
      border-radius: 1rem;
      font-size: .76rem;
      padding: .15rem .6rem;
      margin-bottom: .75rem;
    }
    .slam-page-guide-pill:hover { background: rgba(var(--slam-accent-rgb, 13, 110, 253), 0.08); }
    /* HSE page toolbar: separates the buttons that CREATE something from the
       buttons that just take you somewhere.

       Users could not tell authoring apart from consuming on HSE pages, and
       button colour alone is not a signal anyone learns. The visible
       "Create & manage" label is what does the work here; the border is there
       to bind the label to the buttons it describes.

       Markup contract:
         <div class="hse-toolbar">
           {% if perms.core.add_x %}
           <div class="hse-toolbar-manage hse-manage-group">
             <span class="hse-toolbar-label">Create &amp; manage</span>
             <a class="btn btn-primary" data-hse-action="create" href="…">…</a>
           </div>
           {% endif %}
           <div class="hse-toolbar-open">…outline navigate buttons…</div>
         </div>

       The manage cluster must always sit inside the permission check, so a
       user who cannot author never sees the label at all.

       hse-manage-group is the marker the convention tests key off. It is a
       separate class from hse-toolbar-manage because a page can group create
       actions without using the inline pill treatment -- the HSE Home tile
       grid does exactly that -- and the invariant being enforced is "every
       create action sits under a visible Create & manage heading", not "every
       create action is in a pill". Pair it with hse-do-group on the sections
       that are not authoring, so the ordering can be checked. */
    .hse-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .75rem;
    }
    .hse-toolbar-manage {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .4rem;
      border: 1px solid rgba(var(--slam-accent-rgb, 13, 110, 253), 0.35);
      background: rgba(var(--slam-accent-rgb, 13, 110, 253), 0.05);
      border-radius: .5rem;
      padding: .3rem .5rem .3rem .6rem;
    }
    .hse-toolbar-label {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--slam-accent, #0d6efd);
      margin-right: .15rem;
      white-space: nowrap;
    }
    .hse-toolbar-open {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .4rem;
    }
    /* Narrow screens: the label sits above its buttons rather than being
       squeezed onto a line of its own between two wrapped buttons. */
    @media (max-width: 575.98px) {
      .hse-toolbar-manage { width: 100%; }
      .hse-toolbar-label { width: 100%; margin-bottom: .15rem; }
    }
    .global-guide-me-btn:hover {
      background: rgba(var(--slam-accent-rgb), 0.18);
      border-color: rgba(var(--slam-accent-rgb), 0.45);
    }
    .helper-omnisearch-results {
      display: none;
      /* `position: fixed` keeps the dropdown above every page element —
         absolutely-positioned children get clipped by any ancestor with
         overflow: hidden, which was hiding the dropdown under page
         action bars (New Requisition, Priorities Report, etc.). Top and
         left are set dynamically in JS based on the input's rect. */
      position: fixed;
      min-width: 320px;
      width: 380px;
      max-width: calc(100vw - 24px);
      max-height: 70vh;
      overflow-y: auto;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      /* Well above any bootstrap modal / dropdown / sticky action bar. */
      z-index: 2147483000;
    }
    .helper-omnisearch-results.is-open { display: block; }
    .helper-omnisearch-group { padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
    .helper-omnisearch-group:last-child { border-bottom: none; }
    .helper-omnisearch-group-label {
      display: block;
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: rgba(0, 0, 0, 0.5);
      padding: 6px 12px 4px;
    }
    .helper-omnisearch-group-link {
      text-decoration: none;
    }
    .helper-omnisearch-group-link:hover {
      color: rgba(0, 0, 0, 0.75);
      text-decoration: underline;
    }
    .helper-omnisearch-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 12px;
      color: #212529;
      text-decoration: none;
      border-left: 3px solid transparent;
    }
    .helper-omnisearch-item:hover,
    .helper-omnisearch-item.is-active {
      background: rgba(var(--slam-accent-rgb), 0.08);
      border-left-color: var(--slam-accent);
      color: #003a7a;
    }
    .helper-omnisearch-item-icon { width: 18px; text-align: center; padding-top: 2px; color: rgba(0, 0, 0, 0.55); }
    .helper-omnisearch-item-body { display: flex; flex-direction: column; min-width: 0; }
    .helper-omnisearch-item-title { font-weight: 500; font-size: 0.9rem; }
    .helper-omnisearch-item-subtitle { font-size: 0.78rem; color: rgba(0, 0, 0, 0.55); }
    .helper-omnisearch-empty { padding: 12px 14px; color: rgba(0, 0, 0, 0.55); font-size: 0.85rem; }
    .helper-omnisearch-suggest-note {
      padding: 10px 14px 6px;
      font-size: 0.82rem;
      color: rgba(0, 0, 0, 0.6);
      border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
      background: rgba(0, 0, 0, 0.02);
    }
    .helper-omnisearch-ask { padding: 8px 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); }

    /* "Ask IntelliSite" row — a real selectable result so Enter routes
       to chat instead of a random navigation target. The primary variant
       shown on top of question-style queries uses the accent colour so
       users immediately see it's the recommended action. */
    .helper-omnisearch-ask-item {
      background: rgba(var(--slam-accent-rgb), 0.04);
    }
    .helper-omnisearch-ask-item .helper-omnisearch-item-title {
      font-weight: 600;
    }
    .helper-omnisearch-ask-item .helper-omnisearch-item-subtitle {
      color: rgba(var(--slam-accent-rgb), 0.85);
    }
    .helper-omnisearch-ask-item .helper-omnisearch-item-icon {
      color: var(--slam-accent);
    }
    .helper-omnisearch-ask-primary {
      border-left-color: var(--slam-accent);
    }

    /* IntelliSite "thinking" indicator — shown from Send click until the
       LLM reply lands. The 3 dots pulse so the user knows the chat is
       alive even when OpenAI takes 5-10 seconds. */
    .ai-thinking {
      padding: 4px 0;
      color: rgba(0, 0, 0, 0.7);
      font-style: italic;
    }
    .ai-thinking-label { margin-right: 2px; }
    .ai-thinking-dots { display: inline-block; margin-left: 2px; }
    .ai-thinking-dots > span {
      display: inline-block;
      animation: ai-thinking-pulse 1.2s infinite ease-in-out both;
      opacity: 0.2;
    }
    .ai-thinking-dots > span:nth-child(1) { animation-delay: 0s; }
    .ai-thinking-dots > span:nth-child(2) { animation-delay: 0.2s; }
    .ai-thinking-dots > span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes ai-thinking-pulse {
      0%, 80%, 100% { opacity: 0.2; }
      40%           { opacity: 1.0; }
    }

    /* ===== Guide Me overlay ===== */
    .slam-guide-overlay {
      position: fixed; inset: 0; z-index: 20050;
      pointer-events: none;  /* clicks pass through except on child elements */
    }
    .slam-guide-backdrop {
      position: absolute; inset: 0;
      background: rgba(15, 20, 30, 0.45);
      backdrop-filter: blur(1px);
      pointer-events: auto;
      cursor: pointer;
    }
    .slam-guide-overlay.has-target .slam-guide-backdrop {
      /* When we have a real target, the spotlight's box-shadow already
         dims everything outside the target rectangle. Keeping the full
         backdrop transparent prevents the target itself from looking
         blurred or greyed out. */
      background: transparent;
      backdrop-filter: none;
      pointer-events: none;
    }
    .slam-guide-overlay.is-modal-guide .slam-guide-backdrop {
      /* Modal content is already visually separated by Bootstrap's
         backdrop. Keep modal guides readable instead of double-blurring
         and over-dimming the modal body. */
      background: rgba(15, 20, 30, 0.16);
      backdrop-filter: none;
    }
    .slam-guide-spot {
      position: absolute;
      border-radius: 8px;
      box-shadow: 0 0 0 9999px rgba(15, 20, 30, 0.55);
      outline: 2px solid var(--slam-accent);
      outline-offset: 2px;
      pointer-events: none;
      transition: top .2s, left .2s, width .2s, height .2s;
      animation: slam-guide-pulse 2.2s ease-in-out infinite;
    }
    .slam-guide-overlay.is-modal-guide .slam-guide-spot {
      box-shadow: 0 0 0 9999px rgba(15, 20, 30, 0.18);
      outline-width: 3px;
    }
    @keyframes slam-guide-pulse {
      0%, 100% { outline-color: var(--slam-accent); }
      50%      { outline-color: #60a5fa; }
    }
    .slam-guide-popover {
      position: absolute;
      width: 320px; max-width: calc(100vw - 24px);
      background: #ffffff;
      color: #212529;
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(15, 20, 30, 0.35);
      padding: 14px 16px 12px;
      pointer-events: auto;
      font-size: 0.92rem;
      line-height: 1.4;
    }
    .slam-guide-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px;
    }
    .slam-guide-step {
      font-size: 0.75rem; text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--slam-accent);
      font-weight: 600;
    }
    .slam-guide-close {
      background: transparent; border: 0;
      font-size: 1.2rem; line-height: 1;
      padding: 0 4px; cursor: pointer;
      color: rgba(0, 0, 0, 0.55);
    }
    .slam-guide-close:hover { color: #000; }
    .slam-guide-why {
      font-size: 0.82rem;
      background: rgba(59, 130, 246, 0.08);
      border-left: 3px solid var(--slam-accent);
      padding: 8px 10px;
      border-radius: 4px;
      margin-bottom: 10px;
      color: rgba(0, 0, 0, 0.75);
    }
    .slam-guide-text { margin-bottom: 8px; }
    .slam-guide-next-hint {
      font-size: 0.8rem;
      color: rgba(0, 0, 0, 0.55);
      margin-bottom: 10px;
      font-style: italic;
    }
    .slam-guide-progress {
      margin: 8px 0 12px;
      padding: 8px 10px;
      border: 1px solid rgba(59, 130, 246, 0.18);
      border-radius: 8px;
      background: rgba(59, 130, 246, 0.06);
    }
    .slam-guide-progress-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }
    .slam-guide-progress-label,
    .slam-guide-progress-value {
      font-size: 0.75rem;
      color: rgba(0, 0, 0, 0.62);
    }
    .slam-guide-progress-value {
      font-weight: 600;
      white-space: nowrap;
    }
    .slam-guide-slider {
      width: 100%;
      accent-color: var(--slam-accent);
      cursor: pointer;
    }
    .slam-guide-actions {
      display: flex; justify-content: space-between; gap: 8px;
    }
    .slam-guide-btn {
      padding: 6px 14px;
      border-radius: 6px;
      border: 1px solid var(--slam-accent);
      background: var(--slam-accent);
      color: #fff;
      font-size: 0.88rem;
      cursor: pointer;
    }
    .slam-guide-btn:disabled,
    .slam-guide-btn.slam-guide-prev {
      background: transparent; color: var(--slam-accent);
    }
    .slam-guide-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .slam-guide-btn:hover:not(:disabled) { filter: brightness(1.05); }
    .slam-guide-footer {
      margin-top: 10px; padding-top: 8px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      text-align: center;
    }
    .slam-guide-linklike {
      background: none; border: 0; padding: 0;
      color: rgba(0, 0, 0, 0.55);
      font-size: 0.8rem; cursor: pointer;
      text-decoration: underline dotted;
    }
    .slam-guide-linklike:hover { color: #000; }

    /* Guide Me toasts — pop in bottom-right so they never hide real UI. */
    .slam-guide-toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      min-width: 220px;
      max-width: 380px;
      padding: 10px 14px;
      border-radius: 8px;
      background: #1f2937;
      color: #f3f4f6;
      box-shadow: 0 8px 24px rgba(15, 20, 30, 0.35);
      font-size: 0.9rem;
      z-index: 2147483000;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .slam-guide-toast.is-shown { opacity: 1; transform: translateY(0); }
    .slam-guide-toast-error { background: #b91c1c; }
    .slam-guide-toast-warn  { background: #b45309; }
    .slam-guide-toast-info  { background: #1f2937; }
    html[data-theme="dark"] .slam-guide-toast-info { background: #374151; }

    /* "Guide me" button inside a chat message */
    .ai-guide-me-btn {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 6px;
      padding: 5px 10px;
      background: var(--slam-accent);
      color: #fff;
      border: 0; border-radius: 6px;
      cursor: pointer;
      font-size: 0.85rem;
    }
    .ai-guide-me-btn:hover { filter: brightness(1.05); }
    .ai-guide-me-btn::before {
      content: '\f4fc';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
    }

    html[data-theme="dark"] .slam-guide-backdrop { background: rgba(0, 0, 0, 0.6); }
    html[data-theme="dark"] .slam-guide-spot     { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7); }
    html[data-theme="dark"] .slam-guide-popover {
      background: #1f2937;
      color: #f3f4f6;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
    }
    html[data-theme="dark"] .slam-guide-step { color: #60a5fa; }
    html[data-theme="dark"] .slam-guide-close { color: rgba(255, 255, 255, 0.65); }
    html[data-theme="dark"] .slam-guide-close:hover { color: #fff; }
    html[data-theme="dark"] .slam-guide-why {
      background: rgba(96, 165, 250, 0.12);
      border-left-color: #60a5fa;
      color: rgba(255, 255, 255, 0.82);
    }
    html[data-theme="dark"] .slam-guide-next-hint { color: rgba(255, 255, 255, 0.6); }
    html[data-theme="dark"] .slam-guide-progress {
      border-color: rgba(96, 165, 250, 0.24);
      background: rgba(96, 165, 250, 0.1);
    }
    html[data-theme="dark"] .slam-guide-progress-label,
    html[data-theme="dark"] .slam-guide-progress-value {
      color: rgba(255, 255, 255, 0.68);
    }
    html[data-theme="dark"] .slam-guide-footer { border-top-color: rgba(255, 255, 255, 0.12); }
    html[data-theme="dark"] .slam-guide-linklike { color: rgba(255, 255, 255, 0.6); }
    html[data-theme="dark"] .slam-guide-linklike:hover { color: #fff; }

    html[data-theme="dark"] .helper-omnisearch-input { background: rgba(30, 30, 30, 0.9); border-color: rgba(255, 255, 255, 0.2); color: #f1f1f1; }
    html[data-theme="dark"] .helper-omnisearch-input:focus { background: #1e1e1e; }
    html[data-theme="dark"] .helper-omnisearch-icon { color: rgba(255, 255, 255, 0.5); }
    html[data-theme="dark"] .global-guide-me-btn { background: rgba(110, 168, 254, 0.14); color: #9ecbff; border-color: rgba(110, 168, 254, 0.28); }
    html[data-theme="dark"] .global-guide-me-btn:hover { background: rgba(110, 168, 254, 0.22); border-color: rgba(110, 168, 254, 0.48); }
    html[data-theme="dark"] .helper-omnisearch-results { background: #1e1e1e; border-color: rgba(255, 255, 255, 0.12); color: #f1f1f1; }
    html[data-theme="dark"] .helper-omnisearch-group { border-bottom-color: rgba(255, 255, 255, 0.08); }
    html[data-theme="dark"] .helper-omnisearch-group-label { color: rgba(255, 255, 255, 0.55); }
    html[data-theme="dark"] .helper-omnisearch-group-link:hover { color: rgba(255, 255, 255, 0.78); }
    html[data-theme="dark"] .helper-omnisearch-item { color: #f1f1f1; }
    html[data-theme="dark"] .helper-omnisearch-item:hover,
    html[data-theme="dark"] .helper-omnisearch-item.is-active { background: rgba(var(--slam-accent-rgb), 0.18); color: #9ecbff; }
    html[data-theme="dark"] .helper-omnisearch-item-icon { color: rgba(255, 255, 255, 0.55); }
    html[data-theme="dark"] .helper-omnisearch-item-subtitle { color: rgba(255, 255, 255, 0.6); }
    html[data-theme="dark"] .helper-omnisearch-empty { color: rgba(255, 255, 255, 0.65); }
    html[data-theme="dark"] .helper-omnisearch-suggest-note {
      color: rgba(255, 255, 255, 0.65);
      border-bottom-color: rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
    }
    html[data-theme="dark"] .helper-omnisearch-ask { border-top-color: rgba(255, 255, 255, 0.08); }
    html[data-theme="dark"] .helper-omnisearch-ask-item { background: rgba(var(--slam-accent-rgb), 0.12); }
    html[data-theme="dark"] .helper-omnisearch-ask-item .helper-omnisearch-item-subtitle { color: rgba(120, 180, 255, 0.9); }
    html[data-theme="dark"] .helper-omnisearch-ask-item .helper-omnisearch-item-icon { color: #9ecbff; }
    html[data-theme="dark"] .ai-thinking { color: rgba(255, 255, 255, 0.75); }

    @media (max-width: 992px) {
      .helper-omnisearch { max-width: 220px; min-width: 160px; }
    }
    @media (max-width: 768px) {
      .helper-omnisearch { display: none; }
    }

    /* ────────────────────────────────────────────────────────────────
       Phase 11 — global page-transition progress indicator. A 3px bar
       at the very top of the viewport that animates while a navigation
       or form submit is in flight, so heavy pages (scaffold dashboard,
       project status, exports) feel responsive instead of "frozen".
       Pure CSS + 80 LOC of JS — no vendor dependency. Theme-aware via
       data-theme attribute on <html>.
       ──────────────────────────────────────────────────────────────── */
    #slamPageProgress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(90deg, var(--slam-accent) 0%, #6610f2 50%, #0dcaf0 100%);
      box-shadow: 0 0 10px rgba(var(--slam-accent-rgb), 0.55);
      z-index: 99999;
      transition: width 200ms ease-out, opacity 350ms ease-out;
      opacity: 0;
      pointer-events: none;
      will-change: width, opacity;
    }
    html[data-theme="light"] #slamPageProgress {
      box-shadow: 0 0 10px rgba(var(--slam-accent-rgb), 0.35);
    }
    #slamPageProgress.is-active {
      opacity: 1;
    }
    #slamPageProgress.is-done {
      width: 100% !important;
      opacity: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      #slamPageProgress { transition: opacity 100ms linear; }
    }