/* Shared by the discoverability board and deployment benchmark. */
.app-bar { position: relative; display: grid; grid-template-columns: max-content minmax(300px, 560px) max-content; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 14px; min-height: 54px; box-sizing: border-box; border-bottom: 1px solid var(--bg-2); background: #fff; flex: none; }
.app-ttl { display: inline-flex; align-items: baseline; gap: 9px; font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.app-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--bg-2); background: var(--bg); padding: 4px 9px; }
.app-bar .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--brick); animation: miPulse 1.4s infinite; }
.app-discover { min-width: 0; }
.app-actions { display: flex; align-items: center; gap: 8px; }
.app-bar .fsbtn.first { margin-left: 0; }
.app-bar .fsbtn { margin-left: 0; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--ink); background: #fff; color: var(--ink); padding: 6px 11px; transition: all 130ms ease; }
.app-bar .fsbtn:hover { background: var(--ink); color: #FEFCFB; }
.fsbtn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.fsbtn { display: inline-flex; align-items: center; gap: 6px; }
.rp-share { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--ink); background: #fff; padding: 5px 10px; appearance: none; cursor: pointer; }
.rp-share:hover { background: var(--ink); color: #FEFCFB; }
.fsbtn.ok, .rp-share.ok { background: var(--brick) !important; border-color: var(--brick) !important; color: #FEFCFB !important; }
/* The bar and the sector tabs sit on ink, with the monochrome Armature
   lockup (the cream one, for dark ground). The gradient mark and icon.png are
   the old brand; do not use them. In the page, where the site nav already
   shows the brand, only the mark shows (the first 54 of the image's 327
   columns); in fullscreen the whole lockup does. */
.app-ttl .brand { display: block; overflow: hidden; height: 22px; width: 19px; }
.app-ttl .brand-img { height: 22px; width: auto; max-width: none; display: block; }
.app.fs .app-ttl .brand { height: 17px; width: auto; }
.app.fs .app-ttl .brand-img { height: 17px; }
.app-ttl .sep { width: 1px; height: 16px; background: rgba(255,255,255,.25); margin: 0 3px; align-self: center; }
.app-ttl b { font-weight: 500; }
.app-bar { background: var(--ink); border-bottom-color: var(--ink); }
.app-ttl { align-items: center; gap: 10px; color: #fff; }
.app-bar .tb-search { background: #1C1917; border-color: #3A3634; color: rgba(255,255,255,.85); }
.app-bar .tb-search:hover, .app-bar .tb-search:focus-visible { border-color: #F3B08F; }
.app-bar .tb-search-label { color: rgba(255,255,255,.7); }
.app-bar .tb-shortcut kbd { background: #2A2624; border-color: #4A4442; color: rgba(255,255,255,.7); box-shadow: 0 1px 0 #4A4442; }
.app-bar .tb-filters { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.app-bar .tb-filters:hover { border-color: #F3B08F; color: #F3B08F; }
.app-bar .guide-link { color: rgba(255,255,255,.6); }
.app-bar .guide-link:hover { color: #F3B08F; }
.app-bar .fsbtn { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.app-bar .fsbtn:hover { background: #fff; color: var(--ink); border-color: #fff; }