/* docara-shell-source: smart/smart/help-mark/css/help-mark.css */
@charset "UTF-8";
@layer sf.components {
  /* A «?» on a label's line, and a short explanation on the menu's surface, at
     most 20rem wide. */
  sf-help-mark {
    display: inline-flex;
    vertical-align: middle;
  }
  /* The mark adds nothing to the height of the line or the label row it stands
     in: the smallest icon button is 24px and a label line 20px, so the line grew
     wherever a mark stood (docs trials 4 and 5). The box has no height of its
     own and the button, which keeps its target, stands out of it, centred:
     in running text the box sits at the middle of the line (vertical-align),
     in a flex label row (.sf-input-label) at the row's centre (align-self). A
     box one line tall was not enough: in a label row 1lh is the row's 24px, not
     the 20px of the label text. (The host is display: contents once upgraded;
     this box is the one.) */
  .sf-help-mark {
    display: inline-flex;
    align-items: center;
    height: 0;
    block-size: 0;
    vertical-align: middle;
    align-self: center;
  }
  .sf-help-mark-panel {
    position: fixed;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    inset: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sf-a4);
    max-width: min(var(--sf-g0), 100vw);
    max-inline-size: min(var(--sf-g0), 100vw);
    padding: var(--sf-space-1\/3) var(--sf-space-1\/2);
    border: var(--sf-px) solid var(--sf-outline-variant);
    border-radius: var(--sf-radius--surface);
    background-color: var(--sf-elevation-3--surface);
    --sf-on-surface-variant: var(--sf-on-elevation-3--variant);
    box-shadow: var(--sf-elevation-3--shadow);
    color: var(--sf-on-surface);
    font-size: var(--sf-text-size-1\/2);
    line-height: var(--sf-text-height-1\/2);
    white-space: normal;
    word-wrap: anywhere;
  }
  .sf-help-mark-panel[hidden] {
    display: none;
  }
  .sf-help-mark-title {
    font-weight: var(--sf-font-weight-medium);
  }
  .sf-help-mark-body {
    color: var(--sf-on-surface-variant);
  }
  .sf-help-mark-live {
    position: absolute;
    width: var(--sf-px);
    inline-size: var(--sf-px);
    height: var(--sf-px);
    block-size: var(--sf-px);
    overflow: hidden;
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    white-space: nowrap;
  }
}