/* The small "?" beside a control and the bubble it opens (help-marks.js). The mark is a round button of its own, 32 px
   so a finger finds it; the bubble sits in the flow under the control, so it can never run off the screen on a phone
   or fall on the wrong side in a right-to-left language. */
.help-mark { flex: none; width: 32px; height: 32px; min-width: 32px; padding: 0; border: 1px solid var(--line-strong);
  border-radius: 50%; background: transparent; color: var(--muted); font: inherit; font-size: .9rem; font-weight: 700;
  line-height: 1; cursor: pointer; }
.help-mark:hover, .help-mark[aria-expanded="true"] { color: var(--ink); background: rgba(var(--wash-rgb), .08); }
.help-mark[hidden] { display: none; }
.help-bubble { flex: 1 0 100%; box-sizing: border-box; min-width: 0; margin: 0; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: rgba(var(--wash-rgb), .06); color: var(--ink); font-size: .85rem; font-weight: 500;
  line-height: 1.4; text-align: start; text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; }
.help-bubble[hidden] { display: none; }
/* The album card's "?" explains both its buttons, one line each under the button's own word (app-my-albums.js). */
.help-line { display: block; }
.help-line + .help-line { margin-top: 6px; }
.help-line strong { font-weight: 700; }