/* Livemark's phone contents: a sticky bar under the header; its sheet is htmlpress-sheet */
@scope (htmlpress-toc-bar) {
  :scope {
    display: none;
  }
  @media (max-width: 80rem) {
    :scope:has(> button) {
      position: sticky;
      top: 4rem;
      z-index: 15;
      display: block;
      border-bottom: 1px solid var(--htmlpress-border);
      background: var(--htmlpress-bg);
    }
  }
  :scope > button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0;
    background: none;
    color: var(--htmlpress-muted);
    font: 0.875rem/1.25rem var(--htmlpress-font);
    text-align: left;
    cursor: pointer;
  }
  :scope > button > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  [data-ring] {
    rotate: -90deg;
  }
  [data-ring] circle {
    stroke: color-mix(in oklab, var(--htmlpress-muted) 30%, transparent);
    transition: stroke-dashoffset 0.15s;
  }
  [data-ring] circle + circle {
    stroke: var(--htmlpress-accent);
  }
}