/* Reference: Reframed's 32px toolbar, dashed dividers, pixel icons and mono labels. */
:root[data-service-skin=reframed] .app-topbar.reference-topbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;height:32px!important;min-height:32px!important;padding:0 4px!important;border:1px solid var(--line)!important;background:var(--rf-bg)!important;overflow:hidden;font-family:RFMono,monospace;font-weight:700;letter-spacing:.1em}
.reference-topbar .reference-topbar-left{display:flex;align-items:center;gap:8px;min-width:0;max-width:calc(100% - 530px)}
:root[data-service-skin=reframed] .app-topbar.reference-topbar #menu-toggle{position:relative;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 28px;width:28px!important;height:28px!important;min-height:28px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:hidden;color:var(--ink)!important}
.reference-topbar #menu-toggle span{display:flex;align-items:center;justify-content:center;transition:transform .2s ease,opacity .2s ease}.reference-topbar #menu-toggle svg{display:block;width:20px;height:20px;flex:none}.reference-topbar #menu-toggle .reference-menu-arrow{position:absolute;transform:translateX(-160%);opacity:0}.reference-topbar #menu-toggle:hover .reference-menu-grid{transform:translateX(160%)}.reference-topbar #menu-toggle:hover .reference-menu-arrow{transform:translateX(0);opacity:1}
:root[data-service-skin=reframed] .app-topbar.reference-topbar .service-breadcrumb{display:flex!important;align-items:center!important;align-self:center!important;gap:8px!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0 12px!important;height:20px!important;border-left:1px dashed var(--line);border-right:1px dashed var(--line);overflow:hidden;white-space:nowrap;font:700 14px/20px RFMono,GalmuriKO,monospace;letter-spacing:.1em}
:root[data-service-skin=reframed] .app-topbar.reference-topbar .service-breadcrumb :is(a,button,[aria-current=page]){display:inline-flex!important;align-items:center!important;flex:none;align-self:center!important;height:20px!important;min-height:20px!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:var(--ink)!important;font:inherit!important;letter-spacing:inherit;line-height:20px!important}
.reference-topbar .service-breadcrumb [aria-current=page]{opacity:.75}.reference-topbar .service-breadcrumb .service-path-separator{height:20px!important;padding:0!important;color:var(--muted)!important;font:inherit!important}.reference-topbar .service-breadcrumb :is(a,button):hover{color:var(--accent)!important}
:root[data-service-skin=reframed] .app-topbar.reference-topbar #service-search-open{display:flex!important;align-items:center!important;gap:8px!important;flex:none;margin:0!important;padding:0!important;min-height:28px!important;border:0!important;background:none!important;color:var(--ink)!important;font:700 14px/1 RFMono,monospace!important;letter-spacing:.1em;white-space:nowrap}
.reference-topbar #service-search-open>svg{width:24px;height:24px;display:block;flex:none}.reference-topbar #service-search-open>kbd{font:700 11px/1 RFMono,monospace;letter-spacing:.05em;padding:1px 4px;background:var(--line);color:var(--ink);border:0}
.reference-topbar-actions{display:flex;align-items:center;flex:none;gap:8px;height:100%}.reference-report-host,.reference-notice-host{display:flex;align-items:center;gap:4px;padding-left:8px;border-left:1px dashed var(--line)}
:root[data-service-skin=reframed] .reference-topbar #service-report-issue{display:flex;align-items:center;justify-content:center;gap:4px;min-height:22px;height:22px;margin:0;padding:0 4px;border:1px solid var(--line);background:repeating-linear-gradient(45deg,transparent 0 5px,color-mix(in srgb,var(--ink) 8%,transparent) 5px 10px);color:#ef4444;font:700 13px/1 RFMono,monospace;letter-spacing:.1em;white-space:nowrap}
.reference-topbar #service-report-issue svg{display:block;width:16px;height:16px;flex:none}.reference-topbar #service-report-issue:hover{text-decoration:underline}
:root[data-service-skin=reframed] .app-topbar.reference-topbar #service-notifications-open{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;min-height:28px!important;height:28px!important;margin:0!important;padding:0!important;border:0!important;background:none!important;color:var(--ink)!important;font:700 14px/1 RFMono,monospace!important;letter-spacing:.1em;white-space:nowrap}
.app-topbar.reference-topbar #service-notifications-open>svg{display:none!important}.app-topbar.reference-topbar #service-notifications-open>span{display:inline!important;transform:none!important;line-height:1!important;font:inherit!important}.app-topbar.reference-topbar #service-notifications-open>b{height:16px!important;min-width:19px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 4px!important;border:0!important;background:#588fbb!important;color:#07131c!important;font-size:0!important;letter-spacing:0}.app-topbar.reference-topbar #service-notifications-open>b:after{content:attr(data-display-count);font:700 11px/1 RFMono,monospace}.app-topbar.reference-topbar #service-notifications-open>b[hidden]{display:none!important}.reference-topbar #service-notifications-open:hover{text-decoration:underline}.reference-topbar #service-notifications-open.has-new-notice{animation:wf-notice-arrival 1.2s ease}
@keyframes wf-notice-arrival{0%,100%{box-shadow:none}25%,65%{box-shadow:inset 0 -2px #588fbb;background:color-mix(in srgb,#588fbb 15%,transparent)}}
.reference-topbar .app-theme-status{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important}
.reference-topbar button:focus-visible,.reference-topbar a:focus-visible{outline:2px solid var(--accent)!important;outline-offset:-2px!important}
@media(max-width:1100px){.reference-topbar #service-report-issue>span{display:none}.reference-topbar .reference-topbar-left{max-width:calc(100% - 350px)}}
@media(max-width:700px){:root[data-service-skin=reframed] .app-topbar.reference-topbar{height:44px!important;min-height:44px!important;gap:5px!important}.reference-topbar .reference-topbar-left{max-width:none;flex:1;gap:4px}.reference-topbar-actions{gap:4px}.reference-report-host,.reference-notice-host{padding-left:4px}.reference-topbar #service-search-open>span,.reference-topbar #service-search-open>kbd{display:none!important}:root[data-service-skin=reframed] .app-topbar.reference-topbar .service-breadcrumb{font-size:12px!important;padding:0 6px!important;gap:5px!important}.app-topbar.reference-topbar #service-notifications-open>span{display:none!important}.app-topbar.reference-topbar #service-notifications-open>svg{display:block!important;width:18px;height:18px}.reference-topbar #service-search-open>svg{width:20px;height:20px}.reference-topbar #service-report-issue{min-width:24px!important;min-height:28px!important;height:28px!important;padding:0 3px!important}}
@media(prefers-reduced-motion:reduce){.reference-topbar #menu-toggle span{transition:none}.reference-topbar #service-notifications-open.has-new-notice{animation:none;box-shadow:inset 0 -2px #588fbb}}

.reference-topbar #menu-toggle>span[hidden]{display:none!important}

@media(max-width:700px){:root[data-service-skin=reframed] .app-topbar.reference-topbar #service-search-open{position:static!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important}}

:root[data-service-skin=reframed] .app-topbar.reference-topbar #service-search-open>span,:root[data-service-skin=reframed] .app-topbar.reference-topbar #service-report-issue>span{font:inherit!important;letter-spacing:inherit!important;transform:none!important}