/* =========================================================================
   design directions, the shared base (loaded first under every direction; includes/design-directions.php).
   Only ever active under html[data-direction]: the live look never loads this sheet.
   ========================================================================= */

/* the preview bar: which direction this browser previews, and the way out */
.djjs-dir-bar { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 4px 10px; height: 32px; padding: 0 12px;
  font: 500 13px/32px var(--font-sans, system-ui, sans-serif); color: #1A1206; background: #F5B75B; text-align: center; white-space: nowrap; }
.djjs-dir-bar a { position: relative; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; height: 32px; }
.djjs-dir-bar a::after { content: ""; position: absolute; inset: -6px -8px; }   /* a 44px target inside the 32px strip */
.djjs-dir-bar__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #881337; }
@media (max-width: 480px) { .djjs-dir-bar__more { display: none; } }