@layer components {
  /* Reserve only the label/header edge. The controls themselves are in a portal
     so clickable cards, overflow and Blazor rerenders do not own their markup. */
  [data-section-help-space="section"] { padding-inline-end: max(44px, 1.25rem); }
  [data-section-help-space="metric"] :is(.kpi__label, .mk-kpi__label, .pulse__label),
  .section-metric[data-section-help-space] > span:first-child,
  .ly-stat[data-section-help-space] > span:first-child { padding-inline-end: 24px; }
  .modal__head[data-section-help-space] { padding-inline-end: 78px; }
  .section-help-layer { pointer-events: none; }
  .section-help-layer[data-hit-test] .section-help-button { pointer-events: none; }
  .section-help-button {
    position: fixed; display: grid; place-items: center;
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
    background: var(--surface-solid); color: var(--ink-4); pointer-events: auto;
    cursor: help; transition: color 140ms, background 140ms, box-shadow 140ms;
  }
  .section-help-button:hover, .section-help-button:focus-visible {
    color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--surface-solid);
  }
  /* In a table header the circle takes the header's tint; while the table is
     scrolled short of its end, a fade hides the label that runs underneath. */
  .section-help-button--header, .section-help-button--header:is(:hover, :focus-visible) { background: transparent; box-shadow: none; }
  .section-help-button--header::before, .section-help-button--header::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
  .section-help-button--header::after { inset: 0; border-radius: 50%; background: var(--bg-sunken); transition: background 140ms; }
  .section-help-button--header:is(:hover, :focus-visible)::after { background: var(--accent-soft); }
  .section-help-button--covers::before { inset: -6px -8px -6px -24px; background: linear-gradient(to right, transparent, var(--bg-sunken) 18px); }
  .section-help-button[hidden], .section-help-layer[hidden], .section-help-tip[hidden] { display: none; }
  .section-help-tip {
    position: fixed; inset: auto; margin: 0; z-index: 2147483001;
    width: min(340px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); overflow-y: auto;
    padding: 18px; border: 1px solid var(--line); border-radius: 16px;
    color: var(--ink); background: var(--surface-solid); box-shadow: var(--sh-lg);
    font: 400 .8125rem/1.6 var(--font); text-align: start;
  }
  .section-help-eyebrow { display: block; margin-bottom: 7px; color: var(--ink-3); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; }
  .section-help-tip__title { display: block; margin-bottom: 6px; font-size: .9375rem; line-height: 1.4; }
  .section-help-tip__summary { color: var(--ink-2); margin: 0; }
  .section-help-tip__hint { display: block; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); font-size: .6875rem; color: var(--ink-3); }
  .section-help-formula { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-soft); }
  .section-help-formula .section-help-eyebrow { margin-bottom: 5px; color: var(--accent); }
  .section-help-formula p { margin: 0; font-size: .8125rem; line-height: 1.65; font-weight: 550; overflow-wrap: anywhere; white-space: pre-line; }
  .section-help-dialog {
    inset: 0; margin: auto; padding: 0; width: min(600px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px); overflow: hidden;
    border: 1px solid var(--line); border-radius: 22px;
    background: var(--surface-solid); color: var(--ink); box-shadow: var(--sh-lg);
    font-family: var(--font); text-align: start;
  }
  .section-help-dialog[open] { display: flex; flex-direction: column; animation: section-help-enter 160ms ease-out; }
  .section-help-dialog::backdrop { background: rgb(10 15 24 / .46); backdrop-filter: blur(5px); }
  .section-help-dialog__head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 25px 26px 20px; border-bottom: 1px solid var(--line); }
  .section-help-dialog__head h2 { margin: 0; font-size: 1.25rem; line-height: 1.4; letter-spacing: -.02em; }
  .section-help-close { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-sunken); color: var(--ink-3); font-size: 24px; line-height: 1; }
  .section-help-close:hover { background: var(--surface-hover); color: var(--ink); }
  .section-help-dialog__body { padding: 23px 26px 26px; overflow-y: auto; overscroll-behavior: contain; font-size: .875rem; line-height: 1.75; color: var(--ink-2); }
  .section-help-dialog__summary { margin: 0; color: var(--ink); font-size: .9375rem; }
  .section-help-dialog__body h3 { margin: 22px 0 9px; color: var(--ink); font-size: .875rem; font-weight: 650; }
  .section-help-dialog__body > p + p { margin-top: 10px; }
  .section-help-steps { margin: 0; padding-inline-start: 21px; }
  .section-help-steps li { padding-inline-start: 4px; margin-top: 8px; }
  .section-help-steps li::marker { color: var(--accent); font-weight: 650; }
  .section-help-dialog__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 26px; border-top: 1px solid var(--line); }
  .section-help-dialog__foot > span { color: var(--ink-3); font-size: .75rem; }
  @keyframes section-help-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @media (max-width: 520px) {
    .section-help-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 18px; }
    .section-help-dialog__head, .section-help-dialog__body, .section-help-dialog__foot { padding-inline: 20px; }
    .section-help-dialog__foot > span { display: none; }
    .section-help-dialog__foot .btn { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .section-help-button, .section-help-button::after { transition: none; }
    .section-help-dialog[open] { animation: none; }
  }
  @media print { .section-help-ui { display: none !important; } }
}

/* A headerless table card shows its control in the table header; the whole last
   column moves aside so labels and right-aligned values stay lined up. Unlayered,
   like responsive.css and module cell paddings it has to win over. */
@media not print {
  table[data-section-help-space="column"] > :is(thead, tbody, tfoot) > tr > :last-child { padding-inline-end: 40px; }
}