/* Hearth & Hue back office - top bar: the Lobby orb and the settings gear.
   Both live outside the row of text tabs so the tabs have room. On a phone the orb sits at the start of the
   tab row and the gear at its end; on a computer the orb sits just before the tabs and the gear at the far right. */
.top .orb,.top .gear{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;text-decoration:none;color:var(--brass-bright,#D3A667);-webkit-tap-highlight-color:transparent;transition:transform .25s cubic-bezier(.32,.72,0,1),box-shadow .25s cubic-bezier(.32,.72,0,1),background .25s cubic-bezier(.32,.72,0,1)}
:root header.top .orb,:root header.top .gear{order:3;margin:0}
:root header.top .gear{order:5;width:32px;height:32px;border:1px solid var(--brass,#B8874A);background:transparent}
:root header.top .gear:hover{background:rgba(var(--h-brass-rgb),.16)}
:root header.top .gear:active,:root header.top .orb:active{transform:scale(.93)}
:root header.top .gear.on{background:var(--brass-bright,#D3A667);color:var(--h-on,#14161B);border-color:var(--brass-bright,#D3A667)}
.top .gear svg{width:17px;height:17px;display:block;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.top .gear:hover svg{transform:rotate(60deg)}
:root header.top .gear:focus-visible,:root header.top .orb:focus-visible{outline:2px solid var(--brass-bright,#E6B873);outline-offset:3px}

/* the orb: a small living sphere. Breathes slowly; quickens and glows when something is waiting for you. */
:root header.top .orb{width:38px;height:38px;margin:0 2px;--o:var(--h-brass-rgb);--o2:var(--h-brass2-rgb,184,135,74)}
.orb .orb-core{position:absolute;inset:5px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85) 0,rgba(255,255,255,0) 26%),radial-gradient(circle at 50% 55%,rgba(var(--o),.95) 0,rgba(var(--o2),.85) 58%,rgba(var(--o2),.35) 100%);
  box-shadow:inset -3px -4px 8px rgba(0,0,0,.4),0 0 10px rgba(var(--o),.45);animation:orb-breathe 5s ease-in-out infinite}
.orb .orb-core::before{content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 55%,rgba(255,255,255,.35) 70%,transparent 85%);animation:orb-swirl 9s linear infinite;mix-blend-mode:soft-light}
.orb .orb-halo{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(var(--o),.55);opacity:.5;animation:orb-halo 5s ease-in-out infinite}
.orb.live .orb-core{animation-duration:2.6s;box-shadow:inset -3px -4px 8px rgba(0,0,0,.4),0 0 16px rgba(var(--o),.75)}
.orb.live .orb-core::before{animation-duration:5s}
.orb.live .orb-halo{animation-duration:2.6s;opacity:.8}
.orb.urgent{--o:var(--h-rose-rgb,229,139,125);--o2:var(--h-rose-rgb,229,139,125)}
.orb.on .orb-halo{opacity:1;border-width:2px;border-color:var(--brass-bright,#D3A667);animation:none;inset:-1px}
@keyframes orb-breathe{0%,100%{transform:scale(.93)}50%{transform:scale(1.04)}}
@keyframes orb-swirl{to{transform:rotate(360deg)}}
@keyframes orb-halo{0%,100%{transform:scale(.96);opacity:.25}50%{transform:scale(1.1);opacity:.7}}
.top .orb .lb-badge{position:absolute;top:-4px;right:-5px;margin:0;min-width:16px;height:16px;padding:0 4px;font:700 9.5px/16px var(--mono);box-shadow:0 0 0 2px rgba(20,22,27,.95)}
:root[data-theme="ember"] .top .orb .lb-badge{box-shadow:0 0 0 2px rgba(12,10,9,.95)}
@media (prefers-reduced-motion:reduce){.orb .orb-core,.orb .orb-core::before,.orb .orb-halo{animation:none}.top .gear svg{transition:none}}

/* Settings & data / Account sub-tabs, shown at the top of both screens */
.set-tabs{margin-top:0}

/* desktop: the gear sits at the far right, after the clock */
@media (min-width:641px){:root header.top .h-clock{margin-right:12px}}

/* phone: row one = logo, name, store, sound; row two = orb, tabs, gear */
@media (max-width:640px){
  :root header.top .who{display:none}
  .top::after{content:'';order:5;flex:0 0 100%;height:0;margin:0}
  :root header.top .orb{order:6;margin:0}
  :root header.top nav{order:7;flex:1 1 0;min-width:0;margin:0;padding:2px 0 4px}
  :root header.top .gear{order:8}
  :root header.top #snd{order:4}
  :root header.top a.store-link{order:3}
}