{{/* docs-jumpto — the keyboard jump-to palette's markup and styles,
     shared by the list and a document because Control-K should work
     from both. Rendered on every signed-in page; hidden until opened.

     Every string here is resolved from the catalog server-side
     (render.go's docs.jumpto.*) and read back out of the DOM by
     fixtures/jump-to.mjs — the bundle carries no copy of its own to
     keep in sync by hand, the same rule the editor's save-status
     indicator and the formatting bar already follow.

     The field is a combobox controlling a listbox, and the module
     implements that contract: Down/Up move, Enter opens, Escape
     closes and returns focus, aria-activedescendant names the current
     option. A role written without its behaviour is worse than no
     role, because the person acts on it — see fixtures/jump-to.mjs's
     own header for where that was learned.

     hidden, not display:none in a class: fixtures/jump-to.mjs toggles
     the property, and [hidden] is what a screen reader honours
     without the stylesheet having loaded. */}}
{{define "docs-jumpto"}}<style>
  [docs-jumpto] {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-block-start: 12vh;
    padding-inline: var(--rst-sp-4);
    background: var(--rst-overlay);
  }
  [docs-jumpto][hidden] {
    display: none;
  }
  [docs-jumpto-panel] {
    inline-size: min(100%, 34rem);
    max-block-size: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* A float: the suite's one floating radius (estilo menu.css). */
    border-radius: var(--estilo-float-radius);
    background: var(--rst-surface);
    box-shadow: var(--rst-shadow-pop);
  }
  [docs-jumpto-head] {
    display: flex;
    align-items: center;
    gap: var(--rst-sp-2);
    padding: var(--rst-sp-3);
    border-block-end: 1px solid var(--rst-line);
  }
  [docs-jumpto-input] {
    flex: 1;
    min-block-size: 32px;
    padding: 0 var(--rst-sp-2);
    border: 1px solid var(--rst-line);
    border-radius: var(--rst-radius-sm);
    background: var(--rst-bg);
    color: var(--rst-text);
    font: inherit;
  }
  /* `font: inherit` here outweighs tokens.css's bare `input`, whose
     coarse-pointer rule lifts fields to 16px so iOS does not zoom on tap
     (TestNoZoomOnTap). Same rule, at this weight. */
  @media (pointer: coarse) {
    [docs-jumpto-input] {
      font-size: max(1rem, 1em);
    }
  }
  [docs-jumpto-list] {
    margin: 0;
    padding: var(--rst-sp-1);
    overflow-y: auto;
    list-style: none;
  }
  [docs-jumpto-list] li {
    display: flex;
    justify-content: space-between;
    gap: var(--rst-sp-3);
    padding: var(--rst-sp-2) var(--rst-sp-3);
    border-radius: var(--rst-radius-sm);
    cursor: pointer;
  }
  /* aria-selected is the state, and background alone would be colour
     carrying meaning on its own (§10.3) — the weight changes too. */
  /* Hover matches the selected row's background, so a pointer and the
     arrow keys point at a row the same way; only the selected row takes
     the weight and colour that carry the state. */
  [docs-jumpto-list] li:hover {
    background: var(--rst-accent-soft);
  }
  [docs-jumpto-list] li[aria-selected="true"] {
    background: var(--rst-accent-soft);
    color: var(--rst-accent);
    font-weight: 600;
  }
  [docs-jumpto-when] {
    color: var(--rst-text-muted);
    font-size: var(--rst-fs-sm);
    font-weight: 400;
    white-space: nowrap;
  }
  [docs-jumpto-status] {
    padding: var(--rst-sp-3);
    color: var(--rst-text-muted);
    font-size: var(--rst-fs-sm);
  }
  [docs-jumpto-hint] {
    padding: var(--rst-sp-2) var(--rst-sp-3);
    border-block-start: 1px solid var(--rst-line);
    color: var(--rst-text-faint);
    font-size: var(--rst-fs-xs);
  }
</style>
<div docs-jumpto role="dialog" aria-modal="true" aria-label="{{.JumpTo.Label}}" hidden>
  <div docs-jumpto-panel>
    <div docs-jumpto-head>
      <input docs-jumpto-input type="text" role="combobox" aria-expanded="false"
             aria-controls="docs-jumpto-list" aria-autocomplete="list" autocomplete="off"
             placeholder="{{.JumpTo.Placeholder}}" aria-label="{{.JumpTo.Placeholder}}">
      <button docs-jumpto-close rst-btn="ghost" type="button">{{.JumpTo.Close}}</button>
    </div>
    <ul docs-jumpto-list id="docs-jumpto-list" role="listbox" aria-label="{{.JumpTo.Label}}"></ul>
    {{/* role="status" so a result count or a failure is announced
         without stealing focus from the field being typed into. */}}
    <p docs-jumpto-status role="status" aria-live="polite" hidden
       data-partial="{{.JumpTo.Partial}}" data-empty="{{.JumpTo.Empty}}" data-failed="{{.JumpTo.Failed}}"></p>
    <p docs-jumpto-hint>{{.JumpTo.Hint}}</p>
  </div>
</div>
<script type="module" defer src="{{.JumpToScript}}"></script>{{end}}