/* Status help widget. A `?` button next to any admin status value opens a panel listing every value of that vocabulary, with the current one highlighted. The copy comes from the page-level #status-help-data JSON blob, not from this markup. Colours go through Django admin CSS variables so light and dark mode both work; the literal fallbacks are a coherent light-mode default used only if the variables are undefined. This mirrors catalogue/static/catalogue/css/embedding_queue_tooltip.css. The panel is a single element appended to by status_help.js and is position: fixed from the start — the changelist wraps results in .results { overflow-x: auto }, which clips an absolutely-positioned popover and tucks it under the horizontal scrollbar. */ .status-help { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .status-help__btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; flex: 0 0 auto; border: 1px solid var(--border-color, #ccc); border-radius: 50%; background: transparent; color: var(--body-quiet-color, #666); font-size: 11px; font-weight: bold; line-height: 1; cursor: pointer; /* The changelist and change form are both one big

; type="button" on the element keeps this from submitting it. */ } .status-help__btn:hover, .status-help__btn:focus { border-color: var(--link-fg, #417690); color: var(--link-fg, #417690); outline: none; } .status-help__btn:focus-visible { outline: 2px solid var(--link-fg, #417690); outline-offset: 1px; } /* ---- Anchored popover (default) ---- */ .status-help__panel { display: none; position: fixed; z-index: 1100; width: 360px; max-width: calc(100vw - 16px); max-height: 70vh; overflow: auto; padding: 10px 12px; background: var(--body-bg, #fff); color: var(--body-fg, #333); border: 1px solid var(--border-color, #ccc); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); font-size: 12px; line-height: 1.45; text-align: left; white-space: normal; opacity: 0; transform: scale(0.97); transition: opacity 120ms ease-out, transform 120ms ease-out; } .status-help__panel--open { display: block; opacity: 1; transform: scale(1); } .status-help__arrow { position: absolute; width: 10px; height: 10px; background: var(--body-bg, #fff); border-left: 1px solid var(--border-color, #ccc); border-top: 1px solid var(--border-color, #ccc); transform: rotate(45deg); } .status-help__title { margin: 0 0 8px; font-size: 12px; font-weight: bold; color: var(--body-quiet-color, #666); text-transform: uppercase; letter-spacing: 0.04em; } .status-help__row { padding: 6px 8px; border-radius: 4px; } .status-help__row + .status-help__row { margin-top: 2px; } .status-help__row--current { background: var(--selected-row, rgba(65, 118, 144, 0.12)); box-shadow: inset 2px 0 0 var(--link-fg, #417690); } .status-help__label { display: block; font-weight: bold; color: var(--body-fg, #333); } .status-help__text { display: block; margin-top: 2px; color: var(--body-quiet-color, #666); } /* ---- Bottom drawer (touch / narrow) ---- */ .status-help__backdrop { display: none; position: fixed; inset: 0; z-index: 1090; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 150ms ease-out; } .status-help__backdrop--open { display: block; opacity: 1; } .status-help__panel--drawer { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: 75vh; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border: none; border-top: 1px solid var(--border-color, #ccc); border-radius: 12px 12px 0 0; font-size: 14px; transform: translateY(100%); transition: transform 180ms ease-out, opacity 180ms ease-out; } .status-help__panel--drawer.status-help__panel--open { transform: translateY(0); } .status-help__panel--drawer .status-help__arrow { display: none; } .status-help__panel--drawer .status-help__row { padding: 10px 10px; } @media (prefers-reduced-motion: reduce) { .status-help__panel, .status-help__backdrop { transition: none; } }